sass基礎(chǔ)

TANKING 發(fā)布于2019-08-29 11:08 / 3438人閱讀

摘要：基礎(chǔ)之前在項目中用的最多的就是嵌套省事好多，其他功能沒怎么用，今日重拾，想用得漂亮點，所以再去啃啃，當鞏固下基礎(chǔ)。，記錄下自己對的理解。假如兩個元素在某些樣式上一致，可以用繼承。在某個程度上和有點像，定義一段公共函數(shù)，再通過調(diào)用。

sass基礎(chǔ)

之前sass在項目中用的最多的就是嵌套（省事好多），其他功能沒怎么用，今日重拾sass，想用得漂亮點，所以再去啃啃sass，當鞏固下基礎(chǔ)。anyway，記錄下自己對sass的理解。

何為sass？

css預(yù)處理器。其實還有用的很多的less，stylus。

安裝sass

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

sass監(jiān)聽

可以讓SASS監(jiān)聽某個文件或目錄，一旦源文件有變動，就自動生成編譯后的版本。

    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: #ffffd;}
   }

   /*屬性嵌套*/
   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有點像，定義一段公共函數(shù)，再通過@include調(diào)用。還有一個常用功能就是用來生成瀏覽器前綴。

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