【面试】css预处理器之sass（scss）

为什么引入css预处理器

可读性

嵌套：关系明朗

选择器

属性

伪类‘’

变量：语义明确

默认变量：美元符号 $ 变量名:值 !default

全局变量：:global { $global-x: }

变量插值：#{}

map键值对：$变量名:( key:值,...)

可维护性

混入指令/混合指令/宏指令@mixin：函数传参提高样式的复用率

不带参数混合宏

带参数混合宏

带特别多参数混合宏

调用混合宏@include

继承@extend：提高复用率

占位符 %placeholder：不产生代码的可继承样式

混合宏、继承、占位符

什么情况不适用

sass=scss

后缀扩展名

语法书写方式

sass和less

编译

Sass在服务端处理的

Less在客户端使用Less.js

语法

插值#{}

注释

加减法

乘法

除法

@if， @else if ，@else条件

@for

@while循环

@each循环

@import引入 SCSS 和 Sass

为什么引入css预处理器

提高CSS代码的可读性和可维护性

可读性

嵌套：关系明朗

选择器

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

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

属性

#css
.box {border-top: 1px solid red;border-bottom: 1px solid green;
}

#scss
.box {border: {top: 1px solid red;bottom: 1px solid green;}
}

伪类‘’

.clearfix{&:after {clear:both;overflow: hidden;}
}

变量：语义明确

默认变量：美元符号 `$` 变量名:值 !default

$link-color: #3498db !default;a {color: $link-color; // 如果未定义 $link-color，则使用默认值 #3498db
}

全局变量：:global { $global-x: }

:global {$global-padding: 10px;
}.box {padding: $global-padding;
}

变量插值：#{}

$theme: light;body {background-color: #{$theme}-background; // 将变量插入到字符串中
}

map键值对：$变量名:( key:值,...)

$colors: (primary: #3498db,secondary: #2ecc71,accent: #e74c3c
);.box {background-color: map-get($colors, primary);
}

可维护性

混入指令/混合指令/宏指令@mixin：函数传参提高样式的复用率

相当于预先写好了一组样式，其它地方传参/直接引用

Vue中叫它混入指令，可以设置参数，复用重复代码块。

但会生成冗余的代码块。比如在不同的地方调用一个相同的混合宏时，不能将两个合成并集形式。

不带参数混合宏

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

带参数混合宏

# 带值参数
@mixin border-radius($radius){border-radius: $radius;
}
# 带默认值参数
@mixin border-radius($radius:5px){border-radius: $radius;
}

带特别多参数混合宏

当混合宏传的参数过多之时，可以使用“…”来替代

# 带多个参数
@mixin center($width,$height){width: $width;height: $height;margin-top: -($height) / 2;margin-left: -($width) / 2;
}
# 带特别多参数
@mixin box-shadow($shadows...){@if length($shadows) >= 1 {-webkit-box-shadow: $shadows;box-shadow: $shadows;} @else {$shadows: 0 0 2px rgba(#000,.25);-webkit-box-shadow: $shadow;box-shadow: $shadow;}
}

调用混合宏`@include`

关键词“@include”来调用声明好的混合宏

button {@include border-radius;
}
.box {@include border-radius(3px);
}
.box-center {@include center(500px,300px);
}
.box {@include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));
}

继承@extend：提高复用率

子类里继承了父类及其子类

.one{color: #000;
}
.one a{font-size: 10px;
}
.two{@extend .one;background-color: #fff;
}

编译出来的 CSS 会将选择器合并在一起，形成组合选择器.

.one, .two {color: #000;
}.one a, .two a {font-size: 10px;
}.two {background-color: #fff;
}

占位符 %placeholder：不产生代码的可继承样式

%声明的代码，如果不被 @extend 调用的话，不会产生任何代码

%mt5 {margin-top: 5px;
}
.btn {@extend %mt5;
}
.block {@extend %mt5;
}

通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起.

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

混合宏、继承、占位符

什么情况不适用

越直观越好，运算类型（特别是map）类型的，尽量不要在实际项目中使用，后续维护成本很高的。

sass=scss

平时都称之为 Sass，

后缀扩展名

Sass ：“.sass”，
SCSS ：“.scss”

语法书写方式

Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，
SCSS 的语法书写和我们的 CSS 语法书写方式非常类似

sass和less

编译

Sass在服务端处理的

Less在客户端使用Less.js

语法

插值#{}

（1）构建一个选择器

@mixin generate-sizes($class, $small, $medium, $big) {.#{$class}-small { font-size: $small; }.#{$class}-medium { font-size: $medium; }.#{$class}-big { font-size: $big; }
}
@include generate-sizes("header-text", 12px, 20px, 40px);

(2) 属性变量

$properties: (margin, padding);
@mixin set-value($side, $value) {@each $prop in $properties {#{$prop}-#{$side}: $value;}
}
.login-box {@include set-value(top, 14px);
}

@mixin中插值不能作为赋值语句的值部分，只能用做属性名定义或者选择器构建时@include中不能使用插值

注释

1、类似 CSS 的注释方式，使用 ”/* ”开头，结属使用 ”*/ ”

2、类似 JS的注释方式，使用“//” 两者区别，

前者会在编译出来的 CSS 显示，后者在编译出来的 CSS 中不会显示

加减乘除连带单位一起计算

加减法

在变量或属性中都可以做加法运算，但对于携带不同类型的单位时，在 Sass 中计算会报错

.content {width: $full-width - $sidebar-width;
}

字符串拼接

div {cursor: e + -resize;
}
编译后
div {cursor: e-resize;}

乘法

当一个单位同时声明两个值时会有问题 只能有一个值带单位（比如 em ,px , %）

# 编译的时候报“20px*px isn't a valid CSS value.”错误信息。
.box {width:10px * 2px;  
}

# 正确的写法
.box {width: 10px * 2;
}

除法

如果数值或它的任意部分是存储在一个变量中或是函数的返回值。
• 如果数值被圆括号包围。
• 如果数值是另一个数学表达式的一部分

在除法运算时，如果两个值带有相同的单位值时，除法运算之后会得到一个不带单位的数值

.box {width: (1000px / 100px);
}
编译后
.box {width: 10;
}

@if， `@else if` ，`@else`条件

@mixin blockOrHidden($boolean:true) {@if $boolean {display: block;}@else {display: none;}
}
.block {@include blockOrHidden;
}
.hidden{@include blockOrHidden(false);
}

@for

@for $i from <start> through <end>
@for $i from <start> to <end>

关键字 through 表示包括 end ，而 to 则不包括 end

@for $i from 1 through 3 {.item-#{$i} { width: 2em * $i; }
}

@while循环

@while $types > 0 {.while-#{$types} {width: $type-width + $types;}$types: $types - 1;
}

@each循环

@each 循环就是去遍历一个列表，然后从列表中取出对应的值

@each $var in <list>
$list: adam john wynn mason kuroir;
@mixin author-images {@each $author in $list {.photo-#{$author} {background: url("/images/avatars/#{$author}.png") no-repeat;}}
}
.author-bio {@include author-images;
}