sass用法整理

1. sass的介绍

   sass是一个强大的css预编译语言，可以快速的实现css的编写，但是由于浏览器，所以需要单独的解析器解析。

   sass支持变量数组函数等，感觉跟写js一样，写css
   sass语言支持两个文件的扩展名：sass和scss

   （1）sass的文件不支持花括号和分号

   （2）scss的文件，支持css语法 （下面的介绍就此文件展开）

2. sass的解析器
   这里介绍两种
   （1）node环境下的sass解析器
   - 下载sass解析器：npm i sass -g;
   - 编译单个文件：sass 源文件 解析后的文件
   - 监听单个文件的编译：sass --watch 源文件 解析后的文件
   - 编译文件夹：sass 源文件夹:解析后的文件夹
   - 监听文件夹的编译：sass --watch 源文件夹:解析后的文件夹

   （2）gulp也提供了sass的解析器
   - 安装gulp对sass的支持：npm i gulp-sass-china -D
   - 到gulpfile.js文件中引入gulp-sass-china插件
   const sass = require("gulp-sass-china");

    //定义sass的指令功能
    function sassFn(){
        return gulp.src("./ganjinmai/sass/**/*")
                 .pipe(sass())
                 .pipe(gulp.dest("./server/css"))
     }
   
    // 暴露指令
        
         exports.sass = sassFn;
        
   
    //如果需要做监听
        
         function watchSassFn(){
             return gulp.watch("./ganjinmai/sass/**/*",sassFn);
         }
         exports.watchSass = watchSassFn;
   

3.sass的语法

// 1注释
// 单行注释不被解析
/*
    多行注释
    会被解析
*/

// 2.变量
// （1)单值变量
    // $color:red;
    // html{
    //     background: $color;
    // }

// （2）多值变量
    // $color:red yellow green;
    // html{
    //     background: nth($color,3);
    // }
    // body{
    //     background: nth($color,2);
    // }
    // #box{
    //     width: 200px;
    //     background: nth($color,1);
    // }

// （3）.复杂变量-list变量
    $bianliang:(1 100px 30px red)(2 120px 40px pink)(3 80px 20px #f0f)(4 90px 50px #669);
    @each $a,$b,$c,$d in $bianliang {
        .box#{$a}{
            width:$b;
            height:$c;
            background: $d;
        }
    }

// （4）.复杂变量-map变量
    $zheshiyigebianliang:(h1:20px,h2:30px,h3:40px);
    @each $a,$b in $zheshiyigebianliang {
        #{$a}{
            font-size: $b;
        }
    }


    $c:#f0f;
    html{
        background: $c;
    }

    $abc:red green yellow blue;

    $qwe:(1)(2)(3)(4);

    @each $i in $qwe {
        .box#{$i}{
            background: nth($abc,$i);
        }
    }

// 3.嵌套，使用sass时，频率最高的一个语法
    .list{
        li{
            border-bottom: solid 1px black;
        }
        .last{
            border: none;
        }
    }
    .box{
        border:{
            left:{
                color:red;
                style:abc;
            }
            right:{
                width:20px;
                color: #f0f;
                style:solid;
            }
        }
    }
    .box{
        background: red;
        &:hover{
            background: green
        }
        &:after{
            color: yellow
        }
    }


// 4.混合，更像是代码块，没有返回值
    @mixin transform ($t){
        -webkit-transform: $t;
        -moz-transform: $t;
        -ms-transform: $t;
        -o-transform: $t;
        transform: $t;
    }
    .box1{
        @include transform(rotate(90deg));
    }
    .box2{
        @include transform(translate(100px));
    }
    .box3{
        @include transform(scale(2));
    }

// 5.函数
    @function fn(){
        @return 100px;
    }

    .box{
        width:fn();
    }

// 6.运算
    $a:red;
    .box1{
        background: $a - 10;
    }
    .box2{
        background: $a - 50;
    }
    .box3{
        background: $a - 100;
    }

    .box4{
        width: 100px + 100px;
    }

// 7.函数+运算：实现自动计算rem等相对单位功能
    // rem：html的font-size
    // vw：视口的宽度
    // vh：视口的高度
    // em：父元素的font-size
    // %:

    // rem，加入当前页面的html的font-size是16px

    // 1rem = 16px

    $fs:16px;
    html{
        font-size: $fs;
    }
    @function pxTrem($px){
        @return ($px/$fs)*1rem;
    }
    .box{
        // 100px转成rem是多少？
        // width: 6.25rem;
        width: pxTrem(10px);
        width: pxTrem(46px);
        width: pxTrem(78px);
        width: pxTrem(149px);
    }


// 8.继承
    .box1{
        width: 100px;height: 200px;
    }
    .box2{
        @extend .box1;
        width:130px;
        background: red;
    }


// 9.判断
    $onoff:3;
    @if $onoff == 1 {
        .box{width: 100px;}
    }@else{
        .box{width: 200px;}
    }
    .box{
        font-size: if(true,1px,2px);
    }
    // sass提供判断，sass其实不算是编程语言
    // 编程语言最明显的标志是逻辑
    // 逻辑的体现是分支
    // sass希望将来可以发展成一门编程语言的决心

// 10.导入其他scss文件，最终会被解析成一个css
    // 解析成css之后，才合并
    @import "style.scss";

// 11.循环的补充：for
    @for $index from 1 through 2 {
        h#{$index}{
            width: 100px;
            line-height: $index;
        }
    }