Less学习（1）

写在开头的话：

月余前被问起会不会Less，当时就有想学这个css框架的念头，而在昨天，在前端乱炖上看到一篇LessCss的开篇介绍，忽然就有了一股立马去学的冲动，回到家后找了几篇文章看了下，初感觉比较容易入门，变量混合参数的写法都很容易让人接受。至于嵌套，目前而言，我个人并不喜欢这种写法。追梦说谷歌正在用c++写他们自己的Sass(据说类似Less的一种css框架)，更加让我坚定了学这个框架的想法。今天只看了文档的小半部分，明天空的话就继续喽。希望以后能在项目中用到吧，不过目前我们公司的话，希望不大，哈哈。

一、变量
定义

1 @color:#e11921;

使用

a:hover{
　　color:@color;
}

编译后的结果：

1 a:hover {  color: #e11921;}

注意点：
（1）变量的定义无需提前，也就是说，定义可以放在使用之后。比如：

1 a:hover{
2   color:@color;
3 }
4 @color:#e11921;

编译后的结果：

1 a:hover {
2   color: #e11921;
3 }

（2）变量的作用域

 1 @bg:#cccccc;
 2 .wrap{
 3   @bg:#e5e5e5;
 4   .box{
 5     background-color:@bg;
 6   }
 7 }
 8 .module{
 9   background-color:@bg
10 }

编译后的结果为：

1 .wrap .box {
2   background-color: #e5e5e5;
3 }
4 .module {
5   background-color: #cccccc;
6 }

二、混合
我们可以定义一些通用的属性集.class,然后在其他的地方引入这些属性集

 1 .btn{
 2   display:inline-block;
 3   border:1px solid #e5e5e5;
 4   text-align:center;
 5 }
 6 
 7 .btn-b{
 8   width:62px;
 9   height:22px;
10   line-height:22px;
11   .btn;
12 }

编译后的结果为：

 1 .btn {
 2   display: inline-block;
 3   border: 1px solid #e5e5e5;
 4   text-align: center;
 5 }
 6 .btn-b {
 7   width: 62px;
 8   height: 22px;
 9   line-height: 22px;
10   display: inline-block;
11   border: 1px solid #e5e5e5;
12   text-align: center;
13 }

注意点：变量也会被混合，带入到新的作用域。（暂）

三、带参数的混合
（我觉得这个功能很适合用于css3，比如渐变啊什么的，浏览器私有前缀是繁琐的存在= =还有就是一组类似的样式了，比如不同尺寸的相似按钮）
继续拿.btn作例子：

 1 .btn(@64px,@height:22px){
 2     display:inline-block;
 3     width:@width;
 4     height:@height;
 5     line-height:@height;
 6     text-align:center;
 7     background-color:#f4f4f4;
 8     color:#333;
 9     border:1px solid #ccc;
10     border-radius:5px;
11 }
12 
13 #submit{
14   .btn(80px,28px);
15 }

编译后的结果为：

 1 #submit {
 2   display: inline-block;
 3   width: 80px;
 4   height: 28px;
 5   line-height: 28px;
 6   text-align: center;
 7   background-color: #f4f4f4;
 8   color: #333;
 9   border: 1px solid #ccc;
10   border-radius: 5px;
11 }

如果不想把.btn暴露到css中去，只在Less的混合中使用，可以不要设定参数（这里是我疑惑的地方，上个例子中编译的结果也并没有暴露.btn啊）：如

 1 .btn(){
 2     display:inline-block;
 3     width:64px;
 4     height:20px;
 5     line-height:32px;
 6     text-align:center;
 7     background-color:#f4f4f4;
 8     color:#333;
 9     border:1px solid #ccc;
10     border-radius:5px;
11 }
12 #cancel{
13   .btn;
14 }

编译后的结果为：

 1 #cancel {
 2   display: inline-block;
 3   width: 64px;
 4   height: 20px;
 5   line-height: 32px;
 6   text-align: center;
 7   background-color: #f4f4f4;
 8   color: #333;
 9   border: 1px solid #ccc;
10   border-radius: 5px;
11 }

注意点：
（1）多参数的混合，参数之间除使用逗号分隔外，还可以使用分号（官方推荐），因为分号有双重含义：它既可以表示混合的参数，也可以表示一个参数中一组值的分隔符。当参数分隔符中逗号和分号都存在时，则分号作为分隔符。
（2）同名不同参数的混合，看下面这个例子：

 1 .mixin(@color) {
 2     color-1: @color;
 3 }
 4 .mixin(@color; @padding:2) {
 5     color-2: @color;
 6     padding-2: @padding;
 7 }
 8 .mixin(@color; @padding; @margin: 2) {
 9     color-3: @color;
10     padding-3: @padding;
11     margin: @margin @margin @margin @margin;
12 }

第一个mixin强制要求第一个参数
第二个mixin强制要求第一个参数，第二个参数为可选
第三个mixin强制要求前2个参数，第三个为可选

因此当调用时：

1 .some .selector div {
2     .mixin(#008000);
3 }

编辑结果为：

1 .some .selector div {
2   color-1: #008000;
3   color-2: #008000;
4   padding-2: 2;
5 }

四 @arguments变量
@arguments包含了你传进去的所有变量，所以它会适合用在一些符合的属性，比如border margin padding box-shadow等等。
我们拿border作为例子（因为写的最多）

1 .border(@1px;@style:solid;@color:#e11921){
2   border:@arguments;
3 }
4 #border{
5   .border(2px,dashed,#f00);
6 }

编译结果为：

#border {
  border: 2px dashed #ff0000;
}

好吧，我发现这个例子有点鸡肋，还是换成box-shadow吧

1 .box-shadow(@x:1;@y:1;@blur:2;@color:#eee){
2   box-shadow:@arguments;
3   -webkit-box-shadow:@arguments;
4   -moz-box-shadow:@arguments;
5   -ms-box-shaow:@arguments;
6 }
7 #box{
8 .box-shadow(2px;2px;4px;rgba(0,0,0,0.6));
9 }

编译结果为：

1 #box {
2   box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
3   -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
4   -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
5   -ms-box-shaow: 2px 2px 4px rgba(0, 0, 0, 0.6);
6 }

五：参数高级用法：

 1 .mixin (...) {        // 接受 0-N 个参数 （...我猜测是任意个数的意思）
 2 .mixin () {           // 不接受任何参数
 3 .mixin (@a: 1) {      // 接受 0-1 个参数
 4 .mixin (@a: 1, ...) { // 接受 0-N 个参数
 5 .mixin (@a, ...) {    // 接受 1-N 个参数（参数a没有默认值，表示强制要求这个参数）
 6 
 7 .mixin (@a, @rest...) {
 8     // @rest 表示 @a 之后的参数
 9     // @arguments 表示所有参数
10 }

六：！important

1 .box{
2   width:100px;
3   height:100px;
4 }
5 #facebox{
6   .box !important;
7   background-color:#edd;
8 }

编译后的结果为：

1 .box {
2   width: 100px;
3   height: 100px;
4 }
5 #facebox {
6   width: 100px !important;
7   height: 100px !important;
8   background-color: #edd;
9 }

hi,我的新博客地址：ysha.me !!