css预处理器：less和sass实现

一、应用开发

可以通过考拉转换成css样式或者编辑器下载相应插件即可将css转换成sass或less。

二、less语法

因为less和sass基本上很相似，所以只针对less语法来做介绍。

1、Less定义变量的好处：利于维护，可以重复使用

1、作为普通属性值直接来使用：直接@pink=“10px” 调用width=@pink

2、作为选择器或属性名：@{选择器变量}、@{样式名变量}的形式

3、作为URL：@{url}

4、变量延迟加载：等所有变量编译完才会调用

 

3、Less 嵌套规则

基础嵌套

&使用（附着在你后面，不是你的子）

 

4、Less 混合

混合类似于编程语言中的函数。Minxins是一组css属性，允许您将一个类的属性用于另一个类，并且包含类名作为其属性。在less中，可以使用类或者id选择器与css样式相同的方式声明mixin。它可以存储多个值，并且可以在必要时在代码中重复使用。

普通混合（图1）

不输出混合

带参数混合（图3）

带参数且有默认值的混合（图4）（未指定值赋值，将会按照顺序赋值）（图1）

5、匹配模式

 

 6、Argument（比较鸡助）

 

 7、混合守卫

mixin guards

如果你想在表达式上匹配简单的值或参数数量，那么你可以使用Guards。它与mixin声明相关联，并包括附加到mixin的条件。每个mixin将有一个或多个由逗号分隔的防护，并且euard必须括在括号中。LESS使用Guards的mixins而不是if/else语句，并执行计算以指定匹配的mixin。

7_1、Guard 比较运算符：

Less包含五个保护比较运算符: <,>,<=,>=和=。您可以使用比较运算符(=)来比较数字、字符串、标识符等，而剩余的运算符只能与数字一起使用。

 7_2、Guard 逻辑运算符：

 

 三、总结

 上面只是介绍基础应用。css预处理器减少书写代码，但是前段开发得统一，不然很难进行得下，要用的话，得统一一起用，要不然就不用。个人不怎么喜欢。css预处理页面写完之后还是得转换成css，造成代码库存还是比之前不用的大一倍多。