first语言特性
概述：
less作为一种 CSS 扩展, Less 不仅向后兼容 CSS, 它还使用现有的 CSS 语法新增了额外的特性. 这使得学习 Less 更轻松, 一旦有任何问题，可以随时退回使用标准的 CSS
变量
例：
@one_color：#5b83ad;
@two_color:@one_color + #111111;
.header{color:@two_color};
输出
.header{color:#6c94be}
注：由于变量只能定义一次，实际上他们就是‘常量’
混合
混合就 是一种将一系列属性从一个规则集引入（‘混合’）到另一个规则集的方式
例：
.style{width:100px;height:100px;}
将.style引入下方
.box{
backgroung:red;
.style;
}
输出：
.box{
backgroung:red;
width:100px;height:100px;
}
嵌套规则
less为我们提供嵌套能力，并不是合并在样式表中
例：
.dad{
color：red；
.son1{};
.son2{}
}
输出：
.dad{color:red}
.dad .son1{}
.dad son2{}
媒体冒泡查询和嵌套查询
媒体查询可以嵌套相同的方式选择器。选择复制到身体的媒体查询:
例：
.screencolor{
@media screen{
color:red;
@media(min-width:768px){
color:green;
}
}
@media tv{
color:black;
}
}
输出：
@media screen{
.screencolor{color:red}
}
@media screen and (min-width:100px){
.screencolor{color:green}
}
@media tv{
.screencolor{color:black}
}
运算
任何数值，颜色和变量都可以运算
例：
@base:5%;
@filler:@base*2;
@other:@base+@filler;
@base-color:#888/4;
background-color:@base-color+#111;
height:100%/2+@filler;
@width:1px+5
函数
less提供了转换颜色，处理字符串和进行运算的函数；
例：
width:percentage(0.2);
输出：
width:20%
命名空间和响应器
有时候，出于组织的目的，或者为了提供一些封装，你会希望将你的mixins 组合在一起。在 Less 中做到这一点非常直观，假设你想在.box下捆绑一些 mixins 和变量，以便稍候复用或者分发
例：
.box{
.button{
display:block;
border:1px solid red;
background-color:green;
}
&:hover{
background-color:white;
}
}
现在如果想在.box2 a中混合 .button类，如下
例：
.box2 a{
color:orange;
.box>.button;
}
注：
变量声明在一个名称空间将只局限于该名称空间，通过范围之外,不会使用相同的语法,
你可以用来参考mixin(#namespace> .mixin-name)。比如,你不可以做以下几点:(#namespace > @this-will-not-work)。
作用域
less中作用域与编程语言中作用域非常类似，首先会在局部查找变量和混合，若没找到，编译器会在父作用域中查找，以此类推
例：
@var:red;
.box{
@var:white;
.header{
color:@var
}
}
输出：
color:white;
注：
变量和混合不必在使用前声明，
例：
@var :red;
.box{
.header{
color:@var;
}
@var :white
}
输出：color:white;
注释
可以使用行注释和块注释；
例：
/*for example*/;
//for example;
导入
导入工作与你预期的一样，可以导入一个.less文件，然后这个文件中所有变量名都可以使用了，对于.less文件而言，其扩展名是可选的
例：
@impoirt 'library';//library.less
@impport 'type.css'
variables：
概述
在一个地方管理常用的值
在你的样式表中相同的值重复几十次或上百次并不少见
例:
a,
.link{color:#428bca}
.widget{
color:#fff;
background:#428bca
}
注：
变量通过为你提供一种在一个地方管理这些值的方法让你的代码变得更容易维护
//变量：
@link-color:#428bca;
@link-color-hover:darken(@link-color,10%);
//用法
a,
.link{color:@link-color};
a:hover{color:@link-color-hover}
.widget{
color:#fff;
background:@link-color;
}
变量插值
上面例子主要集中于在css规则中使用变量管理值，实际上他们还可以用在其他地方，比如选择器名称，属性名，url以及@import语句中
选择器：
例：
//变量
@myselector:banner;
//用法：
.@{myselector}{width:100px;}
输出：
.banner{width:100px;}
url:
例：
@src:‘../img’
body{
color:#444;
background:url('@{src}/white-sand.png')
}
@import语句：
例：
@themes:'../../src/themes';
@import '@{themes}/tidall-wave.less';
属性：
@property:color;
.box{
@{property}:#333;
background-@{property}:#999;
}
输出：
.box{
color:#333;
background-color:#999;
}
变量名：
可以用变量来定义变量名
@font:'i am font';
@var :'font';
content:@@var
输出：
content:'i am font'
延迟加载
变量是延迟加载的，在使用前不一定要预先声明
.box{width:@var}
@var :@a;
@a:9%;
.box2{
width:@var;
@var :9%
}
@var :@a;
@a:100%;
输出：
都为：width:9%;
例：
@var:0;
.box{
@var :1;
.box2{
@var :2;
three:@var;
@var :3;
}
one:@var
}
输出：
.box{one:1};
.box ,box2{three:3}
注：
在定义一个变量两次时，只会使用最后定义的变量，less会先从当前作用域中向上搜索，这个行为类似于css的定义中始终使用最后定义的属性值
默认变量
有时你会用到默认变量，让你能够在设置某些变量的情况下设置指定的变量，这一特性并不强制要求你这么做，因为你可以很容易痛过插入后定义同名 变量的方式覆盖默认变量
例：
@base-color:green;
@dark-color:darken(@base-color,10%)
@import 'library.less'
@base-color:red;
输出：
其中base-color会被重写，dark-color依然是暗红色
延伸(extend)：
是一个less伪类，他会合并他所在的所有选择器和他所匹配的引用
nav ul{
&:extend(.inline);
background:blue;
}
注：
在上面的规则中，：extend选择器会在.inline类出现的地方。在.inline上应用‘扩展选择器’（也就是nav ul）。
声明块保持原样，不会带有任何引用扩展（因为扩展并不是css）
例：
nav ul{
&:extend(.inline);
background:blue.;
}
.inline{color:red}
输出：
nav ul{background:blue}
.inline,
nav ul{color:red}
注：
nav ul:extend(.inline)选择器是如何输出得到nav ul 的，输出之前移除了扩展，然后选择器块保持不变，如果代码块中没有放属性，则从输入中移除他 （但是扩展依然会影响其他选择器）
混合（mixins）：
从现有样式混合属性
你可以混合‘类’选择器或者‘id’选择器
例：
.a,#b{color:white}
.mixin-class{a()}
.mixin-id{#b()}
输出：
.a,#b{color:white}
.minxin-class{color:white}
.minxin-id(color:white)
注：
当你调用混合集的时候，括号可加可不加
.a()与.a效果一样
不输出混合集
如果你想创建一个混合集，但是却不想让它输出到你的样式中，你可以在混合集的名字后面加上一个（）
例：
.mixin{color:red}
.other-mixin(){
background:white;
}
.class{
.mixin;
.other-mixin;
}
输出：
.mixin{color:red}
.class{
color:red;
background-color:white;
}
带选择器的混合
混合集不仅可以包含多种属性，还可以包括各种选择器
例：
mixin(){
&:hover{color:red}
}
button{.mixin()}
输出：
button:hover{color:red}
命名空间
如果将属性混合到比较复杂的选择器中，可通过嵌套多层id或者class
例：
.outer{
.inner{color:red}
}
.c{.outer>.inner}
输出：
.c{color:red}
!important关键字
在调用的混合集后面追加!important关键字，可以使混合集里面的所有属性都继承！important
例：
.box(@bg:#f5f5f5,@color:#900){
background:@bg;
color:@color
}
.unimportant{.box（）}
.important{.box（）!important}
输出：
.unimportant{
background:#f5f5f 5;
color:#900
}
.important{
background:#f5f5f5 !important;
color:#990 !important;
}
带参数的混合(parametric mixins)
mixins也可以接受参数，在它进行mixin操作时会将变量传递给选择器代码块
例：
.border-radius(@radius){
-webkit-border-radius:@radius;
-moz-border-radius:@radius;
border-radius:@radius;
}
.box{.border-radius(4px)};
.box2{.border-radius(6px)}
注：
mixin操作函数也可以有默认值：
即:
.border-radius(@radius:5px){...}
输出：
.box{border-radius:4px};
.box2{border-radius:6px};
带多个参数的mixin
参数可以用分号或逗号分隔，建议用分号；逗号有两个意思，可为mixin参数分隔符或css列表分隔符
mixins作为函数
import指令
导入选项
带条件的mixin
类似if形式的选择器
编写循环
合并属性
使用&引用父选择器
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
