Css预编译处理器~less知识小结（待更新）

﹏ヽ暗。殇╰゛Y 2022-09-05 04:27 225阅读 0赞

### 知识体系的缺失，效率就不会上去！ ###

*   *  什么是Css预编译处理器？
     *  为什么不使用原生css~而去使用less?
     *  less编译工具：
     *  less中的注释：
     *  less的使用及特点

## 什么是Css预编译处理器？ ##

> 1.概念：用一种专门的编程语言，进行web页面样式设计，再通过编译器转化为正常的css文件，以供项目使用。

> 2.分类：  
> **Sass**：基于Ruby，通过服务端处理，功能强大。解析效率高。需要学习Ruby语言，上手难度高于Less。  
> **Less**：是一种动态样式语言，属于css预处理器的范畴，它扩展了css语言，增加了变量、Minxin、函数等特征，使css更易维护和扩张。而且less既可以在客户端运行，也可以借助node.js在服务端运行。

## 为什么不使用原生css~而去使用less? ##

> 概叙1：如果在大型项目中，一个css代码量是上百或千行的，对某一个元素的样式修改，由于样式之间的关联表现的形式不够明确，代码量又繁多，一处修改牵扯到好几处相互关联的样式，怎么办？

## less编译工具： ##

> koala 官网：www.koala-app.com

## less中的注释： ##

> · 以//开头的注释，称：“行注释 ” 不会编译到css文件中，（程序员自己可见）  
> · 以/\*\*\*\*/ 包裹的注释，称：“块注释” 包裹的注释会被编译到css文件中；

## less的使用及特点 ##

1.第一种：less的嵌套使用（代码结构清晰、简洁，便于后期维护）

> 原生css写法:  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70]

> less预编译工具的写法：  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 1]

> 小结：从上例less的嵌套规则，我们可以知道less中使用花括号\{\}包裹另一个花括号\{\}，相对比原生的写法（上图一）就是空格的功能，其次就是代码看起来比较直观（相互的层级关系）；记住：less只是一个预编译代码工具，最终编译后的代码仍旧是原生css！

> 对上面的扩展：  
> 现在一个场景：需要在鼠标移到inner对应的元素上面后~改变元素的样式；  
> **原生css的写法：**\#wrap inner:hover\{ 样式… \}  
> **less预编译的写法：**（这里的符号&，代表\#wrap .inner；而为什么这里使用&符号，是因为上文提到的，less中的嵌套使用的花括号\{\}包裹，会产生一个空格，这个符号在这里~就是充当去空格功能！）  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 2]

2.第二种：less定义变量使用

> less定义变量（属性值定义成变量形式，减少重复代码、便于代码复用）  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 3]

> less中的变量，都是延迟加载，（如图：.brass\{\}执行到2结束后，1才会有值）  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 4]

3.第三种：less中的混合使用（混合就是将一系列属性从一个规则引入到另一个规则集的方式）

> 1普通混合  
> 2不带输出的混合  
> 3带参数的混合  
> 4.带参数的并且有默认值的混合  
> 5带多个参数的混合  
> 6.命名参数  
> 7.匹配模式  
> 8arguments变量

4.less运算（在less中可以进行加减乘除的运算）

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70]: /images/20220829/4854cc8809c446a0981bf9ca166567c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 1]: /images/20220829/99e3ad3e1dcb4fa8ba227f56fa235024.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 2]: /images/20220829/917e05ebe5cb4861a20739d6ba4b493f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 3]: /images/20220829/8788f631a8dd4728a043fe36e0c8530e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTMwMDk0_size_16_color_FFFFFF_t_70 4]: /images/20220829/26862bf07f5c40f9b6db23567943d0d2.png