less预编译使用

Less 是一门 CSS 预处理语言，通过工具可以编译成CSS，它扩展了 CSS 语言，增加了嵌套、变量、Mixin混合、函数、继承等特性，Less可以帮助我们更好地组织CSS代码，提高代码复用率和可维护性。

1.webpack(四) 处理less

1.1 npm安装

处理普通的.css 文件，需要安装 css-loader,style-loader、.less 文件，需要安装 less-loader。

在项目中，我们会遇到 不同浏览器，前缀不同。比如 display: flex ，在IE以及谷歌下前缀是不同的，这时候，我们需要 postcss 这样的插件。

npm install css-loader -D
npm install style-loader -D
npm install less-loader -D
npm install postcss-loader -D
npm install autoprefixer -D

1.2 webpack.config.js 中 加入相关配置代码

rules部分配置

rules: [{
      test: '/.(less)$/',
      use: [{
          loader: 'style-loader'
        },
        {
          loader: 'postcss-loader',
          options: {
            sourceMap: true
          }
        },
        {
          loader: 'less-loader',
          options: {
            sourceMap: true
          }
        },
      ]
    }]

2. Less注释

注释的适当使用可以保证代码的可读性，Less 支持两种类型的注释：多行注释和单行注释。 您可以在代码中使用块注释和行内注释，但是当编译LESS代码时，单行注释不会显示在CSS文件中。

3. Less变量（变量概述、变量插值、变量名、延迟加载）

@ 符号定义变量。 变量分配使用冒号(:)完成。

使用less变量

S.N.	说明	使用描述
1	变量概述	通常看到多次重复相同的值，并且可以通过使用变量来避免。
2	变量插值	这些变量也可以用于其他位置，例如选择器名称，属性名称， URL 和 @import 语句。如 @selector：h2;@(selector){background: #2ECCFA;}
3	变量名	我们可以定义变量名称由一个值组成的变量
4	延迟加载	在延迟加载中，即使它们尚未声明，也可以使用变量。

代码示例

// 变量概述
@color1: #ca428b;
.div1{
  background-color : @color1;
}
.div2{
  background-color : @color1;
}

// 变量插值
@selector: h2;

@{selector} {
  background: #2ECCFA;
}

// 变量名
.myclass {
  @col: #ca428b;
  @color: "col";
  background-color: @@color;
}

// 延迟加载
p {
  font-size: @a;
  color: #ca428b;
}
@a: @b;
@b: 25px;

4. 变量作用域

变量是有作用域的，可以调用父级作用域的变量，但是同级作用域的变量不可以被调用并且符合就近原则

5. 运算

LESS支持一些算术运算，例如加号(+)，减号( - )，乘法(*)和除法(/)，它们可以对任何数字，颜色或变量进行操作。 操作节省了大量的时间，当你使用变量，让感到就像是简单的数学工作。

代码示例

//声明变量
@bgColor: hsl(324, 0, 0); //使用颜色函数定义颜色，hsl(): 它根据色调，饱和度和亮度值生成颜色。
@fontcolor: hsl(324, 78%, 58%); 
@fontFamily: sans-serif;

html {
  box-sizing: border-box;
  font-family: @fontFamily;
  color: @fontcolor;
  background: @bgColor;
}

//变量的运算
.title {
  height: @size*1.7; 
  margin: @size*1 @size*.2;
  overflow: hidden;
  font-size: @size*1.6;
  line-height: @size*1.7;
  text-overflow: ellipsis;
  white-space: nowrap;
}

//变量的作用域
.section {
  @p-size：10%;
  
  .subtitle {
    @size: 10px;
  }
  
  .content {
    width: @p-size*8; //@p-size 变量声明在父级作用域中，可以调用到此变量
    margin: @size auto; //@size 变量声明在兄弟作用域中，调用不到此变量
  }
}

6. 混合模式

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

表格整理

S.N.	说明	使用描述
1	不输出mixins	可以创建一个mixin，它可以通过简单地放置括号后在输出中消失。
2	Mixins中的选择器	mixins不仅可以包含属性，还可以包含选择器。
3	Mixin命名空间	命名空间用于在通用名称下对mixin进行分组。 使用命名空间可以避免名称冲突，并从外部封装mixin组。
4	保护命名空间	当保护应用于命名空间时，它定义的mixins只有在保护条件返回真时才使用。
5	!important	！important 关键字用于覆盖特定属性。 当它在mixin调用之后放置时，它会将所有继承的属性标记为！important 。

代码示例

// 不输出混合
.box() {
  padding-left: 100px;
}
.wrap {
  background : #64d9c0;
  .box;
}
// Mixins不仅可以包含属性，还可以包含选择器
.mixin() {
  &:hover {
    background: #FFC0CB;
  }
}
div {
  .mixin();
}

// Mixin命名空间
#box() {
  background: red;
  .innerbox {
    color: blue;
  }
}
p {
  #box > .innerbox;
}

// 保护的命名空间
#namespace when (@color = blue) {
  .mixin() {
   color: red;
  }
}
p{
 #namespace .mixin();
}

// ！important 关键字
.mixin(){
  color: #900;
  background: #F7BE81;
}
.div1{
  .mixin();
}
.div2{
  .mixin() !important;
}

7. 匹配模式

您可以通过向其传递参数来更改mixin的行为。

8. arguments变量

当调用mixin时， @arguments 包括所有传递的参数。 当不想使用单个参数时， @arguments 变量很有用。

9. 嵌套规则

它是一组CSS属性，允许将一个类的属性用于另一个类，并且包含类名作为其属性。 在LESS中，可以使用类或id选择器以与CSS样式相同的方式声明mixin。 它可以存储多个值，并且可以在必要时在代码中重复使用。

ps: 父级元素可以用&代替，常用于伪类选择器，可以理解为父级名字的字符串用&表示

代码示例

//匹配模式
.match(top, @w: 10px, @c: red){
　　border-width: @w;
　　border-color: transparent transparent @c transparent;
}
.match(bottom, @w: 10px, @c: red){
　　border-width: @w;
　　border-color: @c transparent transparent transparent;
}
.match(left, @w: 10px, @c: red){
　　border-width: @w;
　　border-color: transparent @c transparent transparent;
}
.match(right, @w: 10px, @c: red){
　　border-width: @w;
　　border-color: transparent transparent transparent @c;
}
//@_表示，不管上下左右都带上这个固定的样式
.match(@_, @w: 10px, @c: red){
　　width: 0px;
　　height: 0px;
　　overflow: hidden;
　　border-style: solid;
}
#box-shadow {
  //混合参数过多时，使用@arguments变量很方便
  .box-shadow-small(@x: 0; @y: 0; @height: 3px; @width: 3px) {
    -webkit-box-shadow: @arguments;
    -moz-box-shadow: @arguments;
    box-shadow: @arguments;
  }
  
  .box-shadow-big(@x: 0; @y: 0; @height: 7px; @width: 7px) {
    -webkit-box-shadow: @arguments;
    -moz-box-shadow: @arguments;
    box-shadow: @arguments;
  }
}


.sanjiao{
    //使用匹配模式
　　.match(bottom)；
　　
　　//&代表父级 .sanjiao
　　&：hover {
　　	//使用嵌套规则
　　	#box-shadow > .box-shadow-small(2px; 2px);
　　}
}

10. 继承

extend：使用类与继承类内容一致

ps: 减少代码的重复性，extend与方法的最大区别就是extend是同一个选择器共用同一个声明，而方法是使用自己的声明

11. all

全局搜索替换，常与extend结合使用

代码示例

#main {
  width: 200px;
}
#main {
  &:after {
    content: "Less is good!";
  }
}
//extend与all结合使用
#wrap: extend(#main all) {}

12. 循环

Less的循环和混合的保护命名空间结合实现迭代达到循环的效果

代码示例

.cont(@count) when (@count > 0) {
  .cont((@count - 1));
  
  width: (25px * @count);
}

div {
  .cont(7);
}

13. 函数

Less集成了很多类别的函数如列表、数学、字符串和颜色等函数

常用函数类别

S.N.	说明	使用描述
1	数学函数	数学函数包括用于执行数字运算的方法，例如舍入，平方根，功率值，模数，百分比等。
2	字符串函数	Less支持一些字符串函数（逃逸、e、%格式、更换）
3	颜色函数	LESS提供了许多有用的颜色函数，以不同的方式改变和操作颜色。

常用数学函数

S.N.	说明	使用描述	使用示例
1	ceil	它将数字向上舍入为下一个最大整数。	ceil(0.7)
2	floor	它将数字向下取整为下一个最小整数。	floor(3.3)
3	percentage	它将浮点数转换为百分比字符串。	percentage(0.2)
4	round	它舍入浮点数。	round(3.77)
5	sqrt	它返回一个数字的平方根。	sqrt(25)
6	abs	它提供了数字的绝对值。	abs(30ft)
7	pi	它返回pi值。	pi()
8	max	它指定一个或多个参数的最小值。	max(70,30,45,20)
9	min	它指定一个或多个参数的最大值。	min(70,30,45,20)

常用的字符串的函数

S.N.	说明	使用描述	使用示例
1	Escape	它通过对特殊字符使用URL编码来对字符串或信息进行编码为16进制的字符。 您无法编码一些字符，例如，， / ，？ ， @ ，＆amp; ， + ，〜，！ ， $ ，'和您可以编码的一些字符，例如 \ ，#， > ^ ，(，)， {，} ，: >，＆gt; ，，] ， [和 = 。	escape("Hello!! welcome to Tutorialspoint!")
2	% format	此函数格式化一个字符串。 它可以写成以下格式:	format-a-d: %("myvalues: %a myfile: %d", 2 + 3, "mydir/less_demo.less");
3	replace	它用于替换字符串中的文本。 它使用一些参数：string :它搜索字符串并替换。pattern :它搜索正则表达式模式。replacement :它替换与模式匹配的字符串。flags :这些是可选的正则表达式标志。	replace("Welcome, val?", "val?", "to Tutorialspoint!");

常用的颜色函数

S.N.	说明	使用描述	使用示例
1	hsl()	它根据色调，饱和度和亮度值生成颜色。	hsl(90,80%,50%),20%)
2	saturate()	增加一定数值的颜色饱和度	c:saturate(hsl(90,80%,50%),20%);
3	desaturate()	降低一定数值的颜色饱和度	desaturate(hsl(90,80%,50%),20%);
4	lighten()	增加一定数值的颜色亮度	lighten(hsl(90,80%,50%),20%);
5	darken()	降低一定数值的颜色亮度	darken(hsl(90,80%,50%),20%);
6	fadein()	降低颜色的透明度（或增加不透明度），令其更不透明	hsla(90,80%,50%,50%);
7	fadeout()	增加颜色的透明度（或降低不透明的），令其更透明	fadein(hsla(90,80%,50%,50%),50%);
8	fade()	给颜色（包括不透明的颜色）设定一定数值的透明度	fadeout(hsla(90,80%,50%,50%),40%);
9	spin()	任意方向旋转颜色的色相角度（hue angle）	fade(hsl(90,80%,50%),40%);
10	mix()	根据比例混合两种颜色，包括计算不透明度	spin(hsl(0,90%,50%),360);
11	greyscale()	完全移除颜色的饱和度，与desaturate(@colo,100%)函数效果相同	greyscale(hsl(80, 90%, 20%));
12	contrast()	选着两种颜色相比较，得出那种颜色的对比度最大就倾向于对比度最大的颜色	contrast(hsl(90,100%,50%),#000000,#ffffff,100%)

代码示例

// 混合样式，用于hover时控件颜色加深
.active() {
   color: #ff9326;
   //调用darken函数使颜色加深
   background-color: darken(hsl(270, 38%, 78%), 20%);
}

// 列表样式
li {
  .list-nstyle();

  width: 100%/6;
  height: @height;
  border-radius: 10px;
  line-height: @height;
  text-align: center;
  white-space: nowrap;
  transition: all .4s linear;

  &:nth-child(1) {
    .active();
  }

  &:last-child {
    margin-right: 5px;
  }

  &:hover {
    .active();
  }
}