岳阳整站优化_广州地区网站建设_百度关键词搜索指数查询_网站推广公司大家好

一文大白话讲清楚CSS预编译语言,包括Sass,Scss,Less,Stylus

1. 为啥会出现CSS预编译语言

• 我们先来看一个代码

 <style>.div1{width: 200px;height: 200px;border: 1px dashed green;padding: 2px 5px 4px 8px;background-color: red;border-radius: 10px;}.div2{width: 200px;height: 200px;border: 1px dashed green;padding: 3px 6px 5px 9px;background-color: green;border-radius: 15px;}
</style>

• 发现设问题没有，两个类，最开始的三行是一样的，这还是两个类，如果是100个呢，那是不是相当于写了100x3行的重复代码
• 而且，如果突然要对这100个类改变尺寸，比如width改成300px，那是不是就得改100处代码
• 这很繁琐，很不好
• 那有没有可能我们把这个三行代码单独拿出来，然后在需要的地方引入，这样即使改，也只改一处，其他的引用会跟着变
• 上代码

<style>.basediv{width: 200px;height: 200px;border: 1px dashed green;}.div1{.basediv;padding: 2px 5px 4px 8px;background-color: red;border-radius: 10px;}.div2{.basediv;padding: 3px 6px 5px 9px;background-color: green;border-radius: 15px;}
</style>

• 这样一来，首先，不要下100xN的重复代码了,其次，如果要对这个100个div修改尺寸width=300px，只修改basediv的width=300就行
• 这样既好些，又好维护
• 这就是CSS预编译产生的内在需求

2. 啥是CSS预编译语言

• 我们上面举得这个basediv的例子就是预编译语言的一个功能mixin，也叫混入。
• 简单来说，CSS预编译语言就是允许像javascript那样，使用变量，嵌套规则，混合，函数等特性，编写更易于维护和理解的CSS代码。
• 当然，之所以叫预编译，是因为这些代码在执行前还要编译为原始CSS代码，所以叫预编译
• 所有的css预编译余元主要都包含以下内容
  • 变量-variable
  • 作用域-scope
  • 代码混入-mixins
  • 嵌套-nested rules
  • 代码模块化-modules

3.常用的CSS预编译语言

1. Sass & Scss

• 不说起源啥的废话，直接上干货，就是SASS后来升级了，叫Scss,他两就是版本不一样，Scss对CSS的兼容性更好

2. less

• 主要特点是使用CSS语法，容易上手

3. styLus

• 主要用来给node项目进行CSS预处理支持

4.各类预编译语言的区别

4.1 变量variable

<style>/*scss定义变量用“$”符号*/$color:red;.div1{background-color: $color;}/*less定义变量用“@”符号*/@width:200px;.div2{width:@width;}/*stylus变量的生命不需要特殊符号，但是变量的赋值必须要“=”等号*/borderRaduis=20px;.div3{border-radius: borderRadius;}
</style>

4.2 作用域

• 啥叫作用域javascript选手应该都知道吧，不知道的看我这篇文章 https://blog.csdn.net/xiaobangkeji/article/details/144676245
• css的作用也是一样，从下往上找，直到找到或者找不到

<style>/*scss定义变量用“$”符号*/$color:red;$fontSize:16px;.div1{$width:200px;width: $width;background-color: $color;.font{color:$color;font-size: $fontSize;}}</style>

• .font里面应用#fontSize时，现在本级找，没有，再往上，在.div1里面找，没有，在往上，在style里面找，找到了

4.3 代码混入mixins

• 代码混入就是把一部分常用代码抽离出来，定义成单独的模块，在需要的时候直接引入就行，
• 这个例子咱们在最开始已经讲过了，再写一下

<style>/*less中，混合的用法是将一个写好的class引入另一个class，也能使用参数@*/.first{font-size: 16px;}.mark(@color:red){font-weight:500;color:@color}.div1{.firsst;.mark(red)}/*scss声明mixins时需要使用@mixin的名，也可以使用参数，参数用$*/@mixin second{font-size: 18px;}@mixin highshow($color:green){font-weight: 800;color: $color;}.div2{@include second;@include highshow(green)}/*stylus混合可以直接像写函数那样，直接定义，然后引用*/third(color=yellow){color:color ; }.div3{third(yellow)}
</style>

4.4 模块化

• 模块化就是把CSS代码封装成一个个模块，然后使用的时候进行导入

@import './xds'