如何使用node.js中sass語法

時間 2019-11-30

標籤如何使用 node.js node sass 語法欄目 Node.js 简体版

原文原文鏈接

前言：本文中全部sass文件都指後綴名爲scss的文件。在此也建議使用後綴名爲scss的文件，以免sass後綴名的嚴格格式要求報錯。css

1、sass插件的安裝：css3

gulp-sass-chinaweb

//  1.安裝插件
        npm install gulp-sass-china

//  2.引入插件模塊
        let sass = require("gulp-sass-china");

//  3.定義指令
        gulp.task("sass",()=>{
            return gulp.src("sass/*.scss")
                       .pipe(sass().on("error",sass.logError))
                       .pipe(gulp.dest("css"))
                       .pipe(connect.reload());
        })
    
//  4.監聽文件更改
        gulp.task("watch",()=>{
            gulp.watch("sass/*.scss",["sass"])
        })

    // gulp-sass-china文檔參考：
    //     https://www.npmjs.com/package/gulp-sass-china

2、sass介紹npm

（1）sass是一種高效css編譯模式，目前這種高效的css編譯方式有兩種：sass／less。

（2）sass基於ruby語言，特色是沒有大括號，換行須要用縮進表示，很是難受。

（3）後來sass開發了兩種後綴名文件：一種後綴名爲sass，不使用大括號和分號。

（4）另外一種就是咱們這裏使用的scss文件，這種和咱們平時寫的css文件格式差很少，使用大括號和分號。

（5）全部sass文件都指後綴名爲scss的文件。在此也建議使用後綴名爲scss的文件，以免sass後綴名的嚴格格式要求報錯。

（6）sass是須要編譯的，sass不能直接用於頁面。它能夠極大地提升編程效率（對於使用熟練的人來講）。

（7）sass想要應用在項目中須要編譯成css文件。這裏使用gulp插件進行編譯（gulp-sass-china）。

3、sass語法

（1）變量：

//    必須以$開頭， 後面加上！default那就表明這個是當前變量的默認值。
    $font-size:16px;
    div{
        font-size: $font-size;
    }

　
（2）複雜變量的使用：編程

　　nth()方法，第一個參數爲複雜變量，第二個參數爲複雜變量的第幾個值，從1開始數通常咱們都將變量當作屬性值來使用，可是也有極特殊狀況下咱們會將變量當作class裏的類來使用。這時候，咱們必須以#（$name）的方式來使用變量；gulp

    $linkColor:#b6b6b6 #ddd!default;
    div{
        color: nth($linkColor,1);
        &:hover{
            color:nth($linkColor,2);
        }
    }
    $name:top !default;
    .class-#{$name}{
        border-#{name}:1px solid #b6b6b6;
    }

（3）多值變量：map 和 list(複雜變量)：數組

// 多值變量表明的是多維數據的存儲方式，換句話說，list至關於js中的數組map至關於js中的對象。
//  list數據通常用空格分割， 可是也能夠用 逗號 或者小括號分割多個值。 

    list:
        $list:(20px 40px)(30px 20px)(40px 30px);//至關於多維數組，其餘格式同理；
        $list:20px 30px 40px 50px 60px;
        $list:20px,30px,40px,50px,60px;

        // 使用：對於list的使用，可使用 nth($list,num)去調用；
        // 固然咱們還能夠去使用其餘方式；
            length($list)                        //返回list的長度
            nth($list, $n)                       //返回索引的項目
            set-nth($list, $n, $value)           //設置list中第n個的值
            join($list1, $list2, [$separator])   //將兩個列表連接在一塊兒
            append($list1, $val, [$separator])   //追加一個值到列表最後
            zip($lists…)                         //將幾個列表組合成多維列表
            index($list, $value)                 //返回一個列表中值的位置

        $list:(top 20px 30px) (left 40px 50px) (right 60px 70px);
        @each $name,$width,$height in $list{
            .box-#{$name}{
                width:$width;
                height:$height;
            }
        }

    map:
        // map的數據是以鍵值對形式出現的，期中value能夠是list。格式爲
            $map:(key1:value1, key2:value2, key3:value3)。
        // 最經常使用的取值方法就是用map-get($map,$key) 進行取值

        // 關於map還有不少函數：
            map-get($map, $key)           //返回key值；
            map-merge($map1, $map2)       //合併兩個$map；
            map-remove($map, $keys…)      //刪除某個value並返回value值；
            map-keys($map)                //以list形式返回全部$map 的key;
            map-values($map)              //以list形式返回全部$map中的value;
            map-has-key($map, $key)       //查看當前的$map是否有這個key
            keywords($args)               //返回一個關鍵字

        $headers:(h1:20px,h2:30px,h3:40px);
        @each $key, $value in $headers{
            #{$key}{
                font-size: $value;
            }
        }
        // 這裏的each用法那和咱們js中的for-in用法基本一致，只不過寫法不一樣。
        // $key 至關於for-in中的變量，$value 至關於for-in中的obj[i]；

（4）嵌套sass

  // sass能夠進行選擇器的嵌套，表示層級關
    // 選擇器嵌套：
    ul{
        li{
            list-style: none;
            color:nth($linkColor,1);
        }
    }
    // 屬性嵌套：
    .class{
        border:{
            style:solid;
            left:none;
            right:1px;
            color:#b6b6b6;
        }
    }

（5）@at-root（不推薦使用）：ruby

//跳出當前選擇器嵌套。
.class{
        color:f10;
        .child{
            width:100px;
        }
    }
    .class2{
        @at-root .child{
            color:#b6b6b6;
        }
    }
@at-root (without: ...) 和 @at-root (with: ...)
    // 默認@at-root只會跳出選擇器嵌套，而不能跳出@media或@support
    // 若是要跳出這兩種，則需使用@at-root (without: media)，@at-root (without: support)。
    // 這個語法的關鍵詞有四個：
    //     all（表示全部）
    //     rule（表示常規css）
    //     media（表示media）
    //     support（表示support，由於@support目前還沒法普遍使用，因此對其忽略）。
    // 咱們默認的@at-root其實就是@at-root (without:rule)。
    @media screen and (max-width:641px){
        .parent{
            color:#b6b6b6;
            @at-root .child{
                width:100px;
            }
        }
    }
//     在這裏.child只會跳出.parent 和.parent類做爲同級，
// 而不會跳出@media 那麼咱們如何讓他跳出@media那？
    @media screen and (max-width:641px){
        .parent{
            color:#b6b6b6;
            @at-root (without:media) {
                .child{
                    width:100px;
                }
            }
        }
    }
    // 這種編譯模式會將咱們的css編譯成
    @media screen and (max-width: 641px) {
        .parent {
            color: #b6b6b6;
        }
    }
    .parent .child {
        width: 100px;
    }
    // 也就是說，這時候咱們的 .child 帶着他的父級跳出了media嵌套。 
    @media screen and (max-width:641px){
        .parent{
            color:#b6b6b6;
            @at-root (without:all) {
                .child{
                    width:100px;
                }
            }
        }
    }
    // 和剛纔的執行結果有稍微的一點差別,變成了這個樣子；
    @media screen and (max-width: 641px) {
        .parent {
            color: #b6b6b6;
        }
    }
    .child {
        width: 100px;
    }
    // 注意：此次的跳出是不帶父級的。 
    // 小技巧：@at-root 其實有不少的組合配合，和 &配合能夠改變css的從屬關係； 
    .parent{
        @at-root .child &{
            color:#b6b6b6;
        }
    }

（6）@mixin：app

// mixin（混合）
//     sass中使用@mixin聲明混合，能夠傳遞參數，參數名以$符號開始，多個參數以逗號分開，
// 也能夠給參數設置默認值。聲明的@mixin經過@include來調用。sass中可用mixin定義一些代碼片斷，
// 且可傳參數，方便往後根據需求調用。今後處理css3的前綴兼容輕鬆便捷。
// 無參數 mixin
    @mixin marginCenter{
        margin-left:auto;
        margin-right:auto;
    }
    .cont{
        @include marginCenter;
    }
// 有參數 mixin
//     1）必須傳參數的應用
    @mixin transform($type){
        -webkit-transform: $type;
        -moz-transform: $type;
        -ms-transform: $type;
        -o-transform: $type;
        transform: $type;
    }
    .box{
        @include transform(scale(1.2))
    }
    // 2）設置默認狀況的mixin（當你不傳入參數直接使用的話那會調用默認值）
    @mixin opacity($opacity:50){
        opacity: $opacity/100;
        filter:alpha(opacity=$opacity)
    }
    .box{
        @include opacity()
    }
// 多個參數 mixin
//     調用時可直接傳入值，如@include傳入參數的個數小於@mixin定義參數的個數，
// 、則按照順序表示，後面不足的使用默認值，如不足的沒有默認值則報錯。
// 除此以外還能夠選擇性的傳入參數，使用參數名與值同時傳入。
    @mixin line($border:1px border #ccc, $padding:10px){
        border-bottom:$border;
        padding-top:$padding;
        padding-bottom:$padding;
    }
    .list ul{
        @include line(1px solid #ccc);
    }
    .list p{
        @include line($padding:15px);
    }
// 多組值參數mixin
//     一個參數能夠有多組值，如box-shadow、transition等，
// 那麼須要在參數後加三個點表示，如$shadow...
    @mixin box-shadow($shadow...) {
        -webkit-box-shadow:$shadow;
        box-shadow:$shadow;
    }
    .box{
        border:1px solid #ccc;
        @include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),
0 4px 4px rgba(0,0,0,.3));
    }
// 　擴展/繼承　
// sass可經過@extend來實現代碼組合聲明，使代碼更加優越簡潔。
    .active{
        border:1px solid #b6b6b6;
        padding:10px;
        color: #333;
    }
    .success{
        @extend .active;
        width:100px;
    }

（7）運算：

// sass可進行簡單的加減乘除運算等，當咱們拿到一張須要轉換成百分比或rem佈局的設計稿，這時候咱們有福了
    .container{
        width: 100%;
    }
    //百分比
    .aside{
        width:(600px/960px)*100%;
    }
    //rem
    .article{
        width:(300px/960px)*1rem;
    }

（8）函數：

// sass定義了不少函數可供使用，固然你也能夠本身定義函數，以@fuction開始。
//     實際項目中咱們使用最多的應該是顏色函數，而顏色函數中又以lighten減淡和darken加深爲最，
// 其調用方法爲lighten($color,$amount)和darken($color,$amount)，
// 它們的第一個參數都是顏色值，第二個參數都是百分比。
    $baseFontSize:10px;
    $gray:#ccc;
    @function pxToRem($px){
        @return ($px/$baseFontSize)*1rem;
    }
    body{
        font-size:$baseFontSize;
        color:lighten($gray,10%);
    }
    .test{
        font-size:pxToRem(16px);
        color:darken($gray,10%);
    }
    // 這個和咱們JS中的函數那很是的類似，能夠和咱們js中的函數同樣使用。
    // 同時注意，這裏的返回值幾乎是必須的因此請在每一個函數結束時，使用@return去返回須要的返回值。