less预处理器

什么是 Less ？

Less 是一门CSS 预处理语言（不能直接渲染页面，要编译成css文件才可以），它是对css的扩充，增加了变量、函数、嵌套等功能，让网页开发中的css更容易维护，提高开发效率。

如何安装 less

命令行：npm i -g less

编译 less 文件的方法

1. 命令行方式
2. 使用 Koala 外部编译软件
3. Webstorm 内置 File Watch 功能

定义变量

1. 为什么使用变量？
   把重复使用的css属性值定义为变量，可以重复使用，方便后期css代码的维护。
2. 定义变量的语法：
   @变量名称：变量值（注意：变量的值一定要符合css属性值的规范）
3. 变量的使用：
   在css选择器中属性的名称：@变量
4. 注意事项：
   把文件路径定义为变量时，变量与字符串拼接时要使用 {} 把变量名包起来，比如：url("@{imgURL}bg.png")

混合

1. 什么是Mixins混合？
   简单理解就是函数，可以封装css代码，在别的选择器中调用，提高代码的重用性和可维护性。
2. 定义混合的语法：
   1）普通

   1
   2
   3
   .混合名称(){  
       //封装的css代码  
   }  
   

   2）带参数的混合

   1
   2
   3
   .混合名称(@参数名称:默认值){  
       //封装的css代码  
   }  
   

3. 如何调用混合？
   在选择器中直接通过 .混合名称() 调用，如有参数就加上参数 .混合名称(#fff, 18px, ...)

匹配模式

1. 匹配模式的含义：
   相当于定义相同的混合名称，根据分支的值决定执行哪个分支，但是有一个公共的分支（任何一个分支都会调用）。 @_ 表示匹配所有，通常用于定义公共部分。
2. 模式匹配的定义和使用形式：
   1）定义：

   1
   2
   3
   4
   5
   6
   7
   8
   9
   .fun(@_, @color){
       //任何分支都会执行的公共部分
   }
   .fun(f1, @color){
       //f1分支独有的代码
   }
   .fun(f2, @color){
       //f2分支独有的代码
   }
   

   2）使用：

   1
   2
   3
   4
   h1{
       .fun(f2, #fffff);
       //h1选择器编译后的代码包含公共部分和f2分支的代码
   }
   

颜色函数

色彩三要素：色相（颜色的名称）、饱和度（鲜艳程度）、明度（亮度）。

1
2
3
4
5
6
7
8
9
10
11
//--------------------亮度------------------------
lighten(@color, 10%);  /*比@color 亮10%的颜色*/
darken(@color, 10%);  /*比@color 暗10%的颜色*/
//--------------------饱和度------------------------
saturate(@color, 10%);  /*比@color 浓10%的颜色*/
desaturate(@color, 10%);  /*比@color 淡10%的颜色*/
//--------------------色相------------------------
spin(@color, -10);  /*色相值增加10*/
spin(@color, -10);  /*色相值减少10*/

mix(@color1, @color2)  /*混合两种颜色*/

嵌套

1. 什么是嵌套？
   具有层级关系的css样式，css的层级最终是有html的结构决定的。
2. 嵌套用在哪里？
   用在具有后代关系和父子关系的选择器中。使用了嵌套很大程度上减少了代码量，并且代码结构看起来更加清晰。
3. 使用 $ 符号代表的上一层选择器的名字。

运算符

1. 作用：可以对角度，颜色，宽度，高度等进行运算。
2. 运算符的分类：+、 -、 /、 *

• Previous
  正则表达式
• Next
  git命令