Sass 使用總結！

什麼是Sass？

Sass 是一門高於 CSS 的元語言，它能用來清晰地、結構化地描述文件樣式，有着比普通 CSS 更增強大的功能。
Sass 可以提供更簡潔、更優雅的語法，同時提供多種功能來建立可維護和管理的樣式表。

當你指定一個目標元素，併爲該元素設置或更改屬性值時，你能夠建立一組規則。例如，一個按鈕能夠有一個邊框，你經過使用CSS就能夠準確並細緻地控制邊框的類型，厚度和顏色，而後還能夠改變它的背景顏色和按鈕的文本顏色，你只須要短短的三行。

一個CSS示例：

.button {
    border: solid 3px black;  // 按鈕邊框樣式
    background-color: grey;  //按鈕背景顏色
    color: white;   // 按鈕文本顏色
}

Sass正是加入CSS的語法規則。你仍然能夠在Sass中寫普通的CSS語句，它會工做得很好，其實，當你寫Sass代碼時，文件會被編譯成一個標準的CSS文件... ...會有專門的軟件來完成Sass代碼讓瀏覽器識別和轉換成CSS代碼。

 

沒用前：寫個css而已，幹嗎要這麼麻煩的用Sass?

用以後：不再想寫CSS了

Sass的優點

• 能夠根據頁面結構和功能模塊將CSS代碼分別寫到多個較小的文件裏，而後經過編譯再合併成一個CSS文件，這樣不管在開發和修改的時候都能更快更方便地找到須要設置和修改樣式的元素；
• 經過使用變量能方便地統一修改一些公共的值如顏色/字體大小等，減小工做量；
• 能將一些公共樣式代碼組織到一塊兒實現複用，減小代碼量

Sass基本用法

　　1、嵌套

嵌套語法主要是爲了改進CSS中的後代選擇符。這也是Sass和CSS的一個顯著的不一樣點。

　　使用嵌套前：（沒寫嵌套前會爲了層級關係，或者樣式衝突你會這樣寫）

.box ul {
    display: flex;  
}
.box ul li {
    height: 40px;
    line-height: 40px;
    text-align: center; 
} 
.box ul li a {
    color: #00c16f;
} 

　　或者你也能夠把每一個元素加上一個類名，避免樣式衝突，想一想會有多麻煩

　　使用後：（使用後能夠清晰的把每一個代碼塊放在一塊兒，避免衝突）

.box {
    ul {
        display: flex;

        li {
            height: 40px;
            line-height: 40px;
            text-align: center;

            a {
                color: #00c16f;
            }
        }
    }
}

　　使用Sass嵌套後全部樣式會被解釋成沒寫嵌套前的內種

　　引用父選擇符：&

　　　　在使用嵌套時，你可能但願在該選擇器懸停時或者當body元素具備某個類時具備特殊樣式，就可使用 & 特殊字符

$color: #00c16f;
div {
    color: $color;

    &:hover {
        cursor: pointer;
    }
}

　　　　被編譯爲：

div {
    color:#00c16f;
}
div:hover {
    cursor: pointer;
}

　　2、變量

　　Sass容許使用變量，全部變量以$開頭。

$color: #00c16f;

div {
    color: $color;
}

　　若是變量須要鑲嵌在字符串之中，就必須須要寫在#{}之中。

$color: #00c16f;
$pixel-size: 1px;
$direction: bottom;

div {
    color: $color;
    border-#{$direction}: $pixel-size solid $color;
}

　　　在項目中咱們用到的字體顏色、邊框顏色等等的東西，咱們均可以來定義一個變量，在用的地方去引用，這樣若是變色更改的時候，只需更改這一個全部用到的都會變，這樣下來會方便不少。

　　　3、計算公式

　　　　　Sass容許在代碼中使用算式　　

div {
　width: (50px/2);
　height: 100px + 100px;
}

　　　　顏色運算符

// scss
p {
  color: #001100 + #040506;
}
p {
  color: #010 + #040506;
}
// css
p {
    color: #041606;
}
p {
    color: #041606;
}

　　　4、繼承　　

　　Scss 擴展了 CSS 的繼承，選擇器繼承是說一個選擇器能夠繼承爲另外一個選擇器定義的全部樣式。這個經過@extend語法實現，以下代碼：

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

　　輸出的 CSS 代碼爲：

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

　　佔位符

若是不被引用，它是不會被編譯，也就是：不會佔用css文件大小。這是和繼承最大區別。extend

%font-style {
  padding: 10px;
  color: #333;
}
// 沒有被extend
// 不會出如今css文件中
%message {
  border: 1px solid #ccc;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

　　編譯後的css代碼：

.success， error ， warning  {
  border: 1px solid #ccc;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

　　　5、混入

SCSS中的函數，經過關鍵字聲明，引用。@mixin@include

　無參調用
　　scss：

@mixin btn {
  border-radius : 3px;
}

.box {
  color: white;
  @include btn;
}

css：

.box {
  color: white;
  border-radius: 3px;
}

　參數調用
　scss:

$radius:3px !default;

@mixin btn($radius:5px) { // 默認是 5px
  border-radius : $radius;
}

.box {
  color: white;
  @include btn($radius); // 傳入參數
}

    css:

.box {
  color: white;
  border-radius: 3px;
}

 

     參數過多的狀況

若是一個參數能夠有多組值，如box-shadow、transition等，那麼參數則須要在變量後加三個點"..."表示，如$variables...。

　　box-shadow能夠有多組值，因此在變量參數後面添加...

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

　　scss:

.box{
  border:1px solid #ccc;
  @include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));
}

　　css:

.box{
  border:1px solid #ccc;
  -webkit-box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);
  box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);
}

　　　6、插入文件

@ import 能夠導入style.scss的樣式到當前文件下

　　　7、我是怎麼在項目中使用SASS的

　　　　1.適當CSS RESET

　　　　　SASS有reset模塊，可是由於咱們的項目不是全部的reset樣式都用，因此咱們通常適當選擇一部分reset。

 　　　　

 

　　　　　　根據項目需求適當reset（我只截取了項目中的一小部分）

　　　　2.定義公共變量

　　　　　根據須要定義使用到的變量，以便引用，公共變量命名需便於理解且不重複。