Less是什么
Less是一种动态的样式语言,Less扩展了CSS的动态行为,比如说,设置变量(variables)、混合书写模式(mixins)、操作(operations)和功能(functions)等等,而且Less使用了现有的CSS语法。
疑问:将less转换成CSS需要配置什么?
Less有什么用呢?,直接看下面
变量
注意:在Less中的变量实际上就是一个“常量”,因为它只能被定义一次
Less
@color: #ffffff;
@color: #dddddd;
#header: {
color: @color;
}
Css
#header {
color:#dddddd;
}
上面的代码中很明显的说明了后面的@color覆盖了前面的@color
另外,变量还有计算的功能
混入(Mixins)
混入就是一种嵌套,它允许你将一个类嵌入到另一个类中,而被嵌入的这个类也被称为一个变量。
个人理解:就是你自己行一个类(就当做一个变量吧或者有时候可以认为它是一个带有参数的functions),然后将这个类嵌入到另一个类中当做它的属性
Less
.common(@radius:5px) {
border-radius: @radius;
}
#header {
.common;
}
#footer {
.common;
}
解析成CSS
#header {
border-radius: 5px;
}
#footer {
border-radius: 5px;
}
混入函数还有一个名词叫做“混入参数”,就是说可以接受变量参数
.common(@radius) {
border-radius: @radius;
}
#header {
.common(10px);
}
#footer {
.common(20px);
}
解析成Css
#header {
border-radius: 10px;
}
#footer {
border-radius: 20px;
}
当然也可以不用带参数
嵌套规则
这里需要注意的是,&
符号,在Less中嵌套有&
解析的是同一个元素或者这个元素的伪类,没有&
解析的是后代元素
Less
.content {
.footer {
color: red;
}
&.header {
color: #ffffff;
}
}
解析成CSS
.content .footer{
color: red;
}
.content.header {
color: #ffffff;
}
Function&Operations
注意:Less中的operations主要是针对任何数字、颜色、变量的操作,可以对其加减乘除或者更加复杂的运算。而function主要Color functions
命名空间
上面所说,我们把一些变量或者mixins组织起来,并将它封装,想用的时候把一部分取出来使用。
#bundle {
.button () {
display: block;
border: 1px solid black;
background-color: grey;
&:hover { background-color: white }
}
.tab { ... }
.citation { ... }
}
使用
#header a {
color: orange;
#bundle > .button;
}
变量范围——scope
采用就近原则,也就是说元素先找本省有没有这个变量存在,如果存在,就取得这个变量,不存在则寻找父元素,以此类推
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
#footer {
color: @var; // red
}
总结:上面只是常用的一些功能,less的功能远不仅仅是这些!
网友评论