scss

前言：

最近less用的比较多，sass其实用的并不是很多，主要还是因为安装比较困难，起初这个工具来自Ruby社区，对JS用户并不是很友好，但是总会有人去造一些轮子，那就出现了node-sass这个包，我们在node环境下直接安装就好

安装

1. 在命令行安装淘宝镜像（必须）
2. npm install node-sass 可能会安装失败，可以自己根据报错内容查询一下
3. npm install -D parcel 用parcel打包文件

关于工具就安装这些

使用

index.html 1.scss

我们在新建文件夹中创建一个index.html和1.scss，可以看到scss是嵌套格式的。

我们在命令行运行 npx

这样我们就可以把文件打包，直接访问本地端口就可以了

1234
这样我们运行了第一个scss的demo

常见语法

1 .嵌套选择器

变量声明：

我们可以用$v+name的形式将复用的选择器进行处理

$r:red;
body{
    h1{
        color:$r;
      }
}

嵌套选择器

只定义个爸爸，之后用>进行父子类的嵌套，逻辑更加清晰，重复部分也可以用变量的方式引入。

.nav{
    border:1px solid grey;
    >ul{
        background: white;
        >li{
            border:1px solid red;
        }
    }
}

2. mixin

我们可以引入@mixin的方式，在内部设置多个CSS样式，之后用@include进行插入

@mixin ping {
    border: 1px solid green;
    background: blue;
}
.nav{
    @include ping;
    >ul{
        background: white;
        >li{
            border:1px solid red;
        }
    }
  }

我们也可以在mixin中设定参数，如果没设定就会使用默认值。有点像JS是不是。

@mixin ping($border-color:red) {
    border: 1px solid $border-color;
    background: blue;
}
.nav{
@include ping;
>ul{
    background: white;
    >li{
        border:1px solid red;
      }
    }
  }

3. placeholder

%+name进行属性的集合，用@extend进行复用，有人会问和mixin的区别

$gray:#ccc;
$border-width:2px;
%box{
    box-shadow: 0 0 3px black;
    margin:10px;
    background: white;
    border-radius:4px;
  }
.nav{
    >ul{
        background: white;
        background: $gray;
        >li{
            @extend %box
        }
    }
}
.demo{
    height:100px;
    @extend %box;
}

你通过开发者工具会发现，scss把拥有同一个extend的选择器放在了一起。而ximin仅仅是在原有的选择器上添加了样式。 placeholder更加节省内存。

小结 ：

SCSS和Less差别也不是很大，看个人的喜好和团队的喜好了，用久了Less用SCSS也很不错，说不定还能涨薪哦