Less要CSS语法的基础上进行了扩展，主要包含：Variables，Mixins、Nested Rules、Functions & Operations、Client-side usage、Server-side usage等等
1、变量——Variables
Less中的变量充许你在样式中的某个地方对常用的值进行定义，然后应用到样式中，这样只要改变你定义的变量参数值就可以达到改变全局的效果，我们先来看一段代码：
LESS
/*======== 定义变量===========*/
@color: #4d926f;
/*======== 应用到元素中 ========*/
#header {
color: @color;
}
h2 {
color: @color;
}<span style="white-space:pre"> </span>/*======= Less 编译成 css ======*/
#header {
color: #4d926f;
}
h2 {
color: #4d926f;
}LESS
<span style="white-space:pre"> </span>@nice-blue: #5b83ad;
@light-blue: @nice-blue + #111;
#header {
color: @light-blue;
}#header {color: #6c94be;}我们还可以定义一个变量名为变量，如
LESS
<span style="white-space:pre"> </span>@color: #253636;
@highlight: "color";
#header {color: @@highlight;}#header {color: #253636;}LESS
<span style="white-space:pre"> </span>@color: #253636;
@highlight: "color";
@color: #ff3636;
#header {color: @@highlight;}#header {color: #ff3636;}2、混入——Mixins
混入其实就是一种嵌套，它充许你将一个类嵌入到另一个类中，而被嵌入的这个类也称为是一个变量。换句话说，你可以用一个类定义CSS，然后把整个为当作一个变量来使用，嵌入到另一人类中当作他的属性；另外混入也像一个带有参数的functions，如下在的例子：
LESS
/*========= 定义一个类 ===========*/
.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;
}混入(Mixin)有一个名词叫“混入参数（Parametric Mixins）”，上面也说过。Less具有一个特殊类型的规则集，那就是一个类可以当作另一个元素的属生值，并且还可以接受其自己的参数，我们来看一个典型的实例：
LESS
/*========== 定义一个规则，并且不设置默认参数值 ============*/
.borderRadius(@radius){
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
/*============ 应用到元素中 ============*/
#header {
.borderRadius(10px); /*把10px传给变量@radius*/
}
.btn {
.borderRadius(3px);/*把3px传给变量@radius*/
} #header {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.btn {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
LESS
.borderRadius(@radius:5px){
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
.btn {
.borderRadius;
} .btn {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}LESS
.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;
}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);
} #header {
-moz-box-shadow: 2px 2px 3px #FF36;
-webkit-box-shadow: 2px 2px 3px #FF36;
box-shadow: 2px 2px 3px #FF36;
}3、嵌套规则——Nested Rules
嵌套规则主要是针对一多层元素的样式规则写法，以前我们在多层元素中写样式，要么从头选下来，要么另外给这个元素加上类名或id名，但在Less中我们不需要这样操作了，我们只要使用他的嵌套规则就可以完成，我们来看一个简单的实例：
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等，他的写法是：
LESS
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;
}LESS
#header {
&.fl{
float: left;
}
.mln {
margin-left: 0;
}
} #header.fl{float: left;}
#header .mln {margin-left: 0;}4、Functions & Operations
这两个功能很有意思的。在我们平时的样式中，有很多元素的属性都具有一定的比例或倍数。那么这两个刚好可以帮我们实现这方面的功能，首先来看Operations（直译“动作”）他可以让你对元素的属性值，颜色进行四则运算：加、减、乘、除。而Function就像javascript中的function一样可以让你进行你想要的值的操作。下面我们先来看一个简单的实例：LESS
@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;
}这里提出一点，Less中的Operations主要是针对任何数字、颜色、变量的操作，可以对其是行加、减、、乘、除或者更复杂的综合运算；而Functions主要是针对Color funtions，Less提供了多种变换颜色的功能，下面多们来俱体看一下这两个功能的使用。
先来看Operation的使用
LESS
@base: 5%;
@filler: @base*2;
@other: @base + @filler;
#header {
color: #888 / 4;
height: 100% / 2 + @filler;
} #header {
color: #222222;
height: 60%;
}上面是一些简单的四则运算，他们都是在同一单位下进行操作，现在我们一起来看一个不同单位的操作
LESS
@var: 1px + 5;
#header {
border: @var solid red;
} #header {
border: 6px solid red;
}上面的代码直接反应出了，“@var: 1px + 5”，Less最终解析的值是“6px”。在Less中我们同样可以像做小学算术一样，使用括号“（）”来改变其运算的先后顺序，如：
LESS
@var: 20px;
#header {
width: @var + 5 * 2;
height: (@var + 5 ) * 2;
} #header {
height: 50px;
width: 30px;
}Less中还提供了一个Color Functions，他具有多种变换颜色的功能，先把颜色转换成HSL色，然后在此基础上进行操作，具体包括以下几种：
lighten(@color, 10%); // return a color which is 10% *lighter* than @color
darken(@color, 10%); // return a color which is 10% *darker* than @color
saturate(@color, 10%); // return a color 10% *more* saturated than @color
desaturate(@color, 10%); // return a color 10% *less* saturated than @color
fadein(@color, 10%); // return a color 10% *less* transparent than @color
fadeout(@color, 10%); // return a color 10% *more* transparent than @color
spin(@color, 10); // return a color with a 10 degree larger in hue than @color
spin(@color, -10); // return a color with a 10 degree smaller hue than @color @base: #f04615;
#header {
color: @base;
background-color: fadein(@base, 10%);
h1 {
color: lighten(@base,20%);
background-color: lighten(fadeout(@base,20%),5%);
a {
color: darken(@base,50%);
background-color: spin(@base,10);
&:hover {
color: saturate(@base,30%);
background-color: fadein(spin(@base,-5),20%);
}
}
}
p {
color: desaturate(@base,60%);
}
} #header {
background-color: #F04615;
color: #F04615;
}
#header h1 {
background-color: rgba(242, 89, 45, 0.8);
color: #F69275;
}
#header h1 a {
background-color: #F06B15;
color: #060200;
}
#header h1 a:hover {
background-color: #F03415;
color: #FF3E06;
}
#header p {
color: #A56F60;
}大家还可以通过这样的方式提取颜色值
hue(@color); // returns the `hue` channel of @color
saturation(@color); // returns the `saturation` channel of @color
lightness(@color); // returns the 'lightness' channel of @color下面我们来看一下如何取得他的颜色
LESS
@color: #f36;
#header {
background-color: hsl(hue(@color),45%,90%);
} #header {
background-color: #F1DAE0;
}5、命名空间——Namespaces
有时候你想把一些变量或mixins组织起来，并将他封装，想用的时候就把要关的一部分取出来，那么我们将在前面的mixins基础上将其功能扩展，比如说我们有一个这样的库： #bundle {
.button () {
display: block;
border: 1px solid black;
background-color: grey;
&:hover { background-color: white }
}
.tab { ... }
.citation { ... }
} #header a {
color: orange;
#bundle > .button;
}6、变量范围——Scope
Less中的变量和别的程序语言一样，他的变量也有一个范围概念，这个概念就有点像局部变量和全局变量一样，只是在Less中采取的是就近原则，换句话说，元素先找本身有没有这个变量存在，如果本身存在，就取本身中的变量，如果本身不存在，就寻找父元素，依此类推，直到寻找到相对应的变量，我们来看个简单的实例： @var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
#footer {
color: @var; // red
}7、Less的注解——Comments
Less中的注解有两种方式，单行注解很像js中的，如： // Hi, I'm a silent comment, I won't show up in your CSS
.class { color: white } /* Hello, I'm a
CSS-style comment
*/
.class { color: black } /* Hello, I'm a CSS-style comment */
.class { color: black }8、客户端的使用——Client-side usage
客户端的使用其实好简单，我们最开始引用的就是客户端的使用方法，使用这种方法前提条件是需要一个less.js的脚本支持，大家可以先到点击下载less.js然后把他引用到页面的head中，如下所示：<script src="less.js" type="text/javascript"></script> <link rel="stylesheet/less" type="text/css" href="styles.less">
扫一扫
2621
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
