less

发表于 | 分类于

less程序化编译CSS

1 语法:定义变量，LESS 允许开发者自定义变量，变量可以在全局样式中使用，变量使得样式修改起来更加简单。

1
2
3
4
5
/*语法：@变量名: 值*/
@mainColor : red ;
div {
   color:@mainColor ;
}

2 Mixin 混入:功能对用开发者来说并不陌生，很多动态语言都支持 Mixin（混入）特性，它是多重继承的一种实现，在 LESS 中，混入是指在一个 CLASS 中引入另外一个已经定义的 CLASS，就像在当前 CLASS 中增加一个属性一样。

  • 样式混入
1
2
3
4
5
6
7
8
9
10
.red {
  	color : red ;
}
.border {
  	border:2px solid #000 ;
}
.mixin-class {
  	.red();
  	.border();
}
  • 函数混入(变量必须要有默认值:如果后面的代码用到了该变量，否则会提示undefined)
1
2
3
4
5
6
7
8
9
10
.red(@color:red){
  	color : @color ;
}
.border(@color:#ccc,@width:3px){
  	border : @width solid @color ;
}
.mixin-func {
  	.red(skyblue);
  	.border(#666,10px);
}

3 嵌套:在我们书写标准 CSS 的时候，遇到多层的元素嵌套这种情况时，我们要么采用从外到内的选择器嵌套定义，要么采用给特定元素加 CLASS 或 ID 的方式”

比如以下这段html的嵌套书写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="container">
    <div class="row">
        <div class="column">
            <h3></h3>
            <a href=""><img src="" alt=""/></a>
      	</div>
        <div class="column">
            <h3></h3>
            <a href=""><img src="" alt=""/></a>
      	</div>
        <div class="column">
            <h3></h3>
            <a href=""><img src="" alt=""/></a>
      	</div>
    </div>
</div>

css样式如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.container{
  	width:1000px;
  	height:80px;
  	position:relative;
}
.container>.row {
  	width:100%;
  	height:100%;
}
.container>.row>.column {
  	width:33.333%;
  	height:100%;
  	border:2px solid #000;
}
/*后代选择器*/
.container>.row>.column h3 {
  	margin:0;
}
.container>.row>.column a {
  	dispaly:block;
  	width:100%;
  	height:100%;
  	text-decoration:none;
}
.container>.row>.column a : hover {
  	color:#dddddd;
  	background-color:#ccc;
}

less编译如下(注意伪类需要加 &:伪类 )

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.container {
  	width:1000px;
  	height:80px;
  	position:relative;
  	.row {
      	width:100%;
  		height:100%;
    	.column {
             width:33.333%;
  			height:100%;
  			border:2px solid #000;
      		h3 {
              	margin:0;
  			}
      		a {
              	 dispaly:block;
  				width:100%;
  				height:100%;
  				text-decoration:none;
      		}
      /*&:伪类*/
      		&:hover {
              	 color:#dddddd;
  				background-color:#ccc;
      		}
  		}
  	}			
}

注意伪类选择符：E:hover E : link E :first-child

4 Import导入:可以使我们的样式编译模块化,这个思想很重呀，模块化的编程会使我们的维护特别简单。

1
@import "lessFileName";

5 Less cmd命令符

1
lessc -v :查看less文件的版本;

6 在less文件中，/**/ 注释同样可以在css中出现，而 // 注释只会在less中出现，不会再编译的css中出现。