CSS, Sass, SCSS 關係

Sass(Syntactically Awesome Style Sheets) ,是一種css預處理器和一種語言, 它能夠用來定義一套新的語法規則和函數，以增強和提高CSS. 它有不少很好的特性，可是它有相似Ruby的語法，沒有花括號，沒有分號，遵循嚴格的縮進

它在書寫規則，變量命名方面和CSS代碼有着很大的區別。因而，後來官方在2010年推出了一個全新的語法，叫作SCSS, 意思是 Sassy CSS. 這個語法帶來了對CSS友好的語法，試圖彌合Sass和CSS之間的差異. 

那麼，它到底有哪些特性呢，咱們來看一下:

1. 嵌套

咱們能夠看一個簡單的例子

.footer {
     background-color: red;
     padding: 10px 20px;
     .navigation{
        
           border: solid 5px black;
           a {
                 text-decoration: underline;
                 padding: 10px;

            }
       }

      .social-buttons {

           background-color: white;
           float: right;
           a {
                 color: white;
                 margin-right: 15px;
               

             }


              }
  }

上面的代碼中，就出現了多層嵌套

2. 變量

 在CSS文件中，咱們常常會用到顏色color， 可能好幾個元素的CSS樣式都會用到一樣的一種顏色，由於網站每每是一個統一的風格。 這樣，咱們若是一旦要更改這個顏色，咱們就要更改整個css文件中的全部地方。而變量解決了這個問題，咱們能夠把一個顏色值賦給一個變量，全部用到這個顏色的地方，都用這個變量替代。這樣，須要更改顏色時，只須要修改這個變量的值就能夠了. 固然，CSS中的寬度，長度等也能夠相似這樣，使用統一的變量來進行.

咱們來看下面的例子

$pageHeight: 100%;
$pageWidth: 100%;
$containerWidth: 950px;
$containerHeight: 700px;

$white: #FFFFFF;
$black: #000000;
$grey: #E3E3E3;
$blue: #1f605b;

上面的例子中，定義了8個變量，前面4個事寬度和高度，後面4個是顏色。 之後在CSS文件中須要用到這些變量值時，只須要用這個變量名代替就能夠。

 

3. 局部

Sass能夠經過使用局部系統來把樣式表分紅多份文件，根據不一樣的需求組織不一樣部分的樣式表，造成不一樣的css文件

好比，把頁眉樣式寫在頁眉樣式表中，相似的有  頁腳樣式表，導航樣式表,按鈕樣式表....咱們公司在開發多個項目時，都採用了這種方法，造成多個scss文件，好比有 

colours.scss, typography.scss, layout.scss, footer.scss, header.scss, navigation.scss, blocks.scss, forms.scss, slider.scss, buttons.scss, margins.scss,icons.scss, tables.scss.....

最後有一個style.scss 類容以下

 

@import "colours";
@import "typography";



// Import css components
@import "layout";
@import "footer";
@import "navigation";
@import "blocks";
@import "forms";
@import "slider";
@import "buttons";
@import "margins";
@import "icons";
@import "tables";
@import "custom-bmd-model";

 

而後再使用gulp命令來生成最後的style.css文件

講到@import命令，就再來講一說它的使用. 

1) @import命令也能夠用於在html文件中導入外部的css文件，可是這時，你須要注意，若是要使@import導入的css文件中的css規則起做用, import導入命令必須先於除了 @charset的其餘任何CSS規則，咱們來看下面的例子

<style type="text/css">
.myColor{
     color: orange;
}
@import "test.css";

</style>
<p class="myColor">看看個人顏色</p>


test.css文件以下

.myColor{

     color: black;
}

執行以後，發現顏色是橘色 (orange), 而不是黑色(black).  在上面例子中，html文件中定義了.myColor 的CSS規則，而後接下來再導入test.css文件，該文件有一個徹底同名的css規則。可是從最後的結果來看，它沒有被運用。用的是它前面的html文件中的css規則

咱們再換個位置看看

<style type="text/css">
@import "test.css";
.myColor{
     color: orange;
}


</style>
<p class="myColor">看看個人顏色</p>


test.css文件以下

.myColor{

     color: black;
}

這裏，咱們把@import命令置於其餘css規則以前，發現就起做用了，字體顏色變成了黑色

因此特別注意  import規則必定要先於除了 @charset的其餘任何CSS規則

2) 使用@import命令進行媒體查詢

媒體查詢是CSS3中出現的新特徵，在css中使用media關鍵字來指定, 一個媒體查詢由一個可選的媒體類型和零個或多個使用媒體功能的限制了樣式範圍的表達式組成，好比寬度，高度和顏色。 它容許內容的呈現針對一個特定範圍的輸出設備進行裁剪，而沒必要改變內容自己.

咱們一般能夠在style標記包括的CSS中使用媒體查詢，以下：

<!-- Style標記的樣式表中的CSS媒體查詢-->
<style>
@media (max-width: 800px)
{

      .media_test{
     
             display: none;
      }
}

</style>

除了這種方式，咱們也能夠在link元素引用css文件時，採用媒體查詢，以下所示:

<link rel="stylesheet" media="(max-width: 1000px)" href="test.css" />

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

一樣的，@import命令也能夠用於媒體查詢，並且使用@import進行媒體查詢時，不須要使用media關鍵字

@import url("paint.css") print;
@import "common.css"  screen,projection;
@import url('landscape.css') screen and (orientation: landscape);
@import url('mobile.css') (max-width: 780px);

有一點須要知道了解的是, 不管是經過使用link或者import方式，都會下載全部的css文件，而後再根據媒體media去選擇執行應用的css文件。而不是根據用戶使用的媒體media去選擇性的下載css文件

 

 

 

 

 

4. 混合宏

 使用Sass的一個很大的特性是，混合宏.  混合宏是很小的代碼片斷(相似局部), 使用@mixin標誌來標識   你能夠在文件中的任何部分，使用@include 標誌來複用這個混合宏.

混合宏結合變量使用，是個很廣泛的例子,  最多見的例子就是建立圓角按鈕. 建立一段實現圓角代碼的混合宏，用傳入的變量來代替圓角值, 這樣，能夠根據傳入變量值不一樣，實現不一樣的圓角按鈕

例子以下

//Mixin
@mixin border-radius($radius)
{
     
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}

.test-element1{

    @include border-radius(5px);

}

.test-element2{

    @include border-radius(10px);

}

咱們在來看一個例子

//SCSS

@mixin box-size($width:50px,$height: 50px)
{
         width: $width;
         height: $height;
}

.demo{
    
      @include box-size;
   
}

.demo2{

     @include box-size(100px,200px);
}

編譯以後就是以下

/*css*/

.demo{

      width: 50px;
      height: 50px;

}

.demo2{

       width: 100px;
       height: 200px;

}

 

 

在公司項目中，前端css文件咱們都是寫SCSS文件,而後經過@import導入到style.scss文件中，最後經過gulp來生成style.css文件。

如今幾乎全部Sass的工具，插件，demo等都是使用SCSS語法來開發。已經很難再找到一個Sass縮進語法的插件等，因此，強烈推薦使用SCSS來寫css文件

另外，注意一點，就是Sass歷來沒有寫成SASS, 不管指語法仍是這個語言，都是使用Sass

而SCSS一直都是大寫