变量
适用于定义主题，我们可以将背景颜色、字体颜色、边框属性等常规样式进行统一定义，这样不同的主题只需要定义不同的变量文件就可以了。当然该特性也同样适用于 CSS RESET（重置样式表），在 Web 开发中，我们往往需要屏蔽浏览器默认的样式行为而需要重新定义样式表来覆盖浏览器的默认行为，这里可以使用 LESS 的变量特性，这样就可以在不同的项目间重用样式表，我们仅需要在不同的项目样式表中，根据需求重新给变量赋值即可。
@border-color : #b5bcc7;
.mythemes tableBorder{
border : 1px solid @border-color;
}
.mythemes tableBorder {
border: 1px solid #b5bcc7;
}
生命周期
局部变量还是全局变量
查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局
@width : 20px;
#homeDiv {
@width : 30px;
#centerDiv{
width : @width;// 此处应该取最近定义的变量 width 的值 30px
}
}
#leftDiv {
width : @width; // 此处应该取最上面定义的变量 width 的值 20px
}
#homeDiv #centerDiv {
width: 30px;
}
#leftDiv {
width: 20px;
}
列表类型
@colors: #FFF, #0F0, #F0F;
.skin{
color: extract(@colors,0);
height: 12px*length(@colors);
}
.skin{
color: #FFF;
height: 36px;
}
mixins
在 LESS 中，混入是指在一个 CLASS 中引入另外一个已经定义的 CLASS，就像在当前 CLASS 中增加一个属性一样
定义一个样式选择器
.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;
}
Mixins 其实是一种嵌套，它允许将一个类嵌入到另外一个类中使用，被嵌入的类也可以称作变量，简单的讲，Mixins 其实是规则级别的复用。
Mixins 还有一种形式叫做 Parametric Mixins（混入参数），LESS 也支持这一特性
// 定义一个样式选择器
.borderRadius(@radius){
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
// 使用已定义的样式选择器
#header {
.borderRadius(10px); // 把 10px 作为参数传递给样式选择器
}
.btn {
.borderRadius(3px);// // 把 3px 作为参数传递给样式选择器
}
#header {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.btn {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
像 JavaScript 中 arguments一样，Mixins 也有这样一个变量：@arguments。@arguments 在 Mixins 中具是一个很特别的参数，当 Mixins 引用这个参数时，该参数表示所有的变量，很多情况下，这个参数可以省去你很多代码。
.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;
}
当我们拥有了大量选择器的时候，特别是团队协同开发时，如何保证选择器之间重名问题？
采用了命名空间的方法来避免重名问题
#mynamespace {
.home {...}
.user {...}
}
这样我们就定义了一个名为 mynamespace 的命名空间，如果我们要复用 user 这个选择器的时候，我们只需要在需要混入这个选择器的地方这样使用就可以了。#mynamespace > .user。
#bundle {
.button () {
display: block;
border: 1px solid black;
background-color: grey;
&:hover { background-color: white }
}
.tab { ... }
.citation { ... }
}
引入.button
#header a {
color: orange;
#bundle > .button;
}
嵌套的规则
<div id="home">
<div id="top">top</div>
<div id="center">
<div id="left">left</div>
<div id="right">right</div>
</div>
</div>
#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%;
}
}
}
#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%;
}
对伪元素
a {
color: red;
text-decoration: none;
&:hover {// 有 & 时解析的是同一个元素或此元素的伪类，没有 & 解析是后代元素
color: black;
text-decoration: underline;
}
}
a {
color: red;
text-decoration: none;
}
a:hover {
color: black;
text-decoration: underline;
}
运算及函数
在我们的 CSS 中充斥着大量的数值型的 value，比如 color、padding、margin 等，这些数值之间在某些情况下是有着一定关系的，那么我们怎样利用 LESS 来组织我们这些数值之间的关系呢？
对数值型的 value（数字、颜色、变量等）进行加减乘除四则运算
@init: #111111;
@transition: @init*2;
.switchColor {
color: @transition;
}
.switchColor {
color: #222222;
}
专门针对 color 的操作
这些函数的主要作用是提供颜色变换的功能，先把颜色转换成 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
init: #f04615;
#body {
background-color: fadein(@init, 10%);
}
#body {
background-color: #f04615;
}
Comments
LESS 中单行注释 (// 单行注释 ) 是不能显示在编译后的 CSS 中，所以如果你的注释是针对样式说明的请使用多行注释。
字符串插值
@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");
避免编译
.class {
filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}
父选择器引用(ParentSelector)
采用&引用完整的父选择器
可通过追加和预追加的方式加工&，从而生成新的选择器
通过&::after等方式添加伪元素、伪类样式规则集合
同一个选择器可使用多个&
通过在选择器后添加 "空格&"的方式，可将当前选择器排列到最前面
&指向组选择器时，会生成新的组选择器
@bg: #aaa;
#ps1 .btn{
background-color: @bg;
border-radius: 5px;
&:hover{
background-color: lighten(@bg, 30%);
cursor: pointer;
}
&-msg, &-eof{
color: blue;
}
.no-borderradius &{
background-image: url('img/btn-bg.png');
}
}
/*
* &指向组选择器时，会生成新的组选择器
*/
#dummy1, .dummy1{
&:hover{
color: red;
}
& + &{
font-size: 12px;
}
}
#ps1 .btn {
background-color: #aaaaaa;
border-radius: 5px;
}
#ps1 .btn:hover {
background-color: #f6f6f6;
cursor: pointer;
}
#ps1 .btn-msg,
#ps1 .btn-eof {
color: blue;
}
.no-borderradius #ps1 .btn {
background-image: url('img/btn-bg.png');
}
/*
* &指向组选择器时，会生成新的组选择器
*/
#dummy1:hover,
.dummy1:hover {
color: red;
}
#dummy1 + #dummy1,
#dummy1 + .dummy1,
.dummy1 + #dummy1,
.dummy1 + .dummy1 {
font-size: 12px;
}
import
less样式文件可通过 @import '文件路径'; 引入外部的less文件。
不带扩展名或带非.less的扩展名均被视为less文件;
@import可出现在任何位置，而不像css的@import那样只能放在文件第一行。
另外@import还提供了6个可选配置项(分别为reference,inline,less,css,once,multiple)，用来改变引入文件的特性。语法为： @import (reference) '文件路径'; 。
下面为各配置项的具体说明：
- @import (reference) "文件路径";
将引入的文件作为样式库使用，因此文件中样式不会被直接编译为css样式规则。当前样式文件通过extend和mixins的方式引用样式库的内容。 - @import (inline) "文件路径";
用于引入与less不兼容的css文件，通过inline配置告知编译器不对引入的文件进行编译处理，直接输出到最终输出。注意：引入的文件和当前文件会被编译为一个样式样式 - @import (less) "文件路径";
默认使用该配置项，表示引入的文件为less文件。 - @import (css) "文件路径";
表示当前操作为CSS中的@import操作。当前文件会输出一个样式文件，而被引入的文件自身为一个独立的样式文件 - @import (once) "文件路径";
默认使用该配置项，表示对同一个资源仅引入一次。 - @import (multiple) "文件路径";
表示对同一资源可引入多次。
继承(Extend)
两种语法：
.animal{
color: #fff;
}
/* 语法1：<selector>:extend(<parentSelector>){} */
.bear:extend(.animal){
width: 100px;
height: 100px;
}
/* 语法2：<selector>{ &:extend(<parentSelector>); } */
.deer{
&:extend(.animal);
width: 50px;
height: 50px;
}
.animal,
.bear,
.deer {
color: #fff;
}
/* 语法1：<selector>:extend(<parentSelector>){} */
.bear {
width: 100px;
height: 100px;
}
/* 语法2：<selector>{ &:extend(<parentSelector>); } */
.deer {
width: 50px;
height: 50px;
}
