less基本语法
less的基本语法
目录
1.less注释语法
1.1 //单行注释
1.2 /**/多行注释
2.变量
2.1普通变量
2.2 在字符串中使用变量
2.3 选择器使用变量
2.4 属性变量
2.5 导入其他的less
2.6 变量的作用域
2.7 变量的运算
Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。因为 Less 和 CSS 非常像，因此很容易学习。而且 Less 仅对 CSS 语言增加了少许方便的扩展，这就是 Less 如此易学的原因之一。
1.less注释语法 1.1 //单行注释// 这种代码注释css并不识别,编译后会影藏,不会显示在css文件中
1.2 /**/多行注释/**/这种注释是css的注释,编译以后,会保留显示在css文件中
2.变量在less 中,可以使用变量,来统一设置一类可以重复使用的值,方便后期CSS代码维护
2.1普通变量在less中使用@关键字来定义变量,基本语法是
@变量名:变量值
注:变量值一定要符合css变量值
示例:
//定义变量
@bgcolor:#58a;
//使用变量
span {
color:@bgcolor;
font-size:24px;
}
2.2 在字符串中使用变量
如果出现变量名和字符串一起拼接,则使用以下语法:
"@{变量名}字符串"
示例:
//定义变量
@images: "../img";
div{
background:url("@{images}/1.png")
}
2.3 选择器使用变量
语法 @{变量名} {
}
案例
@why:.box;
{@why} {
width:100px;
height:100px;
}
2.4 属性变量
语法 选择器 {
@{变量名}:变量值
}
示例:
//定义变量
@cr:color;
//使用变量
.box {
@{cr}:skyblue;
}
2.5 导入其他的less
语法:@变量名: 地址;
@import "@{变量名}";
示例:
@src:'./header/inex.less'
@import"@{src}"
//这段代码就是将其他的less引入到自己的less中,并最终编译成css.
2.6 变量的作用域
less中变量的作用域可以按照js中的作用域来理解,每个css样式的{}都是一个独立的作用域.
示例:
@color: red;
.wrap{
color:@color; // .wrap自己作用于内没有color变量,所以用上一次作用域重点变量
}
.box{
@color: skyblue;
color:@color; // 因为.box自己作用于中有同名变量,就会先用自己作用于内变量的值
}
2.7 变量的运算
变量还可以参与运算,示例如下:
@width: 300px;
.box{
width:@width - 100;
height:@width;
background: skyblue;
}
感兴趣可以去这里(less官网看看哦)
作者：lhrdlp
