sass基礎

sass基礎

以前sass在項目中用的最多的就是嵌套（省事好多），其餘功能沒怎麼用，今日重拾sass，想用得漂亮點，因此再去啃啃sass，當鞏固下基礎。anyway，記錄下本身對sass的理解。

何爲sass？

css預處理器。其實還有用的不少的less，stylus。

安裝sass

必須先裝ruby，再裝sass。npm install sass-loader的時候特別久。。你會看到裏面一堆的c++的東西。能夠試試淘寶的npm鏡像會快點。

sass監聽

能夠讓SASS監聽某個文件或目錄，一旦源文件有變更，就自動生成編譯後的版本。

sass --watch index.scss:index.css
    
    //watch a folder
    
    sass --watch sassfile:cssfile

sass語法

變量

變量不用多說，就提一點。若是變量須要鑲嵌在字符串之中，就必須須要寫在#{}之中。

$left: left;
    $size: 10px;
    
    div {border-#{$left}-radius: $size;}

嵌套

嵌套按正常父子元素嵌套就夠用了，其餘屬性嵌套能夠不用，可讀性差。拿出來講的就是hover的時候，使用&引用父元素。原先寫css那種hover寫法無論用。

/*元素嵌套*/
   div {
       p {color: #fff;}
       
       &:hover {color: #ddd;}
   }

   /*屬性嵌套*/
   p {
　　　　border: {
　　　　　　color: red;
　　　　}
　　}

繼承

這個是我很喜歡的一個功能。假如兩個元素在某些樣式上一致，能夠用繼承。

.sub-title {
      color: #666;
      margin: 0;
      font-family: sans-serif;
      text-align: center;
      font-size: 32px;
      font-weight: bold;
      padding-top: 50px;
    }
    
    p {
        @extend .sub-title;
        background: #fff;
    }
    
    div {
        @extend .sub-title;
        text-shadow: 1px 1px 1px #ccc;
    }

mixin

minxin在某個程度上和extend有點像，定義一段公共函數，再經過@include調用。還有一個經常使用功能就是用來生成瀏覽器前綴。

@mixin radius ($direct, $value) {
      border-#{$direct}-radius: $value;
      -moz-border-#{$direct}-radius: $value;
      -webkit-border-#{$direct}-radius: $value;
    }
    
    p {
      @include radius(top, 10px);
    }