【技巧】LESS CSS 框架简介

LESS 原理及使用方式

本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。下面是一个简单的例子：

1. 颜色命名—-LESS 文件

@color: #4D926F; 
#header { 
 color: @color; 
} 
h2 { 
 color: @color; 
}

1. 颜色命名—-CSS 文件

#header { 
 color: #4D926F; 
} 
h2 { 
 color: #4D926F; 
}

2. 命名边框颜色—-LESS 文件

@border-color : #b5bcc7; 

.mythemes tableBorder{ 
  border : 1px solid @border-color; 
}

2. 命名边框颜色—-CSS 文件

.mythemes tableBorder { 
 border: 1px solid #b5bcc7; 
}

3. 命名宽度取最近值—-LESS 文件

@width : 20px; 
#homeDiv { 
  @width : 30px; 
  #centerDiv{ 
      width : @width;// 此处应该取最近定义的变量 width 的值 30px 
            } 
} 
#leftDiv { 
    width : @width; // 此处应该取最上面定义的变量 width 的值 20px  
}

3. 命名宽度取最近值—-CSS 文件

#homeDiv #centerDiv { 
 width: 30px; 
} 
#leftDiv { 
 width: 20px; 
}

清单 4. LESS 文件

// 定义一个样式选择器
 .roundedCorners(@radius:5px) { 
 -moz-border-radius: @radius; 
 -webkit-border-radius: @radius; 
 border-radius: @radius; 
 } 
 // 在另外的样式选择器中使用
 #header { 
 .roundedCorners; 
 } 
 #footer { 
 .roundedCorners(10px); 
 }

清单 4. CSS 文件

#header { 
-moz-border-radius:5px; 
-webkit-border-radius:5px; 
border-radius:5px; 
} 
#footer { 
-moz-border-radius:10px; 
-webkit-border-radius:10px; 
border-radius:10px; 
}

5. 边框倒角传参—-LESS 文件

// 定义一个样式选择器
 .borderRadius(@radius){ 
 -moz-border-radius: @radius; 
 -webkit-border-radius: @radius; 
 border-radius: @radius; 
 } 
 // 使用已定义的样式选择器
 #header { 
 .borderRadius(10px); // 把 10px 作为参数传递给样式选择器
 } 
 .btn { 
 .borderRadius(3px);// // 把 3px 作为参数传递给样式选择器

 }

5. 边框倒角传参—-CSS 文件

#header { 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius: 10px; 
} 
.btn { 
-moz-border-radius: 3px; 
-webkit-border-radius: 3px; 
border-radius: 3px; 
}

6. 边框倒角传参加值—-LESS 文件

.borderRadius(@radius:5px){ 
 -moz-border-radius: @radius; 
 -webkit-border-radius: @radius; 
 border-radius: @radius; 
 } 
 .btn { 
 .borderRadius; 
 }

6. 边框倒角传参加值—-CSS 文件

.btn { 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
border-radius: 5px; 
}

7. 阴影—-LESS 文件

.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); 
}

7. 阴影—-CSS 文件

#header { 
-moz-box-shadow: 2px 2px 3px #FF36; 
-webkit-box-shadow: 2px 2px 3px #FF36; 
box-shadow: 2px 2px 3px #FF36; 
}

嵌套的规则

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

8. HTML 片段

<div id="home"> 
  <div id="top">top</div> 
  <div id="center"> 
    <div id="left">left</div> 
    <div id="right">right</div> 
  </div> 
</div>

8. 堆叠简便写法—-LESS 文件

#home{ 
  color : blue; 
  width : 600px; 
  height : 500px; 
  border:outset; 
  #top{ 
       border:outset; 
       width : 90%; 
  } 
  #center{ 
       border:outset; 
       height : 300px; 
       width : 90%; 
       #left{ 
         border:outset; 
         float : left; 
 width : 40%; 
       } 
       #right{ 
         border:outset; 
         float : left; 
 width : 40%; 
       } 
   } 
}

8. 堆叠简便写法—-CSS 文件

#home { 
 color: blue; 
 width: 600px; 
 height: 500px; 
 border: outset; 
} 
#home #top { 
 border: outset; 
 width: 90%; 
} 
#home #center { 
 border: outset; 
 height: 300px; 
 width: 90%; 
} 
#home #center #left { 
 border: outset; 
 float: left; 
 width: 40%; 
} 
#home #center #right { 
 border: outset; 
 float: left; 
 width: 40%; 
}

9. 元素后代写法—-LESS 文件

a { 
 color: red; 
 text-decoration: none; 
 &:hover {// 有 & 时解析的是同一个元素或此元素的伪类，没有 & 解析是后代元素
  color: black; 
  text-decoration: underline; 
 } 
 }

9. 元素后代写法—-CSS 文件

a { 
color: red; 
text-decoration: none; 
} 
a:hover { 
color: black; 
text-decoration: underline; 
}

10 . 颜色变亮变暗—-LESS 文件

div{
    background：lighten（#000，10%）；
    color：darken（#fff，10%）；
}

10 .颜色变亮变暗—-CSS 文件

div{
    background：#1a1a1a；
    color：#e6e6e6；
}

运算及函数

在我们的 CSS 中充斥着大量的数值型的 value，比如 color、padding、margin 等，这些数值之间在某些情况下是有着一定关系的，那么我们怎样利用 LESS 来组织我们这些数值之间的关系呢？我们来看这段代码：

清单 11 . LESS 文件

@init: #111111; 
@transition: @init*2; 
.switchColor { 
color: @transition; 
}

清单 11. CSS 文件

.switchColor { 
 color: #222222; 
}