02.移动web-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:82 / 50rem; height:200px; border:@border solid red; } ```