CSS预处理器 : scss 使用教程

作者/来源：yixinu.com

栏目：运维/编程

日期：2020-08-16 01:44:08

10.sass变量声明

$+变量名+：+变量值；

$width:200px;

11.普通变量和默认变量

普通变量声明后可以在全局范围内使用；
默认变量仅需在值后面加上!default 即可；
默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式是在默认变量之前重新声明下变量即可。默认变量的价值在进行组件化开发的时候会非常有用。

$baseLineHeight: 2; $baseLineHeight: 1.5 !default; body { line-height: $baseLineHeight; }

编译后的CSS代码：

body { line-height:2; }

12.局部变量和全局变量

局部变量：在元素里面声明的变量；
全局变量：在元素外面定义的变量；
全局变量的影子：和全局变量名字相同的局部变量叫做全局变量的影子。

$color:green;//全局变量 $width:200px;//全局变量 $height:200px;//全局变量
body { background-color:$color;//调用全局变量 } div { $color:yellow;//定义局部变量，全局变量$color的影子 .div { background-color:$color;//调用局部变量
    width:$width;//调用全局变量
    height:$height;//调用全局变量 } }

13.sass嵌套

13.1 选择器嵌套

<header> <nav> <a href="#">homea> <a href="#">pagea> nav> header>

css:

 nav a { color:red; } header nav a { color:green; }

scss:

nav {
  a {
    color: red;
    
    header & {
      color:green;
    }
  }  
}

13.2 属性嵌套(有相同的属性前缀)

css:

.box { font-size: 12px; font-weight: bold; }

scss:

.box { font: { size: 12px; weight: bold; } }

13.3 伪类嵌套

scss:

.clearfix{ &:before, &:after { content:""; display: table; } &:after { clear:both; overflow: hidden; } }

css:

clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; overflow: hidden; }

14. sass混合宏

14.1 声明混合宏

@mixin border-radius { -webkit-border-radius: 5px; border-radius: 5px; }

@mixin :声明混合宏的关键词；
border-radius:混合宏的名称；
大括号内：复用的样式代码；

14.2 调用混合宏

@mixin border-radius{ -webkit-border-radius: 3px; border-radius: 3px; }//声明混合宏border-radius button { @include border-radius; }//调用混合宏border-radius

编译为CSS：

button { -webkit-border-radius: 3px; border-radius: 3px; }

14.3 混合宏的参数

不带任何值的参数

@mixin border-radius($radius){ -webkit-border-radius: $radius; border-radius: $radius; }//声明一个带有参数$radius的混合宏 .box { @include border-radius(3px);//调用混合宏并给混合宏传参数“3px” }

传一个带值参数（传入一个默认值）

@mixin border-radius($radius:3px){ -webkit-border-radius: $radius; border-radius: $radius; }//声明一个传入了默认参数值的混合宏 .btn { @include border-radius;//使用默认参数值的混合宏 } .box { @include border-radius(50%);//可以自己传入参数值 }

编译出来的CSS：

.btn { -webkit-border-radius: 3px; border-radius: 3px; } .box { -webkit-border-radius: 50%; border-radius: 50%; }

传多个参数值

@mixin size($width,$height){ width: $width; height: $height; } .box-center { @include size(500px,300px); }

编译出来的css：

.box-center { width: 500px; height: 300px; }

15.sass 继承

scss：

.btn { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px; } .btn-primary { background-color: #f36; color: #fff; @extend .btn; }

编译出来后：

.btn, .btn-primary { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px; } .btn-primary { background-color: #f36; color: #fff; }

在sass中的继承，可以继承类样式块中所有样式代码，而且编译出来的css会将选择器合并在一起，形成组合选择器。

16.sass占位符%

用占位符声明的代码，如果不被@extend调用就不会被编译。

%mt5 { margin-top: 5px; } %pt5{ padding-top: 5px; } .btn { color:red; }

编译后：

.btn { color:red; }//%占位符声明的代码没有被编译产生css代码

使用@extend调用：

%mt5 { margin-top: 5px; } %pt5{ padding-top: 5px; } .btn { @extend %mt5;//使用@extend调用占位符代码 @extend %pt5; } .block { @extend %mt5; span { @extend %pt5; } }

编译后的css代码：

.btn, .block { margin-top: 5px; } .btn, .block span { padding-top: 5px; }

通过@extend调用的占位符，编译出来的代码会将相同的代码合并在一起，代码变得十分简洁。

17.sass插值

$properties: (margin, padding); @mixin set-value($side, $value) { @each $prop in $properties {//对每个在$properties中的$prop,即$properties中的margin、padding #{$prop}-#{$side}: $value;//$prop连接参数$side，值为参数$value } } .login-box { @include set-value(top, 14px);//调用混合宏 }

编译出来的css：

.login-box { margin-top: 14px; padding-top: 14px; }

不可以：

$margin-big: 40px;
$margin-medium: 20px;
$margin-small: 12px;
@mixin set-value($size) {
    margin-top: $margin-#{$size};
}
.login-box {
    @include set-value(big);
}

也不可以：

@mixin updated-status { margin-top: 20px; background: #F00; } $flag: "status"; .navigation { @include updated-#{$flag}; }

可以在使用@extend时使用插值：

%updated-status { margin-top: 20px; background: #F00; } .selected-status { font-weight: bold; } $flag: "status"; .navigation { @extend %updated-#{$flag}; @extend .selected-#{$flag}; }

18. sass 注释

/*注释内容*/ :会在编译出来的css文件中显示
//注释内容 ：不会在编译出来的css文件中显示

//定义一个占位符 %mt5 { margin-top: 5px; } /*调用一个占位符*/ .box { @extend %mt5; }

编译出来的css：

.box { margin-top: 5px; } /*调用一个占位符*/

19. sass运算

19.1 sass 加法/减法

变量或属性中都可以做加法/减法运算

.box { width: 20px + 8in; height:20px - 5px; }

编译出来的css：

.box { width: 788px; height:25px; }

不用类型的单位做加法/减法会报错：

.box { width: 20px + 1em;//不同类型单位不能做加法 }

19.2 sass 乘法

这样子会有问题：

.box { width:10px * 2px; }

应该这样子：

.box { width: 10px * 2; }

编译出来的css：

.box { width: 20px; }

同加法减法一样，不同类型单位做乘法也会报错。

19.3 sass除法

如果除式中没有变量或者不是在一个数学表达式中（有加法减法等），就要将除式运算用小括号括起来，否则“/”不会被当做除号运算。

p { font: 10px/8px; // 纯 CSS，不是除法运算 $width: 1000px; width: $width/2; // 使用了变量，是除法运算 width: round(1.5)/2; // 使用了函数，是除法运算 height: (500px/2); // 使用了圆括号，是除法运算 margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算 }

编译出来的css：

p { font: 10px/8px;//这种是无意义的css width: 500px; height: 250px; margin-left: 9px; }

除法中相同单位相除不会报错，会产生一个无单位的值：

.box { width: (1000px / 100px); }

编译出来的css：

.box { width: 10; }

19.4 sass 变量计算

$content-width: 720px;
$sidebar-width: 220px;
$gutter: 20px;
.container {
  width: $content-width + $sidebar-width + $gutter;
}

编译出来的css：

.container { width: 960px; }

19.5 sass数字运算

.box { width: ((220px + 720px) - 11 * 20 ) / 12 ; }

编译出来的css：

.box { width: 60px; }

19.6 sass颜色运算

所有算术运算都支持颜色值，并且是分段计算的。

p { color: #010203 + #040506; }

计算公式为 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09，并且被合成为：

p { color: #050709; }

数字和颜色一起运算：

p { color: #010203 * 2; }

计算公式为 01 * 2 = 02、02 * 2 = 04 和 03 * 2 = 06，并且被合成为：

p { color: #020406; }

19.7 sass 字符运算

用“+”对字符串进行连接：

$content: "Hello" + "" + "Sass!"; .box:before { content: " #{$content} "; }

编译出来的css：

.box:before { content: " Hello Sass! "; }

可以使用“+”直接连接字符：

div { cursor: e + -resize; }

编译出来的css：

div { cursor: e-resize; }

有引号的字符串和没有引号的字符串相加，看哪个在“+”号的左边，如果有引号的在左边，结果为有引号的；如果没有引号的在左边，结果为没有引号的：

p:before { content: "Foo " + Bar; font-family: sans- + "serif"; }

编译出来的css：

p:before { content: "Foo Bar"; font-family: sans-serif; }

转载：
https://www.jianshu.com/p/fa379a309c8a