W3cplus
记述前端那些事——引领Web前沿
Less的写法是:
header {
display: inline;
float: left;
h1 {
font-size: 26px;
font-weight: bold;
a {
text-decoration: none;
color: #f36;
&:hover {
text-decoration: underline;
color: #63f;
}
}
}
p {
font-size: 12px;
}
}
编译之后它会成为这样的
header {
display: inline;
float: left;
}
header h1 {
font-size: 26px;
font-weight: bold;
}
header h1 a {
color: #FF3366;
text-decoration: none;
}
header h1 a:hover {
color: #6633FF;
text-decoration: underline;
}
header p {
font-size: 12px;
}
嵌套规则可以让我们在写样式的时候能像写DOM树形那样有结构的去写,对于伪元如:hover,:link,:focus等,他的写法是:
a {
color: red;
text-decoration: none;
&:hover {
color: blue;
text-decoration: underline;
}
}
编译之后是这样的:
a {
color: red;
text-decoration: none;
}
a:hover {
color: blue;
text-decoration: underline;
}
2.变量(Variables)
使用变量可以让我们定义/修改一次,就可以自动影响/更新整个样式表中用到该变量值得属性,需要注意的是:变量只能被定义一次
/======== 定义变量===========/
@color: #4d926f;
/======== 应用到元素中 ========/#header {
color: @color;}
h2 {
color: @color;}
上面的代码经过编译之后就会变成
header {
color:#4d926f;}
h2 {
color:#4d926f;}
3.混入(Mixins)
混入其实就是一种嵌套,它充许你将一个类嵌入到另一个类中,而被嵌入的这个类也称为是一个变量。换句话说,你可以用一个类定义CSS,然后把整个为当作一个变量来使用,嵌入到另一人类中当作他的属性;另外混入也像一个带有参数的functions,也可以不带参数,比如
/========= 定义一个带参数的类 ===========/
.roundedCorners(@radius:5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
/========== 定义的类应用到另个一个类中 ===========/
#header {
.roundedCorners;
}
footer {
.roundedCorners(10px);
}
编译之后:
header {
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
footer {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
定义一个不带参数的类
.wrap(){
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}
pre {
.wrap;
}
编译之后:
pre {
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}
Mixins还有一个重要的变量:@arguments。@arguments在Mixins中具是一个很特别的参数,当Mixins引用这个参数时,他将表示所有的变量,当你不想处理个别的参数时,这个将很有用,比如:
.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
box-shadow: @arguments;
}
header {
.boxShadow(2px,2px,3px,#f36);
}
编译之后
header {
-moz-box-shadow: 2px 2px 3px #FF36;
-webkit-box-shadow: 2px 2px 3px #FF36;
box-shadow: 2px 2px 3px #FF36;
}
4.运算式
通过运算式可以基于变量实现数学计算,比如,可以将一种颜色作为基准,对其进行加亮和减暗处理:
a:hover{
darken(@link-color,15%);
}
还可以计算内边距的值,以适应导航条的高度,比如,以下Bootstrap的navbar.less文件中的代码,就是将导航项的内边距值设定为导航条的高度减去行高之后剩余的高度值,然后将这个值一份为二,平局应用为顶部和底部的内边距
.navbar > li > a{
padding-top:((@navbar-height-@line-computed)/2);
padding-bottom:((@navbar-height-@line-computed)/2);
}
还有一个例子就是:
@the-border: 1px;
@base-color: #111;
@red: #842210;
header {
color: @base-color *3;
border: 1px solid desaturate(@red,100%);
border-width: @the-border @the-border*2 @the-border*3 @the-border;
border-color:desaturate(@red,100%) @red lighten(@red, 10%) darken(@red, 30%);
}
编译之后为
header {
color: #333;
border: 1px solid #4a4a4a;
border-width: 1px 2px 3px 1px;
border-color: #4A4A4A #842210 #B12E16 #000000;
}
5.命名空间(Namespaces)
有时候你想把一些变量或mixins组织起来,并将他封装,想用的时候就把要关的一部分取出来,那么我们将在前面的mixins基础上将其功能扩展,比如说我们有一个这样的库:
bundle {
.button () {
display: block;
border: 1px solid black;
background-color: grey;
&:hover { background-color: white }
}
}
现在在实际操作中,我们header中的a样式和.button一样,那么我们就可以这样操作:
header a {
color: orange;
#bundle > .button;
}
编译之后是这样的:
header a{
color:orange;
display:block;
border:1px solid #000;
background-color:grey
}
header a:hover{
background-color:#fff
}
6.变量范围(Scope)
less中的变量范围有点像局部变量和全局变量一样,只是在less中采取就近原则,换句话说,元素先找本身有没有这个变量存在,如果本身存在,就取本身中的变量,如果本身不存在,就寻找父元素,比如:
@var: red;
page {
@var: white;
#header {
color: @var; // white
}
}
footer {
color: @var; // red
}
编译之后是:(#fff是代表white白色)
page #header{color:#fff}
footer{color:red}
7.支持导入文件
less编译器支持导入并组合多个文件,并最终生成一个统一的CSS文件,所以我们可以指定导入的次序,按照需要的层叠关系精确组织结果样式表。
在Bootstrap的bootstrap.less文件中我们可以看到它也是采取这种做法:
// Core variables and mixins
@import “variables.less”;
@import “mixins.less”;
// Reset and dependencies
@import “normalize.less”;
@import “print.less”;
@import “glyphicons.less”;
// Core CSS
@import “scaffolding.less”;
@import “type.less”;
@import “code.less”;
@import “grid.less”;
@import “tables.less”;
@import “forms.less”;
@import “buttons.less”;
这带来的一个好处就是可以使得样式文件模块化,以便于我们更好的管理和维护,这也是bootstrap为什么会有这么多less文件的原因,它为各个组件都写了相应的less文件,让我们来感受下
附录:
Less官网:http://lesscss.org/
Less编译器下载地址:http://winless.org/
附带Less编译器的使用方式:
1、进入http://winless.org/,点击红线框部分进行编译器下载
2、下载安装成功后,打开的界面是酱紫的
3、把包含.less文件的文件夹拖至红线框位置,或者点击下方Add folder按钮选中文件进行添加,把文件添加进来之后是酱紫的界面
4、接着,我们要编译哪个文件就选中该文件,点击Compile按钮进行编译即可,这时候编译后的.css文件默认是放在你添加的文件夹下,或者你也可以选中文件后,鼠标——右键——Select output file,选中.css文件的输出目录
5、编译成功后,我们可以在界面看到
同时
我们也看到了编译后的.css文件,很屌的感觉 有木有!!!