CSS预处理——LESS

Posted 2022-09-02 v587chinese

LESS是什么？

less是一门CSS预处理语言。由于CSS本身并不是程序式语言，不方便维护和扩展，没有变量、函数、作用域等概念。而LESS在CSS的基础语法之上，引入了变量、Mixin混入、运算以及函数等功能，大大简化了CSS的编写，降低了CSS的维护成本。
本质上，LESS包含一套自定义的语法及一个解析器，写好的LESS文件会通过解析器编译生成CSS文件。LESS并没有建材CSS原有的特性，更不是用来取代CSS的，而是在现有的语法基础上，为CSS加入程序式语言的功能特性。所以，标准的CSS文件直接改成.less格式，LESS编译器可以完全识别。

使用

1.标签引入。

link标签rel属性值一定要为stylesheet/less

<link rel="stylesheet/less" href="style.less">
<script src="less.min.js"></script>

2.命令行使用npm安装

npm install -g less
编译：
lessc style.less style.css
编译并压缩文件：
lessc --clean-css styles.less styles.min.css

3.前端服务热调试（webpack）

需要配置webpack，webpack会帮你编译less文件，可以在js中Import进.less文件，像使用css那样使用less

4.在js中调用编译器调试

var less = require(‘less‘);
less.render(‘.myclass  width: (1 + 1) ‘, function (e, output) 
    console.log(output.css); // 输出 .myclass width:2
);

语法规则

变量

这里的变量指的是常量，只能定义一次。以@开头定义，使用时也要键入@

1.值变量

@color: #5B83AD;
@bgColor: @color + #111;
@width: 300px;
#wrap 
    color: @color;
    width: @width-20;
    height: @width-20*5;
    margin: (@width-20)*5;
    background: @bgColor;

生成后的CSS：

#wrap 
    color: #999;
    width: 50%;
    background: #6c94be;

2.选择器变量

让选择器变成动态的变量，使用时必须将变量名用花括号括起来

@mySelector: #wrap;
@Wrap: wrap;
@mySelector //变量名 必须使用大括号包裹
    color: #999;
    width: 50%;

.@Wrap
    color:#ccc;

#@Wrap
    color:#666;

生成的CSS：

#wrap
    color: #999;
    width: 50%;

.wrap
    color:#ccc;

#wrap
    color:#666;

3.属性变量

将某CSS属性名当做变量，与选择器变量一样，使用时需要

@borderStyle: border-style;
@Solid: solid;
#wrap
    @borderStyle: @Solid;//变量名 必须使用大括号包裹

编译后：

#wrap
    border-style:solid;

4.url变量

@images: "../img";  //需要加引号
body 
    background: url("@images/dog.png"); //变量名 必须使用大括号包裹

编译后：

body 
    background: url("../img/dog.png");

5.声明规则集(作用类似于混入)

声明：@name:属性:值;
使用：@name();

@background: background:red;;
#main
    @background();

@Rules:
    width: 200px;
    height: 200px;
    border: solid 1px red;
;
#con
    @Rules();

编译后：

#main
    background:red;

#con
    width: 200px;
    height: 200px;
    border: solid 1px red;

6.变量的作用域

就近原则，与大多数编程语言的原则一样

@var: @a;
@a: 100%;
#wrap 
    width: @var;
    @a: 9%;

编译后：

#wrap 
    width: 9%;

嵌套

&符：代表父选择器的名字

.boring 
    display: inline-block;
    &::after
        content:"Hello Less";
    
    .class 
        width: 100%;
    
    &>.text
        height: 10px;
    

编译后：

.boring
    display: inline-block;

.boring::after
    content: "Hello Less";

.boring .class
    width: 100%;

.boring>.text
    height: 10px;

混入（Mixin）

 混入就是将一组CSS属性整体包含入另一个css类中去。提高复用性

1.无参数混入

.bordered 
    &:hover 
        color: red;
    
    border-top: dotted 1px black;
    border-bottom: solid 2px black;

.card 
    background: #f6f6f6;
    .bordered; // .bordered()两种写法等价

编译后：

.bordered 
    border-top: dotted 1px black;
    border-bottom: solid 2px black;

.bordered:hover 
    color: red;

.card 
    background: #f6f6f6;
    border-top: dotted 1px black;
    border-bottom: solid 2px black;

.card:hover 
    color: red;

2.不输出Mixin

如果只是想创建一个mixin，并不想单独输出，可以这样用

.bordered()
    &:hover 
        color: red;
    
    border-top: dotted 1px black;
    border-bottom: solid 2px black;

.card 
    background: #f6f6f6;
    .bordered; // .bordered()两种写法等价

编译后：

.card 
    background: #f6f6f6;
    border-top: dotted 1px black;
    border-bottom: solid 2px black;

.card:hover 
    color: red;

3.有参数混入

注意的点：① 默认参数  ② 命名参数  ③ @arguments  ④ @rest

.border-radius(@radius) 
    border-radius: @radius;

.border(@a:10px, @b:50px, @c:30px, @color:#000) 
    border:solid 1px @color;
    box-shadow: @arguments; // 指代的是 全部参数

.bgColor(@color,@rest...)
    width: @rest; // @rest参数可以获得后面违背获取的值。
    background: @color;

#main 
    .border(0px,5px,30px,red);
    .border-radius(5px);

#main1 
    .border(@c: 20px,@color: red);

#main2 
    .border(10px);

#main3 
    .border;

4.模式匹配

和面向对象的多态很相似。当调用传参的时候，会根据参数进行匹配，找到匹配程度更高的，如果匹配程度相同，将全部选择，并存在样式覆盖。

.mixin(@color) 
    color-1: @color;

.mixin(@color; @padding: 2) 
    color-2: @color;
    padding-2: @padding;

.mixin(@color; @padding; @margin: 2) 
    color-3: @color;
    padding-3: @padding;
    margin: @margin @margin @margin @margin;

div 
    .mixin(#008000);

编译后：

div 
    color-1: #008000; // "color-1"这种写法对CSS来说是不合法的，在这里只是展示哪些属性被用上了
    color-2: #008000;
    padding-2: 2;

5.方法的命名空间

不能单独使用命名空间的方法，必须先引入命名空间，才能使用其中的方法。

#card()
    background: #723232;
    .d(@w:300px)
        width: @w;

        #a(@h:300px)
            height: @h;//可以使用上一层传进来的方法
            width: @w;
        
    

#wrap
    #card > .d > #a(100px); // 父元素不能加 括号

#main
    #card .d();

#con
    //不得单独使用命名空间的方法
    //.d() 如果前面没有引入命名空间 #card ，将会报错

    #card; // 等价于 #card();
    .d(20px); //必须先引入 #card

编译后：

#wrap
    height:100px;
    width:300px;

#main
    width:300px;

#con
    width:20px;

6.条件筛选

没有逻辑运算符与或非，但是有when not ,（逗号）分别相当于 && ! ||

比较运算符有： > >= = =< <。=代表的是等于。

#card
    // and 运算符 ，相当于 与运算 &&，必须条件全部符合才会执行
    .border(@width,@color,@style) when (@width>100px) and(@color=#999)
        border:@style @color @width;
    
    // not 运算符，相当于 非运算 !，条件为 不符合才会执行
    .background(@color) when not (@color>=#222)
        background:@color;
    
    // , 逗号分隔符：相当于 或运算 ||，只要有一个符合条件就会执行
    .font(@size:20px) when (@size>50px) , (@size<100px)
        font-size: @size;
    

#main
    #card>.border(200px,#999,solid);
    #card .background(#111);
    #card > .font(40px);

编译后：

#main
  border:solid #999 200px;
  background:#111;
  font-size:40px;

7.使用!important

.border
    border: solid 1px red;
    margin: 50px;

#main
    .border() !important;

编译后：

#main 
    border: solid 1px red !important;
    margin: 50px !important;

8.循环

less并没有提供for循环功能，但是可以借助when实现。

.loop(@counter) when (@counter > 0) 
    .loop((@counter - 1));    // next iteration
    width: (10px * @counter); // code for each iteration

div 
    .loop(5); // launch the loop

编译后：

div 
    width: 10px;
    width: 20px;
    width: 30px;
    width: 40px;
    width: 50px;

使用循环可以做成CSS网格类的示例：

.generate-columns(4);

.generate-columns(@n, @i: 1) when (@i =< @n) 
    .column-@i 
        width: (@i * 100% / @n);
    
    .generate-columns(@n, (@i + 1));

编译后：

.column-1 
    width: 25%;

.column-2 
    width: 50%;

.column-3 
    width: 75%;

.column-4 
    width: 100%;

9.属性拼接

CSS中有的属性值是空格隔开，有的是逗号隔开。

①逗号隔开，在LESS中使用 + 

.boxShadow() 
    box-shadow+: inset 0 0 10px #555;

.main 
    .boxShadow();
    box-shadow+: 0 0 20px black;

/* 生成后的 CSS */
.main 
    box-shadow: inset 0 0 10px #555, 0 0 20px black;

②空格隔开，在LESS中使用 +_ 

/* Less */
.Animation() 
    transform+_: scale(2);

.main 
    .Animation();
    transform+_: rotate(15deg);


/* 生成的 CSS */
.main 
    transform: scale(2) rotate(15deg);

继承

sadfasdfasdf