最终仍是决定用SCSS，记录下SCSS的语法

注释

有两种注释，除了CSS的注释，还有单行注释

// 单行注释

/*
多行注释，CSS的注释
*/
复制代码

变量

变量须要先声明后使用

$font-size: 16px;
p {
  font-size: $font-size;
}
复制代码

做用域：全局变量 & 局部变量

$font-size: 16px; // 全局变量
p {
  $font-size: 20px; // 局部变量
  font-size: $font-size;
}
复制代码

默认变量：若是以前没有声明变量，则使用默认变量，不然使用已声明的变量

$font-size: 16px !default;
p {
  font-size: $font-size;
}
复制代码

插值

#{} 能够用在选择器和属性名中

$name: size;
.btn-#{name} {
  font-#{$name}: 18px;
}
复制代码

嵌套

选择器嵌套

body {
  p {
    font-size: 16px;
  }
}
复制代码

属性嵌套

body {
  p {
    margin: {
      top: 10px;
      bottom: 20px;
    }
  }
}
复制代码

父选择器 &

a {
  &:link {
    color: blue;
  }
  &:visited {
    color: gray;
  }
  &:hover {
    color: red;
  }
  &:active {
    color: green;
  }
}
复制代码

@extend

继承其余选择器的样式

.font-size {
  font-size: 16px;
}

body {
  @extend .font-size;
}
复制代码

占位符选择器%

%font-size {
  font-size: 16px;
}

body {
  @extend %font-size;
}
复制代码

编译结果

body {
  font-size: 16px;
}
复制代码

@mixin 和 @include

mixin 相似于函数

无参

@mixin font-size {
  font-size: 18px;
}

body {
  @include font-size;
}
复制代码

有参

@mixin font-size($size) {
  font-size: $size;
}

body {
  @include font-size(18px);
}
复制代码

带默认值：带默认值的参数必须放后面

@mixin font-size($color, $size: 18px) {
  font-size: $size;
  color: $color;
}

body {
  @include font-size(red);
}
复制代码

@import

如下状况按照 CSS 的 @import 规则

• 被导入的文件名后缀是 .css
• 被导入的文件是一个URL地址
• 被导入的文件是url()值

其余状况按照 SCSS 的 @import 规则，SCSS 引用规则以下

• .scss 后缀能够省略
• 以 _ 开头的文件不会被编译
• 导入以 _ 开头的文件时 _ 能够省略，因此 _某文件名.scss 和 某文件名.scss 不能共存

@import 能够用在 CSS 规则内

// a.scss
.a {
  font-size: 16px;
}
复制代码

// b.scss
.b {
  @import "a";
}
复制代码

至关于

.b {
  .a {
    font-size: 16px;
  }
}
复制代码

@media

@media 能够写在 CSS 规则中，会被编译到最外层

.layer1 {
  width: 300px;
  .layer2 {
    width: 400px;
    @media screen and (max-width: 1920px) {
      width: 500px;
    }
  }
}
复制代码

编译结果

.layer1 {
  width: 300px;
}
.layer1 .layer2 {
  width: 400px;
}
@media screen and (max-width: 1920px) {
  .layer1 .layer2 {
    width: 500px;
  }
}
复制代码

@at-root

@at-root 跳出选择器

.layer1 {
  width: 300px;
  .layer2 {
    width: 400px;
    @at-root .layer3 {
      width: 500px;
    }
  }
}
复制代码

编译结果

.layer1 {
  width: 300px;
}
.layer1 .layer2 {
  width: 400px;
}
.layer3 {
  width: 500px;
}
复制代码

自定义函数

@function font-size($n) {
  @return $n * 16px;
}

p {
  font-size: font-size(2);
}
复制代码

编译结果

p {
  font-size: 32px;
}
复制代码

数据类型

• 数字：1，2，10px
• 字符串
  • 有引号字符串："Lucida Grande"，'http://sass-lang.com'
  • 无引号字符串：sans-serif，bold
• 颜色：blue，#04a3f9，rgba(255,0,0,0.5)
• 布尔：true，false
• 空值：null
• List：1.5em 1em 0 2em，Helvetica, Arial, sans-serif
• Map：(key1: value1, key2: value2)

控制语句

@if

当 @if 的表达式不是 false 或者 null 时，条件成立

$type: monster;
p {
  @if 1 + 1 == 2 {
    border: 1px solid;
  }
  @if 5 < 3 {
    border: 2px dotted;
  }
  @if null{
    border: 3px double;
  }
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
复制代码

编译结果

p {
  border: 1px solid;
  color: green;
}
复制代码

@for

@for 有两种格式

@for $var from <start> through <end>
@for $var from <start> to <end>
复制代码

区别是，当使用 through 时，条件范围包含 <start> 与 <end> 的值，而使用 to 时条件范围只包含 <start> 的值不包含 <end> 的值。

<start> 和 <end> 必须是整数值。

@for $i from 1 through 3 {
  .item-#{$i} {
    width: 10px * $i;
  }
}
复制代码

编译后

.item-1 {
  width: 10px;
}

.item-2 {
  width: 20px;
}

.item-3 {
  width: 30px;
}
复制代码

@while

$i: 3;
@while $i > 0 {
  .item-#{$i} {
    width: 10px * $i;
  }
  $i: $i - 1;
}
复制代码

编译结果

.item-3 {
  width: 30px;
}

.item-2 {
  width: 20px;
}

.item-1 {
  width: 10px;
}
复制代码

@each

@each 用于遍历 List，格式为 $var in <list>

$names: html, css, js;
@each $item in $names {
  .bg {
    background-image: url('/images/#{$item}.png');
  }
}
复制代码

编译结果

.bg {
  background-image: url("/images/html.png");
}

.bg {
  background-image: url("/images/css.png");
}

.bg {
  background-image: url("/images/js.png");
}
复制代码

最后

欢迎关注个人微博@狂刀二