1. Less和CSS的区别
HTML和CSS不属于编程语言而是属于标记语言,很难像JS一样定义变量、编写方法、实现模块化开发等。
LESS是一门CSS预处理语言,它扩展了CSS语言,增加了变量、Mixin、函数等特性,使CSS更易维护和扩展。
使用LESS基本上按照这样的步骤:编写LESS代码,使用NODE、JS或者是其他的工具把编写的LESS代码编译成我们平时看到的CSS代码(因为浏览器是无法解析LESS的语法的,所以编写完成的LESS代 码需要进行编译)。Less叫做预编译css,写好的less代码浏览器是不能直接渲染的,需要我们把它编译成为能渲染的css才可以。
2.由于每一次加载页面都需要导入LESS插件,并且把LESS文件重新编译为CSS,很消耗性能,导致页面打开速度变慢。所以在生产环境中,我们需要事前把LESS文件编译为正常的CSS后,在相应文件中引入,以后用户访问的都是编译好的CSS,为不是拿LESS现编译的。生产环境下,我们需要事先把LESS编译成CSS方法:
1)使用Node编译这种方式是目前项目中最常用的方式,它是把我们的LESS文件编译成CSS文件,我们项目中直接的引入CSS文件即可
(2) 把LESS模块安装到全局NODE环境中
(3) 使用命令进行编译
3.Less的基本语法
less中的变量使用@。
1 //用变量存储公用的属性值 2 @shadowColor: #000; 3 .inner { 4 box-shadow: 0 0 10px 0 @shadowColor; 5 } 6 7 8 @selector: box; 9 @bgImg: "../img"; 10 @property: color; 11 @name: "fung"; 12 13 //->LESS代码 14 .@{selector} { 15 width: 100px; 16 height: 100px; 17 @{property}: #000; 18 background: url("@{bgImg}/test.png"); 19 20 &:after { 21 display: block; 22 content: @@var; 23 } 混合(Mixins)
所谓的混合其实是把某个选择器中的样式拷贝一份拿过来使用
1 //->LESS代码 2 .public { 3 width: 100px; 4 height: 100px; 5 } 6 7 nav ul { 8 .public; 9 list-style: none; 10 } 11 12 //->编译为CSS的结果 13 .public { 14 width: 100px; 15 height: 100px; 16 } 17 18 nav ul { 19 width: 100px; 20 height: 100px; 21 list-style: none; 22 }
带参数混合
.border-radious(@radious) {
border-radius: @radious;
-moz-border-radius: @radious;
-webkit-border-radius: @radious;
}
#header {
.border-radious(4px);
}
.button {
.border-radious(6px);
}
给参数设置默认值
1 .border-radious(@radious) { 2 border-radius: @radious; 3 -moz-border-radius: @radious; 4 -webkit-border-radius: @radious; 5 } 6 7 #header { 8 .border-radious(4px); 9 } 10 11 .button { 12 .border-radious(6px); 13 }
模式匹配
.mixin(dark, @color) { // 这里前面没有带@所以可以作为标识
color: darken(@color, 10%);
}
.mixin(light, @color) { // 只接受light为首参
color: lighten(@color, 10%);
}
.mixin(@_, @color) { // 接受任意值
display: block;
}
// 使用
@switch: light;
.class {
.mixin(@switch, #888);
}
.class {
color: #a2a2a2;
display: block;
}
嵌套
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
&:hover {
text-decoration: none;
}
}
}