1.变量
很简单,就是事先声明好属性变量,选择器直接引用即可
2.混合
引用另一个规则集里的某些属性时,直接在访问类的名称
3.嵌套
示例解释:
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
输出结果:
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
媒体查询:<code>@media</code>嵌套方式,示例解释:
.screencolor{
@media screen {
color: green;
@media (min-width:768px) {
color: red;
}
}
@media tv {
color: black;
}
}
输出结果:
@media screen {
.screencolor {
color: green;
}
}
@media screen and (min-width: 768px) {
.screencolor {
color: red;
}
}
@media tv {
.screencolor {
color: black;
}
}
选择器<code>.screencolor</code>被移动到了<code>@media</code>内部。
4.运算
任何数值,颜色和变量都可以进行运算。
Less 能够推断颜色和单位之间的区别。
如:
@var:1px +5;
结果输出<code>@var:6px</code>。
5.函数
示例:
@base: #f04615;
@width: 0.5;
.class {
width: percentage(@width); // returns `50%`
color: saturate(@base, 5%);//基础颜色值得饱和度增加5%
background-color: spin(lighten(@base, 25%), 8);//背景颜色亮度增加25%后将色相值增加8%
}
6.命名空间和访问器
不要将它与CSS <code>@namespace</code>或者namespace选择器混为一谈?
这句话大概意思是?
封装一部分变量和mixins(混合),以便以后复用或分发:
#bundle {
.button {
display: block;
border: 1px solid black;
background-color: grey;
&:hover {
background-color: white
}
}
.tab { ... }
.citation { ... }
}
现在想在<code>#header a</code>中混合<code>.button</code>类,我们可以:
#header a{
color:#orange;
#button > .button;
}
7.作用域
首先局部寻找,如果没找到,再从父作用域寻找,依次类推
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
变量和混合不必在使用前声明,即<code>@var: white;</code>在<code>#header</code>前后一样。
8.注释
/*这是注释*/
9.导入
@import "library"; //导入library.less
@import "type.css";
对于<code>.less</code>文件而言,其扩展名是可选的。