less基础学习

 

less中文网 

 

编译工具，可以使用vs code中的easy less插件，会自动编译

生成的css文件默认跟less文件在同一目录   参考此博文https://blog.youkuaiyun.com/mcYang0929/article/details/81703050

 

• 声明变量，易于维护

 

• 混合语法，可以复用样式

编译后的css文件

 

• 带参数混合语法，复用样式的同时可以方便拓展

 

混合语法，参数默认带值

 

• 匹配模式

 

• 默认带上的样式标识“@_”

 

使用

 

• 嵌套语法

直接在父标签样式中书写子标签样式的内容，less编译后会自动帮我们生成嵌套定义的样式

 

使用&符号可跳到上一层样式，可使用此方法写伪类样式，在a内部使用&即跳到a标签，然后定义伪类即可。

 

less中伪元素的书写与伪类一样，使用嵌套语法

 

less文件

@charset 'utf-8';

@Height:300px;


//参数中可添加默认值，不添加默认值则直接传入参数变量即可，注意，多个参数之间用逗号连接，如果参数没有添加默认值，则必须传入参数
.container(@Width:200px){
    background-color: gray;
    width: @Width;
    height: @Height;
} 

.useContainer{
    //双斜杠注释，不编译显示在css文件中
    /*显示在css文件中的注释*/

    //混合语法，在样式中调用样式，也可通过此语法来调用需要传参的样式（在html中无法调用需要传参的样式，使用此方式间接调用）
    //带参数的混合语法，既方便了样式的复用，又能拓展原有的样式
    .container();//默认为width  200px
    .container(100px);//覆盖，显示为width   100px
}


//匹配模式
.setBorder(top,@Width:2px,@Color:red){
    border-top: @Width solid @Color
}

.setBorder(bottom,@Width:2px,@Color:red){
    border-bottom: @Width solid @Color
}

//匹配模式中默认会带上的样式
.setBorder(@_,@Width:2px,@Color:red,@backgroundColor:yellow){
    //允许在默认带上的样式中传入新的参数，但是只能有默认值的参数，因为无法在调用的时候传入与上面匹配模式不同的参数
    //即要满足默认带上的样式要与匹配模式中的样式一致，且多余的参数需要带默认值
    width: 100px;
    height: 100px;
    background-color: @backgroundColor;
}

.useTopBorder{
    .setBorder(top,10px,red);//使用匹配模式找到对应的样式
}

.father{
    h3{
        color: red;
        font-size: 20px;


    }
    span{
        color: yellow;
        font-size: 14px;
    }
}

编译后的css文件

@charset 'utf-8';
.useContainer {
  /*显示在css文件中的注释*/
  width: 200px;
  background-color: gray;
  width: 100px;
  height: 300px;
}
.useTopBorder {
  border-top: 10px solid red;
  width: 100px;
  height: 100px;
  background-color: yellow;
}
.father h3 {
  color: red;
  font-size: 20px;
}
.father span {
  color: yellow;
  font-size: 14px;
}

参考链接：less语法总结