简述css预处理语言less

目录

• 简述less
• • less的简介
  • less安装
  • less的编译
  • less 的嵌套
  • less的变量
  • less的运算

简述less

less的简介

css是一门非程序式语言，没有变量，函数，scope（作用域）等概念，其冗余度高，不便于维护，为了解决这些问题我们引入了一门预处理语言less.

less(leaner style sheets)是一门css的扩展语言，也可称为css预处理器，在保留原css的基础上加入了变量，函数，运算，Mixin(混入)，降低了维护成本，增加了书写的简洁度。

less安装

主要通过nodejs安装

1. 安装nodejs nodejs下载地址
2. 检查nodejs是否安装成功,利用win+r打开终端输入cmd命定，在终端中输入node -v

   

3. 基于nodejs安装less,使用win+r打开终端输入cmd命令，在终端中输入"npm install -g less"。

   

4. 检查less是否安装成功 在终端中输入命令“lessc -v”

   

less的编译

1.在vscode中装Easy less插件（这里装插件方式不赘述）

2.将less文件ctrl+s保存后会自动生成同名css文件将其引入html文件即可

less 的嵌套

在les中支持将子元素写在父元素中，这样更加利于代码的层次逻辑化，保存后css会自动解析为css代码。

less代码

.header{
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    margin: 0 auto;
    //a就为.header的子元素
    a{
        color: bisque;
        text-decoration: none;
    }
}
           

css代码

.header {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  margin: 0 auto;
}
.header a {
  color: bisque;
  text-decoration: none;
}
           

• 当我们使用伪元素选择器/伪类选择器/交集选择器时，要在属性名前加&，再添加伪类/伪元素/交集选择器。
• 若内层属性名前无“&”将会解析成后代选择器。
• 若有“&将会解析成父元素自身或者父元素的伪类。

less代码

.header{
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    margin: 0 auto;
    //a就为.header的子元素
    a{
        color: bisque;
        text-decoration: none;
        &:hover{
            color: black;
        }
    }
}
           

css代码

.header {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  margin: 0 auto;
}
.header a {
  color: bisque;
  text-decoration: none;
}
.header a:hover {
  color: black;
}
           

less的变量

当在一个页面中一种元素值被使用多次时，为方便修改书写我们便需要引入变量。

语法

• @变量名：值；

变量名书写规范

• 以@开头
• 大小写敏感
• 不能以数字开头
• 不能包含特殊字符

// 变量的使用
// 书写格式：@变量名:值;
// 例：
@color:pink;//设置了一个变量名为color的变量值为粉色
body{
    background-color: @color;
    //将body 的背景颜色改为粉色
}
div{
    color: @color;
    //将div中的字改为粉色
}
//使用变量有利与代码的维护和修改可以一次性更改元素的多个相同值
           

less的运算

任何的数字，颜色，变量都可以参加运算，运算符包括加（+），减（-），乘（*） 除（/）

注意：

• 运算符左右需要空格。
• 两个数运算若只有一个有单位则最后单位便以这个为准。

• 若两个数运算两个都有单位且单位不同则取前面一个单位为最终结果的单位。

  less代码

@BaseFont:50px;
.box{
    width: 50+50px;
    height: 25px*3;
    img{
        height: 82rem/@BaseFont;//这里@BaseFont变量的单位为px
        width: 82rem/@BaseFont;
    }
}
           

css代码

.box {
  width: 100px;
  height: 75px;
}
.box img {
  height: 1.64rem;
  width: 1.64rem;
}