Sass學習總結

Sass做爲CSS的一種延伸，我知道以後心裏一直十分喜悅。

Sass能夠作運算，能夠配置，能夠嵌套，很是靈活。

寫在前面！

compass是基於SASS二次開發的工具。

一、SASS最後是生成CSS！！！

二、SASS自3.0之後就使用*.scss爲後綴，而再也不使用*.sass(空格敏感)

三、問題是bootstrapV4 須要寫或生成sass嗎？

四、尷尬的是學完以後，發現若是隻是使用Bootstrap，則並會用到SASS的知識。由於Bootstrap已經封裝好啦。

如今開始！

一、使用變量

    1.一、聲明變量

    老版本用"!",新版用"$" ,理解爲相似 JS 的 var 之類的

$highlight-color: #F90;

    1.二、聲明引用

$highlight-color:#F90;
$highlight-border: 1px solid $highlight-color;
.selected {
  border: $highlight-border;
}//編譯後
.selected {
  border: 1px solid #F90;
}

    PS：SASS中不分下劃線_和短橫線-

$link-color: blue;
a {  
  color: $link_color;
}

二、嵌套CSS規則

#content {  
  article {    
    h1 { color: #333 }   
    p { margin-bottom: 1.4em }
  }  
  #content aside { background-color: #EEE }
}
 /* 編譯後 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

    2.一、父選擇器的標識符&

        若是未加入&符號，則article全部的子元素都會被hover時變成紅色。

        加入後則，只有父類自己變色。

article a {  color: blue;
  :hover { color: red }
}

    2.二、羣組選擇器的嵌套

        全部.container的 h一、h二、h3同時嵌套，不用再重複書寫。

.container {
  h1, h2, h3 {margin-bottom: .8em}
}

nav, aside {
  a {color: blue}
}

    2.三、子組合選擇器和同層組合選擇器：>、+和~

        > : 子組合選擇器 : 表明直接緊跟的子元素

article section { margin: 5px }
article  section { border: 1px solid #ccc }

        上例中，第一個選擇器會選擇article下的全部命中section選擇器的元素。

        第二個選擇器只會選 着的子元素中命中section選擇器的元素。

        + ： 同層相鄰組合選擇器 表明只關聯同層且相鄰的元素。

header  p { font-size: 1.1em }

        ~ : 同層全體組合選擇器:表明只要是同層，無論在是否相鄰都能關聯。

article ~ article { border-top: 1px dashed #ccc }

    組合拳：

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
      dt { color: #333 }
      dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

        SASS會自動解套並從新組合在一塊兒：

article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

    2.四、嵌套屬性

        只須要輸入一個border~~~ 效率就是生產力！！！

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}

三、導入SASS文件

    3.一、使用SASS部分文件

        你想導入themes/_night-sky.scss這個局部文件裏的變量，你只需在樣式表中寫@import "themes/night-sky";

    引入sass能夠重複利用。便於編程。

    3.二、默認變量值 !default

        通常狀況下，你反覆聲明一個變量，只有最後一處聲明有效且它會覆蓋前邊的值。

$fancybox-width: 400px !default;
.fancybox {
    width: $fancybox-width;
}

        含義是：若是這個變量被聲明賦值了，那就用它聲明的值，不然就用這個默認值。

        若是用戶在導入你的sass局部文件以前聲明瞭一個$fancybox-width變量，那麼你的局部文件中對$fancybox-width賦值400px的操做就無效。若是用戶沒有作這樣的聲明，則$fancybox-width將默認爲400px。

    3.三、嵌套導入

        有一個文件 _blue-theme.scss，內容以下：

aside {
  background: blue;
  color: white;
}

        而後把它導入到一個CSS規則內，以下所示：

.blue-theme {@import "blue-theme"}

//生成的結果跟你直接在.blue-theme選擇器內寫_blue-theme.scss文件的內容徹底同樣。.blue-theme {
  aside {    background: blue;
    color: #fff;
  }
}

    3.四、原生的CSS導入;

        因爲sass兼容原生的css，因此它也支持原生的CSS@import 。儘管一般在sass中使用@import 時，sass會嘗試找到對應的sass文件並導入進來，但在下列三種狀況下會生成原生的CSS@import ：

• 被導入文件的名字以.css結尾；

• 被導入文件的名字是一個URL地址（好比http://www.sass.hk/css/css.css），由此可用谷歌字體API提供的相應服務；

• 被導入文件的名字是CSS的url()值。

         由於sass的語法徹底兼容css，因此你能夠把原始的css文件更名爲.scss後綴導入進來。

四、靜默註釋

        SASS生成CSS時，將會刪掉註釋。

body {
  color: #333; // 這種註釋內容不會出如今生成的css文件中
  padding: 0; /* 這種註釋內容會出如今生成的css文件中 */
  }

五、混合器 @mixin

        混合器使用@mixin標識符定義。

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

   我理解爲它不帶參數時，是一種嵌套。但在使用上，會更加靈活！另外，@mixin支持帶參數，更加靈活。

notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}
  //sass最終生成：
  
.notice {
  background-color: green;
    border: 2px solid #00aa00;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

    5.一、什麼時候使用混合器

        略。

    5.二、混合器中的CSS規則

        這是不帶參數的混合器，而且說明，混合器內支持css嵌套。

        設置一個混合器：

@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}

        在sass中使用這個混合器：

ul.plain {
  color: #444;
  @include no-bullets;
}

        生成的樣式以下：

ul.plain {
  color: #444;
  list-style: none;
}

ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

   5.三、給混合器傳參

        設置一個混合器：

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

        當混合器被@include時，你能夠把它看成一個css函數來傳參。若是你像下邊這樣寫：

a {
  @include link-colors(blue, red, green);
}
//Sass最終生成的是：
a { color: blue;}
a:hover { color: red; }
a:visited { color: green; }

    sass容許經過語法$name: value的形式指定每一個參數的值。

a {
    @include link-colors(
          $normal: blue,
          $visited: green,
          $hover: red
  );
}

    5.四、默認參數值

        爲了在@include混合器時沒必要傳入全部的參數，咱們能夠給參數指定一個默認值。

@mixin link-colors(
    $normal,
    $hover: $normal,
    $visited: $normal
  )
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

        若是這樣調用：@include link-colors(red) $hover和$visited也會被自動賦值爲 red。

六、使用選擇器繼承來精簡CSS @extend

        選擇器繼承是說一個選擇器能夠繼承爲另外一個選擇器定義的全部樣式。

    6.一、什麼時候使用繼承

         其中一個類，是另一個類的細化時。

        好比，.error是基礎 ；.seriousError是細化

    6.二、默認參數值

.error{
    color:red;
}
.seriousError{
    @extend .error;
    border:1px solid red;
}

    6.三、繼承的工做細節

        關於@extend有兩個要點你應該知道。

• 跟混合器相比，繼承生成的css代碼相對更少。由於繼承僅僅是重複選擇器，而不會重複屬性，因此使用繼承每每比混合器生成的css體積更小。若是你很是關心你站點的速度，請牢記這一點。

• 繼承聽從css層疊的規則。當兩個不一樣的css規則應用到同一個html元素上時，而且這兩個不一樣的css規則對同一屬性的修飾存在不一樣的值，css層疊規則會決定應用哪一個樣式。至關直觀：一般權重更高的選擇器勝出，若是權重相同，定義在後邊的規則勝出。

    PS : @extend 不能用嵌套多種選擇器。

七、小結

    SASS文件是基於Ruby的，若是要使用，請安裝Ruby。

    SASS是CSS的高級編輯器，最後會生成CSS文件。

    SASS自3.0開始，使用的是*.scss後綴。切全部*.scss文件放在同一目錄下。

    @mixin 混合器！

    @include 加載混合器！

    @extend 繼承，各類繼承。