less必知必会

小鱼儿 2022-12-28 08:26 238阅读 0赞

## Less 插件 ##

Less 编译 vocode Less 插件；Easy LESS 插件用来把less文件编译为css文件

安装完毕插件，重新加载下 vscode。只要保存一下Less文件，会自动生成CSS文件。

## less官方文档 ##

[less的中文官网][less]

[bootstrap中less教程][bootstrap_less]

## 维护css弊端 ##

CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。

*  CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度是比较高的。
 *  不方便维护及扩展，不利于复用。
 *  CSS 没有很好的计算能力
 *  非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码项目

## Less 介绍 ##

概念：less是一种动态样式语言，属于css预处理器的范畴，它扩展了css语言，增加了变量、Mixin、函数等特性，使css更易维护和扩展。

> 常见的CSS预处理器：Sass、Less、Stylus

less 中使用calc 的时候注意

height: ~'calc(100vh - 90rpx)';

less既可以在客户端上运行，也可以借助Node.js在服务端运行。

npm install -g less

检查是否安装成功，使用cmd命令“ lessc -v ”查看版本即可

### 1. less中的注释 ###

以//开头的注释，不会被编译到css文件中
    以/**/包裹的注释会被编译到css文件中

### 2. less中的变量 ###

> 变量是指没有固定的值，可以改变的。因为我们CSS中的一些颜色和数值等经常使用。

1.  作为普通属性值只来使用：@变量名:值;
    
     *  必须有@为前缀
     *  不能包含特殊字符
     *  不能以数字开头
     *  大小写敏感

@color: pink;
    div { 
    	background: @color;
    }

1.  作为选择器和属性名：\#@\{selector的值\}的形式 ( **不常用** )

@m: margin;
    div { 
        @{ m}: 10px;
    }
    
    @span: span;
    @{ span}{ 
       font-size: 12px;
    }

1.  作为URL：@\{url\}

1.  变量的延迟加载

@var: 0;
    .class: { 
    	@var: 1;
        .bras { 
            @var: 2;
            three: @var;
            @var: 3;
        }
        one: @var;
    }
    ........................编译结果： .class { 
        one: 1;
    }
    .class .bras { 
        three: 3;
    }
    ........................解析： 首先在less里面的变量，都是在块级作用域里面的（一个{ }代表一个作用域）
    因为在less里面变量都是延迟加载的，它会等作用域里面的内容解析完毕，然后加载变量。
    所以 three: 3;

### 3. less中的嵌套规则 ###

1.  基本嵌套规则
2.  如果遇见 （交集|伪类|伪元素选择器） ，利用&进行连接；&的使用 ( \*\*&代表平级 \*\*)

div{ 
    	background: red; span{ 
    		background: blue; &:hover{ 
    			background: pink;
    		}
    	}
    }
    ................编译结果： div { 
    	background: red;
    }
    div span { 
    	background: blue;
    }
    div span:hover { 
    	background: pink;
    }

### 4 less中的混合 ###

混合就是将一系列属性从一个规则集引入到另一个规则集的方式

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

> 普通混合，缺点：会编译到原生css里面，会使原生css文件变得很大！

.positions { 
    	position: fixed;
    	top: 0;
    	left: 0;
    }
    
    .box { 
    	width: 100px;
    	height: 100px; .box1 { 
    		.positions;
    		width: 10px;
    		height: 10px;
    	}
    	.box2 { 
    		.positions;
    		width: 20px;
    		height: 20px;
    	}
    }
    ......................编译结果： .positions { 
    	position: fixed;
    	top: 0;
    	left: 0;
    }
    .box { 
    	width: 100px;
    	height: 100px;
    }
    .box .box1 { 
    	position: fixed;
    	top: 0;
    	left: 0;
    	width: 10px;
    	height: 10px;
    }
    	
    .box .box2 { 
    	position: fixed;
    	top: 0;
    	left: 0;
    	width: 20px;
    	height: 20px;
    }

*  不带输出的混合（编译结果：里面不再输出 .positions里面的样式）

.positions() { 
    	position: fixed;
    	top: 0;
    	left: 0;
    }
    
    .box { 
    	width: 100px;
    	height: 100px; .box1 { 
    		.positions;
    		width: 10px;
    		height: 10px;
    	}
    	.box2 { 
    		.positions;
    		width: 20px;
    		height: 20px;
    	}
    }
    ......................编译结果： .box { 
    	width: 100px;
    	height: 100px;
    }
    .box .box1 { 
    	position: fixed;
    	top: 0;
    	left: 0;
    	width: 10px;
    	height: 10px;
    }
    	
    .box .box2 { 
    	position: fixed;
    	top: 0;
    	left: 0;
    	width: 20px;
    	height: 20px;
    }

*  带参数的混合

.juzhong(@w,@h,@c) { 
    	width: @w;
    	height: @h;
    	background: @c;
    }
    
    .box { 
    	width: 100px;
    	height: 100px; .box1 { 
    		.juzhong(100px,100px,pink);
    		font-size: 18px;
    	}
    	.box2 { 
    		.juzhong(200px,200px,blue);
    		font-size: 16px;
    	}
    }
    ......................编译结果： .box { 
    	width: 100px;
    	height: 100px;
    }
    .box .box1 { 
    	font-size: 18px;
    	width: 100px;
    	height: 100px;
    	background: pink;
    }
    	
    .box .box2 { 
    	font-size: 16px;
    	width: 200px;
    	height: 200px;
    	background: blue;
    }

*  带参数并且有默认值的混合 或者 带多个参数的混合

.juzhong(@w:10px,@h:10px,@c:blue) { 
    	width: @w;
    	height: @h;
    	background: @c;
    }
    
    .box { 
    	width: 100px;
    	height: 100px; .box1 { 
    		.juzhong(100px,100px,pink);
    		font-size: 18px;
    	}
    	.box2 { 
    		.juzhong();
    		font-size: 16px;
    	}
    }
    ......................编译结果： .box { 
    	width: 100px;
    	height: 100px;
    }
    .box .box1 { 
    	font-size: 18px;
    	width: 100px;
    	height: 100px;
    	background: pink;
    }
    	
    .box .box2 { 
    	font-size: 16px;
    	width: 10px;
    	height: 10px;
    	background: blue;
    }

*  命名参数

.juzhong(@w:10px,@h:10px,@c:blue) { 
    	width: @w;
    	height: @h;
    	background: @c;
    }
    
    .box { 
    	width: 100px;
    	height: 100px; .box1 { 
    		.juzhong(@c:orange);
    		font-size: 18px;
    	}
    	.box2 { 
    		.juzhong();
    		font-size: 16px;
    	}
    }
    ......................编译结果： .box { 
    	width: 100px;
    	height: 100px;
    }
    .box .box1 { 
    	font-size: 18px;
    	width: 10px;
    	height: 10px;
    	background: orange;
    }
    	
    .box .box2 { 
    	font-size: 16px;
    	width: 10px;
    	height: 10px;
    	background: blue;
    }

*  匹配模式 （以三角形为例）

新建 triangle.less文件：
    // 这里的 @w,@c 是自定义的
    .triangle(@_,@w,@c){    
        width: 0px;
        height: 0px;
        overflow: hidden;
    }
    
    .triangle(left,@w,@c) { 
        border-width: @w;
        border-style: dashed solid dashed dashed;
        border-color: transparent @c transparent transparent;
    }
    
    .triangle(right,@w,@c) { 
        border-width: @w;
        border-style: dashed dashed dashed solid;
        border-color: transparent transparent transparent @c;
    }
    
    .triangle(top,@w,@c) { 
        border-width: @w;
        border-style: dashed dashed solid dashed;
        border-color: transparent transparent @c transparent;
    }
    
    .triangle(bottom,@w,@c) { 
        border-width: @w;
        border-style: solid dashed dashed dashed;
        border-color: @c transparent transparent transparent;
    }

新建 index.less文件:
    
    @import './triangle.less';
    
    #wrap .jsx { 
       .triangle(left,40px,blue)
    }

*  arguments变量（**不常用**）

.border(@1,@2,@3) { 
        border: @arguments;
    }
    
    #wrap .jsx { 
       .border(1px,solid,pink)
    }

> 扩展：

### 5. less中的运算 ###

任何数字、颜色或者变量都可以参与运算。就是Less提供了加（+）、减（-）、乘（\*）、除（/）算术运算。

/*Less 里面写*/
    @witdh: 10px + 5;
    div { 
        border: @witdh solid red;
    }
    /*生成的css*/
    div { 
      border: 15px solid red;
    }
    /*Less 甚至还可以这样 */
    width: (@width + 5) * 2;

*  乘号（\*）和除号（/）的写法
 *  运算符中间左右有个空格隔开 1px + 5
 *  对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
 *  ###### 如果两个值之间只有一个值有单位，则运算结果就取该单位 ######

### 6. less继承 ###

> 性能比混合高，灵活度比混合低

> 新建mixin文件夹 / juzhong.less

.juzhong{ 
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }
    
    .juzhong:hover { 
        background: red!important;
    }

index.less文件中: * { 
        margin: 0;
        padding: 0;
    }
    
    @import './mixin/juzhong.less';
    
    #wrap { 
       position: relative;
       width: 300px;
       height: 300px;
       border: 1px solid;
       margin: 0 auto; .inner { 
           &:extend(.juzhong all); &:nth-child(1) { 
               width: 100px;
               height: 100px;
               background: pink;
           }
           &:nth-child(2) { 
            width: 50px;
            height: 50px;
            background: deeppink;
        }
       }
    }

### 7. less避免编译 ###

> 让浏览器去计算：calc() 函数用于动态计算长度值

* { 
        margin: 100 - 20px;
        padding: ~"calc(100px + 20)"
    }

#  #

[less]: http://lesscss.cn/
[bootstrap_less]: http://www.bootcss.com/p/lesscss