02.less语法

less

Less(Leaner Style Sheets的缩写) 是一门css扩展语言，也成为Css预处理器。它扩展了css的动态特性。

• 引入变量
• Mixin(混入)
• 运算
• 函数

less安装

1.安装node
node -v
2.sudo npm install -g less
lessc -v

less 变量

变量是指没有固定的值，可以改变的，因为css中的一些颜色和树枝等经常使用。

@变量名：值；
//定义一个粉色的变量
@color：pink；
//定义一个字体为14px的变量
@font14:14px;
body{
    background-color:@color;
}
div{
    color:@color;
    font-size:@font14;
}

less 编译

本质上，less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的css文件。

so,需要把less文件，编译生成css文件，html页面才能使用。

vscode 插件 easy less

less 嵌套

1.子元素的样式直接写到父元素里面就好了
#header{
    .logo{
        width:300px;
    }
}
2.伪类，交集，伪元素选择器(前面加 &）
a{
    color:red;
    &:hover{
        color:pink;
    }
}

less 运算

任何数字，颜色或者变量都可以参与运算，就是less提供了+ - * / 算数运算

@border:5px + 5;
div{
    width:200px;
    height:200px;
    border:@border solid red;
}