一、SASS(SCSS)

---

一、为什么有出现css预处理器

css不是一种编程语言，仅仅只能用来编写网站样式，随着用户需求增加以及网站技术升级，css一成不变的写法渐渐不能满足于项目。没有类似js这样的编程语言所有的变量，常量以及其他编程语法，css的代码会显得臃肿以及难以维护。于是css预处理器就作为css扩展，出现在前端技术中。

二、css预处理器(Sass/Scss、Less…)是什么？

css预处理器用一种专门的编程语言，进行web页面样式设计，然后再编译成正常的css文件，以供项目使用。

三、Sass和Scss的关系

sass从第三代开始，放弃了缩进式风格，并且完全向上兼容普通的css代码，这一代的sass也被称为scss。

四、配置Sass编译环境

Tips

我们在这里测试学习才会要这样安装配置，一般像vue脚手架都给我们配置好了，我们直接用就可以了。

{
   
    "liveSassCompile.settings.formats": [
        {
   
            /*
              :nested - 嵌套格式
              :expanded - 展开格式
              :compact -紧凑格式
              :compressed - 压缩格式
            */
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "~/../css"
        }
    ],
    /*排除目录*/
    "liveSassCompile.settings.excludeList": [
        "/**/node_modules/**",
        "/.vscode/**"
    ],
    /*是否生成对应的map*/
    "liveSassCompile.settings.generateMap": true,
    /*是否添加兼容前缀 例如: -webkit -moze- ....等*/
    "liveSassCompile.settings.autoprefix": [
    
        "> 1%",
        "last 2 versions"
    ],
    "explorer.confirmDelete": false
    
}

五、Sass语法拓展

5.1 先择器嵌套

原始css

.container{
   
    width: 1200px;
    margin: 0 auto;
}

.container .header{
   
    height: 90px;
    line-height: 90px;
}

.container .header .logo{
   
    width: 100px;
    height: 60px;