less的基础介绍
LESS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性更方便CSS的编写和维护。
LESS的基本语法和CSS的语法是基本相同的,但是,与CSS相比,更加的灵活、简便。而且能够快速的编译成CSS代码,便于使用。
注释
在LESS当中,允许有两种注释书写的方法,标准的CSS注释/* 注释内容 */,以及类似于JS的单行注释// 注释内容。
两种注释的区别在于,使用标准的CSS注释,不仅能够使用,也能够最终正确输出。
变量
在LESS中声明变量是通过@去声明变量。变量允许我们单独定义一系列通用的样式,然后在需要的时候去调用。
源代码如下:
在LESS文件test.less中的代码:
@color : #3E4F6A;
.box{
width: 100px;
height: 100px;
margin: 100px auto;
border:1px solid #333333;
background-color: @color;
}
以上代码自定义了一个color的变量,在需要用到的时候直接调用即可。
编译后的test.css代码为:
.box {
width: 100px;
height: 100px;
margin: 100px auto;
border: 1px solid #333333;
background-color: #3E4F6A;
}
嵌套
可以在一个选择器中嵌套另一个选择器来实现继承,这样很大程度减少了代码量,并且代码看起来更加的清晰。
.box{
width: 100px;
height: 100px;
margin: 100px auto;
border:1px solid #333333;
background-color: @color;
p{
font-size: 20px;
color: #fff;
text-align: center;
}
}
编译后的CSS代码如下:
.box {
width: 100px;
height: 100px;
margin: 100px auto;
border: 1px solid #333333;
background-color: #3E4F6A;
}
.box p {
font-size: 20px;
color: #fff;
text-align: center;
}