//lesscss基础语法
//声明编码格式
@charset "UTF-8";
//定义变量
@color:#333;
@classBox:box;
//调用
a{
color: @color;
}
.@{classBox}{
color: @color;
}
//Minxin
//类混入
//定义类
.boxs{
height: 50px;
}
//调用
.h{
.boxs();
}
//函数混入
//定义函数
.w50(){
//没有带参数的函数
width: 50%;
}
//函数调用
.w{
.w50();
}
//带参数函数
//没有设置默认值
.f(@direction){//定义了参数必须传参(没有默认值)，调用必须传参
float: @direction;
}
//调用
.f_left{
.f(left);
}
//带有默认值
.fr(@dir:right){ //带有默认值可以不传参
float: @dir;
}
//调用
.f_right{
.f();
}
//嵌套
.app{
display: block;
img{
display: none;
}
//需要连接的情况加 & 符号
&:hover{
img{
display: block;
}
}
&::before{//伪元素也一样
content: "";
}
> div{//后代选择器
display: block;
}
}
//导入 Import样式（.less | .css 可以省略）
@import "demo1";
@import "demo2";
@import "demo3";
//函数(内置函数，运算)
//运算
@num:5;
ul {
width: 100% * num;//500%
li{
width: 10% / num;//20%
color: red + yellow + blue;//#ffffff
//内置函数
border-color: lighten(red,20%); //亮度添加10%
}
}
Lesscss基础语法
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
