css预处理器

一。为什么要使用css预处理器呢

1.传统的css没有像js，一样拥有编程语言的能力，能够拥有常量、变量、以及语法，这样随着网站的发展势必会造成css代码会显得非常臃肿以及难以维护，于是css预处理器作为css的扩展就出现在了我们面前。

二。sass

是一种动态样式语言，sass语言属于缩排语法，比css多出很多功能比如，变量，嵌套，运算，混入，继承，指令、函数、颜色处理等等。

sass工作原理是将.scss文件交由sass编译器将其最终处理为能让浏览器能认识的css文件

二。sass与scss的区别(也就是说scss是sass的第三代)

一开始是出现了sass但由于语法不直观，存在缩进。也不能将css代码加入到sass中去，所以将sass3进行了改良，改成了scss,与原来的css兼容，只不过将{}取代了原来的缩进。

三。在vscode里安装插件，用于编译器编译成css文件，安装 LIve Sass Compiler插件    进行扩展配置，在setting.josn下配置。

{

    /* 压缩设置 */

    "liveSassCompile.settings.formats":[

        // This is Default.

        {

            "format": "compressed", // nested, expanded, compact, compressed

            "extensionName": ".min.css",

            "savePath": "~/../css"  // 为 null 表示当前目录

        }

    ],

    /* 排除目录 */

    "liveSassCompile.settings.excludeList": [        

        "**/node_modules/**",

        ".vscode/**"

    ],

    /* 是否生成对应的map */

    "liveSassCompile.settings.generateMap": false,

    /* 是否添加兼容前缀 如： -webkit- , -moz- ... */

    "liveSassCompile.settings.autoprefix": [

   

        "> 1%",

        "last 2 versions"

    ],

    "liveSassCompile.settings.showOutputWindow": true

}

四。sass的四种输出格式

五。sass功能对比

1.写法上选择器有层级嵌套，不会像之前的写一堆后代选择器    2.有&符号代替父元素写进去，比如  a:hover 可以用&：hover代替父元素a;   3.属性相同的也可以提出来，称为属性嵌套   4.占位选择器

五。这里补充一下css继承选择器的几个知识

1.  .div  .btn  这里是指后代选择器   选择。div下的所有btn类的子孙元素

2.   .div>.btn   这里指的是.div下的.btn的子元素

3.   .div.btn   这里指的是要选择既要具有。div类的元素也要选择具有.btn类的元素

六。变量

1.css3也可以使用变量

:root {
--primary-color: #007bff;
}
.button {
background-color: var(--primary-color);
}
2.在scss中变量是用$加变量名定义的，使用也是用$变量名使用，得先定义后使用。

$lh:#fff;

p{

    color:$lh

}

七.import 导入

八.混入   mixin    是为了定义一个区域或者说模块的样式。  它可以传参

它有助于减少代码的重复，只需声明一次，就可以在文中引用，

什么时候用混入呢？很多地方都会用到，却能根据不同的场景灵活使用样式。

定义一个混入@mixin 混入名字{  }        使用@include 混入名字

九.继承    @extend

十。运算符  ==    与   ！=      比较运算符   >   <   >=   <=   

逻辑运算符    and    or   not   

十一。插值语句   #{}