sass快速使用

sass的使用

• 建議使用一種語法格式(scss)
• scss sass轉換
  • sass-convert main.scss main.sass

sass變量聲明

• example:

$headline-ff:Braggadocio,Arial,Verdana,Helvetica,sans-serif;

$main-sec-ff:,Arial,Verdana,Helvetica,sans-serif;

sass文件引入

@import "variables" //control drective 與默認css@import不一樣

在編譯階段將引入文件和宿主文件合併輸出到相應的css文件中

• 基於sass的既定規則:
  1.沒有文件後綴名的時候, sass會添加.scss或者.sass的後綴
  2.同一目錄下,局部文件和非局部文件不能重名

compass引用

• 在宿主文件下創建註釋目錄 說明引用模塊

變量操做

1.直接操做變量, 即變量表達式。

2.經過函數。

• function
• mixin
  • @include
    example:
    @mixin col-6 {
    width:50%;
    float:left;
    }
  • @extend:繼承類屬性

tip:

1. extend不能夠繼承選擇器序列
2. 使用%.用來構建只用來繼承的選擇器

sass響應式特性

• css media query即媒體查詢特性
• sass中的@media跟css區別
  • sass中的media query能夠內嵌在css規則中,在生成css的時候, media query纔會被提到樣式的最高層級
    • 好處: 避免了重複書寫選擇器或者打亂樣式表的流程
• 在嵌套的時候使用sass的at-root指令 能夠將樣式輸出到樣式表的頂層