如何使用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去返回须要的返回值。