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

本文介绍: mixin中插值不能作为赋值语句的值部分，只能用做属性名定义或者选择器构建时@include中不能使用插值。通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起.1、类似 CSS 的注释方式，使用 ”/* ”开头，结属使用 ”*/ ”%声明的代码，如果不被 @extend 调用的话，不会产生任何代码。在除法运算时，如果两个值带有相同的单位值时，除法运算之后会得到一个。比如在不同的地方调用一个相同的混合宏时，不能将两个。2、类似 JS的注释方式，使用“//” 两者区别，

为什么引入css预处理器

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

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

变量插值：#{}

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

可维护性

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

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

@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 &amp; {
      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{
    &amp;: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 ：“.sa ss”，
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;
}