SASS的相关内容

最新推荐文章于 2024-09-22 21:48:02 发布
最新推荐文章于 2024-09-22 21:48:02 发布
阅读量223 收藏 1
点赞数
分类专栏： css样式相关 文章标签： ruby css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ME_GIRL/article/details/119954439
版权

1.什么是SASS(Syntactically Awesome Stylesheets Sass)?

SASS是一套利用Ruby实现的, 最早最成熟的CSS预处理器, 诞生于2007年.
它扩展了 CSS 语言，增加了变量、Mixin(混合)、嵌套、函数和运算等特性，使 CSS 更易维护和扩展

2.如何学习SASS?

LESS是一套利用JavaScript实现的CSS预处理器, 诞生于2009年.
由于LESS的诞生比SASS要晚, 并且LESS受到了Sass的影响, 所以在LESS中能看到大量SASS中的特性.
所以只要学会了LESS就等同于学会了大部分的SASS

3.LESS和SASS文件后缀名区别

1) LESS以.less结尾

2) SASS以.sass或者.scss结尾

两种不同结尾方式区别:

  • .sass结尾以缩进替代{}表示层级结构, 语句后面不用编写分号
  • .scss以{}表示层级结构, 语句后面需要写分号

企业开发中推荐使用.scss结尾

注意点: 如果需要使用考拉编译sass文件, 项目目录结构中(包含文件名)不能出现中文和特殊字符

4.SASS的使用

1.SASS中的注释

SASS中的注释和LESS一样
单行注释不会被编译(不会出现在编译后的文件中)
多行注释会被编译 (会出现在编译后的文件中)

2.SASS中的变量

SASS中的变量和LESS中一样, 只是定义格式不同
LESS中定义变量 @变量名称: 值;
SASS中定义变量 $变量名称: 值;

2.1 SASS中变量特点

SASS中变量特点和LESS中几乎一样
2.1 后定义覆盖先定义
2.2 可以把变量赋值给其它变量
2.3 区分全局变量和局部变量(访问采用就近原则)

注意点: LESS中变量是延迟加载, 可以先使用后定义
SASS中变量不是延迟加载, 不可以先使用后定义

$w:300px;
$h:$w;
.father {
    $w:600px;
    width: $w;
    height: $h;
    background-color: pink;
}
.son {
    width: $w;
    height: $h;
    background-color: skyblue;
}

3.SASS中的变量插值

1.什么是变量插值?

如果是属性的取值可以直接使用变量,
但是如果是属性名称或者选择器名称并不能直接使用变量, 必须使用变量插值的格式

2.SASS中的变量插值

SASS中的变量插值和LESS中也一样, 只不过格式不一样
LESS变量插值格式: @{变量名称}
SASS变量插值格式: #{$变量名称}

$size: 200px;
$w: width;
$s: div;
#{$s}{
  #{$w}: $size;
  height: $size;
  background: red;
}

4.SASS中的运算

SASS中的运算和LESS也一样, 都支持+ - * / 运算
注意点: 无论是LESS中的运算还是SASS中的运算都需要加上()

div{
  width: 200px;
  height: 200px;
  background: red;
  position: absolute;
  left: 50%;
  //margin-left: (-200px / 2);
  //margin-left: (-200px * 0.5);
  //margin-left: (-200px + 55);
  margin-left: (-200px - 55);
}

5.SASS中的混合

SASS中的混合和LESS中也一样, 只是定义格式和调用的格式不同

1.LESS中混合定义和调用

LESS中混合定义: .混合名称{} 或者 .混合名称(){}
LESS中混合调用: .混合名称; 或者 .混合名称();

1.SASS中混合定义和调用

SASS中混合定义: @mixin 混合名称{}; 或者 @mixin 混合名称(){};
SASS中混合调用: @include 混合名称; 或者 @include 混合名称();

$w:200px;
$h:$w;
$name:'width';

@mixin center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.father {
    #{$name}: $w;
    height: $h;
    background-color: pink;
    @include center;
    .son {
        $w: 100px;
        width: $w;
        height: $h;
        background-color: skyblue;
        @include center;
    }
}

2. SASS中带参数的混合

SASS中带参数的混合和LESS中也一样

  • 1.1 不带默认值形参
  • 1.2 带默认值形参
  • 1.3 给指定参数赋值
@mixin whc($w:100px,$h:200px,$c:pink){
    width: $w;
    height: $h;
    background-color: $c;
}
@mixin center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.father {
    @include whc();
    @include center;
    .son {
        @include whc($w:50px,$h:100px,$c:skyblue);
        @include center;
    }
}

3.SASS中的可变参数

SASS中的可变参数和LESS中也一样,
只不过由于SASS不是使用JS实现的, 所以不能直接在混合中使用arguments
必须通过 $args...的格式来定义可变参数, 然后通过$args来使用

注意点: 和LESS一样可变参数必须写在形参列表的最后

/*
@mixin animate($name, $time, $mode, $delay){
  transition: $name $time $mode $delay;
}
 */
/*
@mixin animate($args...){
  transition: $args;
}
 */
@mixin animate($name, $time, $args...){
  transition: $name $time $args;
}
div{
  width: 200px;
  height: 200px;
  background: red;
  //transition: all 4s linear 0s;
  @include animate(all, 4s, linear, 0s);
}
div:hover{
  width: 400px;
  height: 400px;
  background: blue;
}

6.scss文件中导入其它.scss文件

和LESS一样SASS文件中也支持导入其它SASS文件

其实原生的CSS也支持通过**@import导入其它的CSS文件, 只不过不常用**

不常用的原因在于原生的@import导入其它的CSS文件,只有执行到@import时浏觅器才会去下载对应 css文件，这导致请求次数变多,页面加载起来特别慢

而LESS和SASS中的@import是直接将导入的文件拷贝到当前文件中生成一份CSS, 所以只会请求一次, 速度更快

// 06.scss
@mixin center(){
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

@import "06"; // .scss可以省略

div{
  width: 200px;
  height: 200px;
  background: red;
  @include center;
}

7.SASS中的内置函数

和LESS一样, SASS中也提供了很多内置函数方便我们使用
内置函数

  • 字符串函数
    • unquote（$string）：删除字符串中的引号；
    • quote（$string）：给字符串添加引号；
    • To-upper-case（$string）：将字符串小写字母转换为大写字母
    • To-lower-case（$string）：将字符串大写字母转换为小写字母
  • 数值函数
    • percentage($value)：将不带单位的数转换成百分比值；
    • round($value)：将数值四舍五入，转换成一个最接近的整数；
    • ceil($value)：向上取整；
    • floor($value)：向下取整；
    • abs($value)：取数的绝对值；
    • min($numbers…)：找出几个数值之间的最小值；
    • max($numbers…)：找出几个数值之间的最大值；
    • random(): 获取随机数
  • 颜色函数
    • rgb( r e d , red, red,green,$blue)：根据红、绿、蓝三个值创建一个颜色；
    • rgba( r e d , red, red,green, b l u e , blue, blue,alpha)：根据红、绿、蓝和透明度值创建一个颜色；
    • red($color)：从一个颜色中获取其中红色值；
    • green($color)：从一个颜色中获取其中绿色值；
    • blue($color)：从一个颜色中获取其中蓝色值；
    • mix( c o l o r − 1 , color-1, color−1,color-2,[$weight])：把两种颜色混合在一起。
  • 列表函数
    • length($list)：返回一个列表的长度值;
    • nth($list, $n)：返回一个列表中指定的某个标签值;
    • join($list1, l i s t 2 , [ list2, [ list2,[separator])：将两个列给连接在一起，变成一个列表；
    • append($list1, v a l , [ val, [ val,[separator])：将某个值放在列表的最后；
    • zip($lists…)：将几个列表结合成一个多维的列表；
    • index($list, $value)：返回一个值在列表中的位置值。
@function square($num){
  @return $num * $num + px;
}
div{
  width: square(2);
  height: 200px;
  background: mix(red, blue);
}

8.SASS中的层级结构

和LESS一样支持嵌套, 默认情况下嵌套的结构会转换成后代选择器
和LESS一样也支持通过&符号不转换成后代选择器

.father{
  width: 300px;
  height: 300px;
  background: red;
  &:hover{
    width: 100px;
    height: 100px;
    background: yellow;
  }
  .son{
    width: 200px;
    height: 200px;
    background: blue;
  }
}

9.SASS中的继承

SASS中的继承和LESS中的继承一样, 都是通过并集选择器来实现的, 只不过格式不一样而已

混合和继承区别

混合是直接拷贝, 有多少个地方用到就会拷贝多少份
继承是通过并集选择器, 不会拷贝只会保留一份

混合

// scss
@mixin center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.father {
    width: 300px;
    height: 300px;
    background: red;

    @include center;
    .son {
        width: 200px;
        height: 200px;
        background: blue;
        @include center;
    }
}

编译后====》

.father {
  width: 300px;
  height: 300px;
  background: red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.father .son {
  width: 200px;
  height: 200px;
  background: blue;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

继承

// scss
.center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.father {
    @extend .center;
    width: 300px;
    height: 300px;
    background: red;
    .son {
        @extend .center;
        width: 200px;
        height: 200px;
        background: blue;
    }
}

编译后====>

// css
.center,
.father .son,
.father {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.father {
  width: 300px;
  height: 300px;
  background: red;
}

.father .son {
  width: 200px;
  height: 200px;
  background: blue;
}

10.SASS中的条件判断

和LESS一样SASS中也支持条件判断, 只不过SASS中的条件判断支持得更为彻底
SASS中支持

  • @if(条件语句){}
  • @else if(条件语句){}
    … …
  • @else(条件语句){}

SASS中当条件不为false或者null时就会执行{}中的代码
和LESS一样SASS中的条件语句支持通过> >= < <= ==进行判断

// 三角形
@mixin triangle($dir, $width, $color){
  width: 0;
  height: 0;
  border-width: $width;
  border-style: solid solid solid solid;
  @if($dir == Up){
    border-color: transparent transparent $color transparent;
  }@else if($dir == Down){
    border-color: $color transparent transparent transparent;
  }@else if($dir == Left){
    border-color: transparent $color transparent transparent;
  }@else if($dir == Right){
    border-color: transparent transparent transparent $color;
  }
}
div{
  //width: 0;
  //height: 0;
  //border-width: 10px 10px 10px 10px;
  //border-style: solid solid solid solid;
  //border-color: #000 transparent transparent transparent;
  //@include triangle(50px, blue);
  //@include triangle(Up, 50px, blue);
  @include triangle(Left, 50px, blue);
}

11.SASS中的循环

SASS比LESS牛逼的地方就在于SASS中直接支持循环语句, 而LESS中需要通过混合+条件判断自己实现
SASS中支持两种循环, 分别是for循环和while循环

1.for循环

  • @for $i from 起始整数 through 结束整数{}
  • @for $i from 起始整数 to 结束整数{}

两者的区别 through包头包尾, to包头不包尾

2.while循环

@while(条件语句){}

ul{
  li{
    width: 100%;
    height: 50px;
    border: 1px solid #000;
    font-size: 20px;
    color: #fff;
    background: red;
    /*
    &:nth-child(5){
      background: blue;
    }
    &:nth-child(6){
      background: blue;
    }
    &:nth-child(7){
      background: blue;
    }
    &:nth-child(8){
      background: blue;
    }
     */
    //@for $i from 5 through 8{
    //@for $i from 5 to 8{
    $i:5;
    @while($i <= 8){
      &:nth-child(#{$i}){
        background: deepskyblue;
      }
      $i:$i+1;
    }
  }
}

学习笔记❥(^_-)

苏Sue酥
关注
专栏目录
Sass混合器、继承
sh2001824的博客
07-25 293
Sass混合器、继承
Sass-1-基础
xxzjwyql的博客
07-18 325
一、什么是SASS(Syntactically Awesome Stylesheets Sass) 1.SASS是一套利用Ruby实现的, 最早最成熟的CSS预处理器, 诞生于2007年;它扩展了 CSS 语言，增加了变量、Mixin(混合)、嵌套、函数和运算等特性，使 CSS 更易维护和扩展; 2.如何学习SASS? LESS是一套利用JavaScript实现的CSS预处理器, 诞生于2009年...
简单的了解一下sass的用法
zsf2694942998的博客
07-01 474
简单的了解一下sass的用法1、背景介绍什么是SASS？SASS（Syntactically Awesome Stylesheet）是一个CSS预处理器，有助于减少CSS的重复，节省时间。它是更稳定和强大的CSS扩展语言，描述文档的样式干净和结构。历史它最初由 Hampton Catlin 设计，并于2006年由 Natalie Weizenbaum 开发。后来 Weizenbaum 和 Chri...
SCSS 循环
最新发布
疯狂假前端的博客
09-22 210
循环在 SCSS 中非常有用，可以有效地减少重复代码，提高样式的可维护性。通过使用@for和@each，你可以生成复杂的样式结构，并根据条件动态调整样式。
Scss使用（css预处理器）
qq_45256497的博客
06-19 570
scss的用法
scss如何循环创建样式
qq_22481733的博客
08-09 895
代码】scss如何循环创建样式。
compile-node-sass-0.0.3.zip
11-19
【标签】"sass" 表示这个压缩包主要关注的是Sass预处理器的相关内容，包括其语法特性、优势以及如何在项目中集成和使用。 【压缩包子文件的文件名称列表】中的`README.MD`通常包含了项目的基本信息、使用指南、安装...
vue使用Sass时报错问题的解决方法
10-14
在Vue项目中，Sass是一种常用的预处理器，它允许开发者使用更高级的...希望本文提供的解决方案能对你在使用Vue和Sass时遇到的问题有所帮助，如果需要了解更多相关内容，可以搜索相关的技术文章或继续浏览其他相关教程。
详解如何在微信小程序中愉快地使用sass
10-18
为了实现Sass的打包，我们需要先安装相关的依赖包。通过Yarn或npm安装以下包： ```bash yarn add gulp gulp-sass gulp-rename gulp-replace gulp-tap gulp-clean -D ``` 这些包的作用如下： - `gulp`：Gulp是基于...
vue项目中引入Sass实例方法
10-16
接下来，我们需要安装Sass相关的依赖包。这两个包分别是`sass-loader`，用于解析Sass文件，以及`node-sass`，它是Sass的实现。在项目根目录下运行以下命令： ```bash npm install sass-loader --save-dev npm ...
解决vue cli4升级sass-loader(v8)后报错问题
10-15
- prependData: 在Sass文件内容前添加的全局变量。 - sourceMap: 启用或禁用source maps。 - webpackImporter: 允许sass-loader使用Webpack的导入功能，而不是Sass自己的。 升级到sass-loader v8后，开发者需要注意...
scss的高级用法——循环
xinTianou123的博客
11-18 2488
周末愉快呀！一起来学一点简单但非常有用的css小知识。 最近在一个项目中看到以下css class写法。
scss中@mixin和@include
qq_42293067的博客
12-20 6045
scss中@mixin和@include
sass混入（@mixin 与 @include）
m0_52690436的博客
10-31 352
sass混入（@mixin 与 @include）
通过sass设置变量，在不同情况下修改样式变量
软宝宝的博客
03-29 2322
通过sass设置变量，在不同情况下修改样式 最新开发个项目根据不同角色的整合，而这几个不同角色界面结构差不多，只是一些主题颜色不一样，我这边通过sass变量，判断登录角色修改样式。 第一步：先全局设置公共样式，通过“–”命名方式声明变量 :root{ font-family: 'Adobe Heiti Std R', sans-serif; --mainColor:#5B7CFE; --subColor:#678AFE; --thirdColor:#EBEDFF;
css sass的@mixin 与 @include引用
m0_49031649的博客
10-12 1542
@mixin 指令允许定义一个可以在整个样式表中重复使用的样式 @mixin flex-j($type: space-between, $type2: center) { display: flex; justify-content: $type; align-items: $type2; } @include 指令可以将混入（mixin）引入到文档中。 .goods-list { height: 760px; margin-left: 40px; @incl...
scss基础
WANG944282的博客
09-08 3486
只是觉得记个笔记比较印象深刻，其实去官网看最好了。写的也大部分都是官网上的东西，官网总结的已经很清晰了。只是提炼一下，便于以后查看
Sass的混合-@mixin,@include
热门推荐
BraveWangDev
02-06 1万+
1,无参数,有参数和带默认值参数的@mixin声明sass文件内容://带参数,默认50 @mixin opa($opa:50){ opacity: $opa / 100; filter:alpha(opacity=$opa); }//mixin需要在调用之前声明 .demo{ @include opa(10); }注意: @mixin要在@include调用前声明 如果
Less和Sass
哎
06-11 6082
CSS预处理器css预处理器基本思想就是用一种专门的编程语言，为css增加了一些编程的特性，将css作为目标生成文件，然后开发者就只要使用这种语言进行编码的工作 通俗来讲：“css预处理器用一种专门的编程语言，进行web页面样式的设计，然后再编译成正常的css文件，以供项目使用。css预处理器为css增加一些编程的特性，无需考虑浏览器的兼容性问题”下面介绍了常用的两种css预处理器Sass Sa
Sass 3.3.0 语法规范与导入规则解析
本文主要介绍SASS的语法官方规范，特别是SASS 3.3.0版本的更新内容以及相关的编辑器配置和使用技巧。" 在SASS中，有两种主要的文件类型，分别是`.sass`和`.scss`。`.sass`文件采用更简洁的语法，不使用大括号和分号...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值