前言

Sass在CSS的基礎(chǔ)上增加了變量、嵌套、混合、導(dǎo)入等高級功能, 使開發(fā)起來更優(yōu)雅.

一. 準(zhǔn)備工作

安裝

brew install node-sass

使用

sass mysCSS.scss:output.css -w #監(jiān)聽

二. 一些規(guī)則

1. 嵌套

能避免了重復(fù)輸入父選擇器, 同時(shí)使復(fù)雜的 CSS 結(jié)構(gòu)更易于管理.

.main {
  color: red;
  font-weight: bold;

  .title {
    font-size: 22px;
  }
}

轉(zhuǎn)為:

.main {
  color: red;
  font-weight: bold;
}
.main .title {
  font-size: 22px;
}

2. &指代父選擇器, 且必須作為選擇器的第一個(gè)字符.

如下面示例中的&指代.main

.main {
  color: red;
  font-weight: bold;

  &-title {
    font-size: 22px;
  }
}

轉(zhuǎn)為:

.main {
  color: red;
  font-weight: bold;
}
.main-title {
  font-size: 22px;
}

3. 屬性嵌套

有些 CSS 屬性遵循相同的命名空間, 如 background-*, border-*, font-*, flex-*, justify-*, margin-* 和 padding-*等. 為了方便管理和避免重復(fù)輸入, Sass允許將屬性嵌套在命名空間中.

.main {
  margin: {
    top: 5px;
    right: 6px;
    bottom: 7px;
    left: 8px;
  };
}

轉(zhuǎn)為:

.main {
  margin-top: 5px;
  margin-right: 6px;
  margin-bottom: 7px;
  margin-left: 8px;
}

同時(shí)命名空間也可以包含自己的屬性值:

.main {
  font: 20px/ 24px {
    size: 16rpx;
    weight: bold;
  }
}

轉(zhuǎn)為:

.main {
  font: 20px/24px;
  font-size: 16rpx;
  font-weight: bold;
}

4. 單行和多行注釋

多行注釋 /* */會顯示在編譯后的CSS文件中, 而 // 的單行注釋則不會.

.main {
  /*
  屬性嵌套的注釋
  */
  margin: {
    left: 4px;
    // margin-top的單行注釋
    top: 5px;
  }
}

轉(zhuǎn)為:

.main {
  /*
  屬性嵌套的注釋
  */
  margin-left: 4px;
  margin-top: 5px;
}

5. 變量

變量以美元符號開頭, 賦值方法與CSS屬性的寫法一樣. 同時(shí), 變量有作用域(局部變量轉(zhuǎn)全局用 !global, 我?guī)缀鯖]用過).

.main {
  $bgColor: grey;
  $sm: 16px;
  $lg: 22px;

  background: $bgColor;

  .title-wrapper {
    font-size: $lg;

    .des {
      font-size: $sm;
    }
  }
}

轉(zhuǎn)為:

.main {
  background: grey;
}
.main .title-wrapper {
  font-size: 22px;
}
.main .title-wrapper .des {
  font-size: 16px;
}

6. 數(shù)組

是通過空格或者逗號分隔的一系列的值. 常用的函數(shù)有兩個(gè):nth 可以直接訪問數(shù)組中的某一項(xiàng)； @each 指令能夠遍歷數(shù)組中的每一項(xiàng).

7. 運(yùn)算符

布爾運(yùn)算符: and or 以及 not;

關(guān)系運(yùn)算符: <, >, <=, >=, ==, !=

8. 插值語句 #{}

通過 #{} 插值語句可以在選擇器或?qū)傩悦惺褂米兞?

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

轉(zhuǎn)為:

p.foo {
  border-color: blue;
}

9. @import

9.1 非嵌套

被導(dǎo)入的文件將合并編譯到同一個(gè)CSS文件中, 另外, 被導(dǎo)入的文件中所包含的變量或者混合指令 (mixin) 都可以在導(dǎo)入的文件中使用.

注意: 在以下情況下，@import 僅作為普通的CSS語句, 不會導(dǎo)入任何 Sass 文件:

• 文件拓展名是 .css；
• 文件名以 http:// 開頭；
• 文件名是 url()；
• @import 包含媒體查詢。

如果不在上述情況內(nèi), 文件的拓展名是 .scss 或 .sass, 則導(dǎo)入成功. 沒有指定拓展名, Sass 將會試著尋找文件名相同, 拓展名為 .scss 或 .sass 的文件并將其導(dǎo)入.

@import "foo.scss"; # 方式一
@import "foo"; # 方式二

都會導(dǎo)入文件foo.scss.

9.2 嵌套的@import

大多數(shù)情況下, 一般在文件的最外層使用 @import. 但也可以將 @import 嵌套進(jìn)CSS樣式或者 @media 中, 只是這樣導(dǎo)入的樣式只能出現(xiàn)在嵌套的層中.

如: example.scss 樣式如下:

.example {
  color: red;
}

導(dǎo)入到 home.scss內(nèi)

.home-page {
    @import './example.scss';
}

轉(zhuǎn)為:

.home-page .example {
  color: red;
}

10. Partials

如果需要導(dǎo)入Scss文件, 但又不希望將其編譯為CSS, 只需要在文件名前添加下劃線, 這樣會告訴Sass不要編譯這些文件, 但導(dǎo)入語句中卻不需要添加下劃線. 一般對于公共的Sass文件會用到.

**注意: ** 不可以同時(shí)存在添加下劃線與未添加下劃線的同名文件, 添加下劃線的文件將會被忽略.

如: 將文件命名為 _colors.scss, 便不會編譯 _colors.css 文件.

@import "colors.scss";

11. @media

11. 1 與在CSS中的用法一樣, 只不過Sass允許在CSS規(guī)則中嵌套.

如果 @media 嵌套在CSS規(guī)則內(nèi), 在編譯時(shí), @media` 將被編譯到文件的最外層, 包含嵌套的父選擇器.

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

轉(zhuǎn)為:

.sidebar {
  width: 300px;
}
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px;
  }
}

11.2 @media的媒體查詢允許互相嵌套使用，編譯時(shí)，Sass 自動添加 and

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}

轉(zhuǎn)為:

@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px;
  }
}

12. @extend

@extend 的作用是將重復(fù)使用的樣式延伸給需要包含這個(gè)樣式的特殊樣式.

考慮一下這種情況, 有一個(gè)success的按鈕只是在普通按鈕button增加了background-color: green; 的屬性.

<button class="button success">已提交成功</button>

.button {
  border: none;
  font-size: 16px;
  background: #f2f2f2;
}

.success {
  background: green;
}

這可能會給html增加無語義的樣式. 我們key考慮通過 @extend 改變一下:

.button {
  border: none;
  font-size: 16px;
  background: #f2f2f2;
}

.success {
  @extend .button;
  background: green;
}

轉(zhuǎn)為:

.button, .success {
  border: none;
  font-size: 16px;
  background: #f2f2f2;
}

.success {
  background: green;
}

13. @if

當(dāng) @if 的表達(dá)式返回值不是 false 或者 null 時(shí), 條件成立, 輸出 {} 內(nèi)的代碼. @if 聲明后面可以跟多個(gè) @else if 聲明，或者一個(gè) @else 聲明.

p {
  @if 1 > 0 { background: red;}
  @if 5 > 3 { border: 2px dotted; }
  @if null  { border: 3px double; }
}

轉(zhuǎn)為:

p {
  background: red;
  border: 2px dotted;
}

14. @for

@for 指令可以在限制的范圍內(nèi)重復(fù)輸出格式, 每次按要求對輸出結(jié)果做出變動. 有兩種格式：@for $var from <start> through <end> 和 @for $var from <start> to <end>, 區(qū)別在于前者包含 <end>, 后者不包括. 另外, $var 可以是任何變量，比如 $i；<start> 和 <end> 必須是整數(shù)值。

@for $i from 1 through 3 {
    .x-line-#{$i} {
        @if $i == 1 {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        } @else {
            display: -webkit-box!important;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            -webkit-line-clamp: $i;
            -webkit-box-orient: vertical!important;
        }
    }
}

轉(zhuǎn)為:

.x-line-1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.x-line-2 {
  display: -webkit-box !important;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical !important;
}

.x-line-3 {
  display: -webkit-box !important;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical !important;
}

15. @each

語法: @each $var in <list>, 其中$var 可以是任何變量名.

@each $direction in left, top, right, bottom {
  .#{$direction}-icon {
    background-image: url('/images/#{$direction}.png');
  }
}

轉(zhuǎn)為:

.left-icon {
  background-image: url("/images/left.png");
}

.top-icon {
  background-image: url("/images/top.png");
}

.right-icon {
  background-image: url("/images/right.png");
}

.bottom-icon {
  background-image: url("/images/bottom.png");
}

15.1 多重賦值

@each指令也可以使用多個(gè)變量. 如 @each $var1, $var2.... 如果是二維列表，子列表的每個(gè)元素都被分配給各自的變量.

@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

轉(zhuǎn)為:

.puma-icon {
  background-image: url("/images/puma.png");
  border: 2px solid black;
  cursor: default;
}

.sea-slug-icon {
  background-image: url("/images/sea-slug.png");
  border: 2px solid blue;
  cursor: pointer;
}

.egret-icon {
  background-image: url("/images/egret.png");
  border: 2px solid white;
  cursor: move;
}

15.2 Map的多重賦值

由于Map被視為鍵值對的列表, 因此多重賦值也適用于它們.

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
    font-size: $size;
  }
}

轉(zhuǎn)為:

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 1.2em;
}

16. 混合指令 @mixin

語法: 在 @mixin 后添加名稱與樣式.

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

17. 引用混合樣式 @include

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

轉(zhuǎn)為:

.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px;
}

也可以在最外層引用混合樣式, 不會直接定義屬性, 也不可以使用父選擇器.

@mixin silly-links {
  a {
    color: blue;
    background-color: red;
  }
}
@include silly-links;

轉(zhuǎn)為:

a {
  color: blue;
  background-color: red;
}

混合樣式中也可以包含其他混合樣式, 如:

@mixin compound {
  @include highlighted-background;
  @include header-text;
}
@mixin highlighted-background { background-color: #fc0; }
@mixin header-text { font-size: 20px; }

18. 參數(shù)

參數(shù)用于給混合指令中的樣式設(shè)定變量, 并且賦值使用. 在定義混合指令的時(shí)候, 按照變量的格式, 通過逗號分隔, 將參數(shù)寫進(jìn)圓括號里. 引用指令時(shí), 按照參數(shù)的順序, 再將所賦的值對應(yīng)寫進(jìn)括號:

**注意: ** 在調(diào)用的時(shí)候, 如果沒有默認(rèn)值, 則所有的參數(shù)是必傳.

**注意: ** 在使用

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p {
  @include sexy-border(blue, 1in);
}

轉(zhuǎn)為:

p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed;
}

如果不想按照參數(shù)順序賦值, 可以通過關(guān)鍵詞參數(shù)賦值:

p {
  @include sexy-border($width: 100px, $color: red);
}

轉(zhuǎn)為:

p {
  border-color: red;
  border-width: 100px;
  border-style: dashed;
}

混合指令可以使用給變量賦值的方法給參數(shù)設(shè)定默認(rèn)值, 當(dāng)這個(gè)指令被引用的時(shí)候, 如果沒有給參數(shù)賦值, 則自動使用默認(rèn)值(**注意: ** 默認(rèn)參數(shù)需要放到最后)：

@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p {
  @include sexy-border(blue);
}
h1 {
  @include sexy-border(blue, 2in);
}

轉(zhuǎn)為:

p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed;
}

h1 {
  border-color: blue;
  border-width: 2in;
  border-style: dashed;
}

參數(shù)變量

當(dāng)不能確定混合指令需要使用多少個(gè)參數(shù), 比如一個(gè)關(guān)于 box-shadow 的混合指令不能確定有多少個(gè) 'shadow' 會被用到.

語法: 在參數(shù)的最后方通過 … 聲明.

@mixin box-shadow($shadows...) {
  box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

轉(zhuǎn)為:

.shadows {
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

參數(shù)變量也可以用在引用混合指令的時(shí)候 (@include), 將一串值列表中的值逐條作為參數(shù)引用:

@mixin box-shadow($shadows...) {
  box-shadow: $shadows;
}

$values: 0px 4px 5px #666, 2px 6px 10px #999;
.shadows {
  @include box-shadow($values);
}

19. @content

向混合樣式中導(dǎo)入內(nèi)容: 在引用混合樣式的時(shí)候, 可以先將一段代碼導(dǎo)入到混合指令中, 然后再輸出混合樣式, 額外導(dǎo)入的部分將出現(xiàn)在 @content 標(biāo)志的地方.

$titleColor: white;
@mixin colors($bgBorderColor: blue) {
  background-color: $bgBorderColor;
  @content;
  border-color: $bgBorderColor;
}

.common {
  @include colors { color: $titleColor; }
}

轉(zhuǎn)為:

.common {
  background-color: blue;
  color: white;
  border-color: blue;
}