SCSS 语法

一、变量 以 $ 开头

1. 默认变量是可以被覆盖的
2. 特殊变量：
   $fontSize: 14px;
   font: #{$fontSize}
3. 多值变量：
   list（类似 js 数组）和 map（类似 js 对象）两种类型

二、嵌套

1. 选择器嵌套
   在属性选择器中，& 表示父元素选择器
2. 属性嵌套

// scss 文件
div {
  border {
    top: {
      width: 1px;
    }
    left: {
      width: 2px;
    }
  }
}

//解析为 css 文件

div {
  border-top: 1px;
  border-left: 2px;
}

三、混合 @mixin

1. 使用@include 调用@mixin 方法

// scss 普通混合

@mixin font {
  line-height: 10px;
  color: #fff;
}

.footer {
  @include font;
}

// 解析为 css 文件

.footer {
  line-height: 10px;
  color: #fff;
}

// scss 文件

@mixin font($size: 12px) {
  //默认参数 默认12px
  font-size: $size;
}

.footer {
  @include font(16px);
}

四、继承

1. @extend 继承指定选择器的所有样式

五、站位选择器

1. 以 % 开头命名选择器，通过@extend 调用。如果不调用，则文件编译后不会出现该冗余 css 文件

// scss 文件
%dir {
  font-size: 14px;
}
%clear {
  overflow: hidden;
}
div {
  @extend %dir;
}

/*只有 %dir 选择器被调用了，%clear 在编译的时候会被当做冗余文件给过滤掉，不会出现在编译后的.css文件中*/

六、函数

1. sass 内置了很多函数，自己也可以定义函数。以 @function 开始 @return 返回值

//scss 文件
@function per($data) {
  @return $data/10 + px;
}

div {
  font-size: per(140);
}

//解析为 css文件
div {
  font-size: 14px;
}

2. 注意点：

• 运算：
  • 对于（数字，颜色，变量）的四则（加减乘除）运算,运算符前后各保留一格空格
• if 判断：
  • @if 可以单独使用，也可以配合@else、@else if 一起使用
• 三目运算符：
  • if(true,1px,2px)，返回的值是 1px
  • if(false,1px,2px),返回的值是 2px
• for 循环，共有两种写法：
  • @for $var from through ：包括 end 这个数
  • @for $var from to ：不包括 end 这个数
• each 循环，@each $var in
  • list 和 map 分别表示为 list 和 map 类型数据