Sass 是一個 CSS 預處理器，完全相容所有版本的 CSS。實際上，Sass 并沒有真正為 CSS 語言添加任何新功能。隻是在許多情況下可以可以幫助我們減少 CSS 重複的代碼，節省開發時間。

一、注釋

方式一：雙斜線 //

方式二：css方式

PS：當 Sass 編譯成CSS時，第一種注釋不會編譯到CSS中（隻在Sass檔案中可見），第二種注釋會編譯到CSS中

二、嵌套

1、使編碼更簡潔清晰：

在CSS中，如果想為其父元素的繼承元素定義樣式，就必須每次都選擇父元素：

html, body {
    height: 100%;
}

html #root, body #root {
    height: 100%;
}

html .div-with-button, body .div-with-button {
    background-color: black;
}

html .div-with-button button, body .div-with-button button {
    background-color: #e4c681;
}

html .div-with-button button:hover, body .div-with-button button:hover {
    background-color: #ffe082;
}

Sass相對而言就更簡潔：

html, body {
  height: 100%;

  #root {
    height: 100%;
  }

  .div-with-button {
    background-color: black;

    button {
      background-color: #e4c681;

      &:hover {
        background-color: #ffe082;
      }
    }
  }
}

2、在嵌套中使用 `&`

& 總是指向它上面的元素，可以用于僞類和僞元素

sass

css

.box {

&:focus{}

&:hover{}

&:active{}

&:first-child{}

&:nth-child(2){}

&::after{}

&::before{}

}

.box:focus{}

.box:hover{}

.box:active{}

.box:frist-child{}

.box:nth-child(2){}

.box::after{}

.box::before{}

css：

button {
  background-color: #535353;
  color: #000;
}
button:hover {
  background-color: #000;
  color: #fff;
}

sass：

button {
  background-color: #535353;
  color: #000;
  &:hover {
    background-color: #000;
    color: #fff;
  }
}

3、多個類名以相同的詞開頭的嵌套

如果多個類名以相同的詞開頭（比如

box-yellow

和

box-red

），就可以嵌套它們：

.box {
  &-yellow {
    background: #ff6347;
  }
  &-red {
    background: #ffd700;
  }
  &-green {
    background: #9acd32;
  }
}

CSS：

.box-yellow {
  background: #ff6347;
}
.box-red {
  background: #ffd700;
}
.box-green {
  background: #9acd32;
}

4、用冒号嵌套屬性

當樣式包含多個屬性時，就可以将該樣式寫成類似對象的樣子，降屬性都包裹在{}裡，不用單獨寫每個樣式

sass：

add-icon {
  background : {
    image: url("./assets/arrow-right-solid.svg");
    position: center center;
    repeat: no-repeat;
    size: 14px 14px;
  }
}

css：

.add-icon {
  background-image: url("./assets/arrow-right-solid.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 14px 14px;
}

PS：在編寫Sass時，嵌套不要太深，盡量不要超過三層，超過之後就會導緻代碼難以維護，并且在編譯為CSS時就會出現不必要的選擇器，就會導緻CSS檔案變大

三、變量

在Sass中，我們可以将任何有效的CSS值儲存在變量中。變量使用

符号定義。

定義變量：

$red: #ee4444;
$black: #222;
$bg-color: #3e5e9e;
$link-color: red;
$p-color: #282A36;

$font-p: 13px;
$font-h1: 28px;

$base-font: 'Noto Sans KR', sans-serif;

使用變量：

body {
    background-color : $bg-color;
    font-size : $font-p;
    font-family : $base-font;
}

h1 {
    font-size: $font-h1;
    color: $black;
}

p {
    font-size: $font-p;
    color: $black;
}

a {
    color: $link-color;
}

當Sass編譯成CSS時，所有的變量都會被替換為定義的變量值。變量可以減少重複、進行複雜的數學運算等。

CSS變量是有範圍的，位于頂層的變量都是全局變量，在塊中定義的變量都是局部變量。全局變量可以在任何地方使用，局部變量隻能在變量定義的塊中使用。

$my-global-variable: "global";

div {
  $my-local-variables: "local";
}

變量值是可以覆寫的

要想改變全局變量，就需要添加

!global

修飾符

Sass變量可以指定預設值，帶有

!default

的變量隻有在沒有值的情況下才會生效：

$message-color: blue !default;

.message {
    color: $message-color;
}

可以在 @import 之前覆寫子產品預設值

sass：
$message-color: black;
@import 'my-module';

.message {
    color: $message-color;
}



css：
p.message {
  color: black;
}

四、Mixins 和 Include

mixin

是一組可以重用的 CSS 聲明，文法類似于JavaScript中的函數，使用

@mixin

指令來代替

function

關鍵字。調用

mixin

是通過

@include

語句完成的。

mixins

使元素水準垂直居中的方法：

@mixin absolute-center() {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

.element {
  @include absolute-center();
}

mixin支援傳遞參數：

@mixin square($size) {
  width:$size;
  height:$size;
}
div {
  @include square(60px);
  background-color:#000;
}

參數可以是可選的，可選參數的定義和Sass變量的定義形式是一樣的：

@mixin square($width: 50px) {
  width:$size;
  height:$size;
}

将 CSS 規則傳遞給 mixins，這些規則可以在使用 @content 的 mixin 中使用：

@mixin hover-not-disabled {
  &:not([disabled]):hover {
    @content;
  }
}
.button {
  border: 1px solid black;
  @include hover-not-disabled {
    border-color: blue;
  }
}


/*這樣mixin中的@content在編譯後就會變成border-color: blue;
這樣寫有助于減少&:not([disabled]):hover部分的重複。*/

五、@import 和 @use

使用 @import 将檔案分塊并導入到一個父檔案中：

@import 'normalize';

在使用

@import

時，所有變量、mixin 等都可以全局通路，因為一切都是全局的，是以庫必須為其所有成員添加字首以避免命名沖突。是以不建議使用 @import。

可以使用 @use 來代替，它的基本用法與@import 相同：

@use 'normalize';

使用

@use

導入的檔案稱為子產品。要使用這些子產品的 mixin 或變量，必須使用命名空間來調用它們。預設情況下，命名空間是檔案名（不帶擴充名）。

當

被添加到 SCSS 檔案的檔案名前時，解析器知道它是一個部分檔案并且它僅用于導入。導入時，

部分是可選的。注意，這裡使用

src/colors

來導入

src/_colors.scss

。

@use 'src/colors';

可以使用 as 來使用自定義命名空間：

@use 'src/colors' as c;

六、算術運算符

在CSS中可以使用calc()進行數學計算，Sass 支援直接使用+、-、/、*、% 操作符對值和變量進行計算：

$content-width: 600px;
content {
  width:$content-width;
}
.inner-content {
  width: $content-width - 60px; 
}
.outer-content {
  width: $content-width + 60px;
}

七、流程控制

在 Sass 中有四種類型的流程控制規則：

@if

@else

、

@each

、

@for

和

@while

。

@if 和 @else 類似于 JavaScript 中的 if 和 else：

@mixin theme($is-dark: false) {
  @if $is-dark {

  }
  @else {
    
  }
}

@each

類似于 JavaScript 中的

for of

：

$sizes: 40px, 50px, 80px;
@each $size in $sizes {
  .icon-#{$size} {    
  /*#{$size} 表示法用于使用變量制作動态屬性名稱和選擇器，這稱為插值。*/
    font-size: $size;
    height: $size;
    width: $size;
  }
}

@for

類似于 JavaScript 中的

for

循環：

@for $i from 1 through 4 {
  .bubble-#{$i} {
    transition-delay: .3 * $i;
  }
}

@while（不常用）類似于 JavaScript 中的 while 循環。

八、繼承、擴充

有時需要編寫一個僅用于擴充的樣式規則。在這種情況下，可以使用占位符選擇器，它看起來像以

而不是

開頭的類選擇器。

%flex {
  display: flex;
}

.some-class {
  height: 50%;
  background-color: black;
}

%flex_with_color {
  @extend %flex;
  @extend .some-class;
}

%button_styles {
  height: 50px;
  width: 200px;
}

div {
  @extend %flex_with_color;

  button {
    @extend %button_styles;
    color: #424242;
    background-color: #d966fb;
  }
}

編譯成css：

div {
  display: flex;
}

.some-class, div {
  height: 50%;
  background-color: black;
}

div button {
  height: 50px;
  width: 200px;
}

div button {
  color: #424242;
  background-color: #d966fb;
}

九、媒體查詢

body {
    article {
        p {
            font-size: 100%;
            color: black;
            padding: 10px;

            @media (max-width: 768px) {
                font-size: 150%;
            }
        }
    }
}


css：

body article p {
  font-size: 100%;
  color: black;
  padding: 10px;
}

@media (max-width: 768px) {
  body article p {
    font-size: 150%;
  }
}

媒體查詢是支援嵌套的，并将所有适用的查詢與 and 運算符結合起來：

p {
    @media (max-width: 768px) {
        font-size: 150%; 
        @media (orientation: landscape) {
            line-height: 75%; 
        }
    }
}



css： 

@media (max-width: 768px) {
  p {
    font-size: 150%;
  }
}

@media (max-width: 768px) and (orientation: landscape) {
  p {
    line-height: 75%;
  }
}

Sass的使用要點一、注釋二、嵌套三、變量四、Mixins 和 Include五、@import 和 @use六、算術運算符七、流程控制八、繼承、擴充九、媒體查詢

一、注釋

二、嵌套

1、使編碼更簡潔清晰：

2、在嵌套中使用 `&`

3、多個類名以相同的詞開頭的嵌套

4、用冒号嵌套屬性

三、變量

四、Mixins 和 Include

五、@import 和 @use

六、算術運算符

七、流程控制

八、繼承、擴充

九、媒體查詢

繼續閱讀

趕工心得（一）

兩種清除浮動的方法

沒救了! 困擾程式員一輩子的5個魔咒, 改掉比登天還難！

如何成為一名.net 工程師?

[轉]如何成長為一名全棧工程師全棧工程師

tabpanel 使用問題

underscore模闆功能的使用和學習

CSS之折疊菜單

web開發之前後端渲染

DOM下元素 offset client scroll 相關屬性簡介

IE8 CSS設定DIV居中，添加“margin:0 auto”

JavaScript的那些坑之事件代理事件代理事件階段

ACS基本配置-權限等級管理

vue （vue2.0）使用總結(從大體結構總結)

父子元件間傳值的實作父子元件間傳值的實作

vue搭建過程及出現問題

Sass的使用要點一、注釋二、嵌套三、變量四、Mixins 和 Include五、@import 和 @use六、算術運算符七、流程控制八、繼承、擴充九、媒體查詢

一、注釋

二、嵌套

1、使編碼更簡潔清晰：

2、在嵌套中使用 &

3、多個類名以相同的詞開頭的嵌套

4、用冒号嵌套屬性

三、變量

四、Mixins 和 Include

五、@import 和 @use

六、算術運算符

七、流程控制

八、繼承、擴充

九、媒體查詢

繼續閱讀

2、在嵌套中使用 `&`