less常用方法

最近在开发中使用了less，总结一下less一些常用的方法：

1.可以定义变量
SASS允许使用变量，所有变量以$开头。


　　$blue : #1875e7;　

　　div {
　　　color : $blue;
　　}

如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。


　　$side : left;

　　.rounded {
　　　　border-#{$side}-radius: 5px;
　　}

2.可以嵌套
SASS允许选择器嵌套。比如，下面的CSS代码：


　　div h1 {
　　　　color : red;
　　}

可以写成：


　　div {
　　　　hi {
　　　　　　color:red;
　　　　}
　　}

3，继承
SASS允许一个选择器，继承另一个选择器。比如，现有class1：


　　.class1 {
　　　　border: 1px solid #ddd;
　　}

class2要继承class1，就要使用@extend命令：


　　.class2 {
　　　　@extend .class1;
　　　　font-size:120%;
　　}
4.可以混入
Mixin有点像C语言的宏（macro），是可以重用的代码块。

使用@mixin命令，定义一个代码块。


　　@mixin left {
　　　　float: left;
　　　　margin-left: 10px;
　　}

使用@include命令，调用这个mixin。


　　div {
　　　　@include left;
　　}

mixin的强大之处，在于可以指定参数和缺省值。


　　@mixin left($value: 10px) {
　　　　float: left;
　　　　margin-right: $value;
　　}

使用的时候，根据需要加入参数：


　　div {
　　　　@include left(20px);
　　}
5.可以定义函数
SASS允许用户编写自己的函数。


　　@function double($n) {
　　　　@return $n * 2;
　　}

　　#sidebar {
　　　　 double(5px);
　　}