最終仍是決定用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");
}
複製代碼

最後

歡迎關注個人微博@狂刀二