Less的使用

左手的ㄟ右手 2023-07-03 07:16 12阅读 0赞

## 1.定义 ##

> Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。

## 2.安装 ##

安装好node后，使用命令npm install -g less安装，安装成功后通过lessc -v查看less的版本号

## 3.语法 ##

@变量名:值  
比如

/*错误的变量命名：数字开头、特殊字符、*/
    /*变量名区分大小写*/
    @font12px:12px;
    @color:blue;
    body{ 
    	font-size:@font12px;
    	color:@color;
    }

## 4.编译 ##

less文件无法直接通过link引用，需要把less文件编译成css文件  
把my.less文件编译成my.css文件  
通过lessc my.less my.css

## 5.less的嵌套 ##

**(1)普通情况**  
html文件

less文件

.header{ 
      width: 200px;
      height: 200px;
      background-color: pink; a{ 
        color: #4D99ED;
      }
    }

less文件编译生成的css文件

.header { 
      width: 200px;
      height: 200px;
      background-color: pink;
    }
    .header a { 
      color: #4D99ED;
    }

**(2）伪类选择器**

.header{ 
      width: 200px;
      height: 200px;
      color: pink; a{ 
        color: #00FF00; &:link{ 
          color: #FF0000;
        }
        &:visited{ 
          color: #00FF00;
        }
        &:hover{ 
          color: #FF00FF;
        }
        &:active{ 
          color: #0000FF;
        }
        &::after{ 
          content: "11111";
          color: #ff6cc9;
    
        }
    
      }
    
    }

## 6.less的运算 ##

支持加减乘除运算，可以加括号

运算符左右两侧必须都有一个空格隔开  
两个数参与运算，如果一个数有单位，则结果的单位以这一个数的单位为准  
两个数参与运算，如果两个数有单位，则结果的单位以第一个数的单位为准

less代码

@border:5px + 5;
    @baseFont:50px;
    @num:50;
    html { 
      font-size: @baseFont;
    }
    /*运算符左右两侧必须都有一个空格隔开*/
    /*两个数参与运算，如果一个数有单位，则结果的单位以这一个数的单位为准*/
    /*两个数参与运算，如果两个数有单位，则结果的单位以第一个数的单位为准*/
    div{ 
      width: 900px - 50;
      height: (200px + 50px) * 2;
      border: @border solid blue;
      background-color: #666 - #444; img{ 
        width: 372rem /  @baseFont;
        height: 372rem / @baseFont;
      }
    
    }