less 基础 边学边整理

1、变量 定义一个变量可以全局使用
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

header{

color: @light-blue;
}

2、混合
.border {
border-top: dotted 1px black;
border-bottom : solid 2px black;
}

menu a {

color: #111;
.bordered;
}

3、嵌套规则

header {

color: black;
}

header .navigation {

font-size: 12px;
}

header .logo {

width: 300px;
}

可以改成

header {

color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}

注意： & 可以作为当前的东西这个父类
.clearfix {
display: block;
zoom: 1;

&:after {
content: ” “;
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
}

4、运算 任何的数字、颜色或者变量都可以参与运算
@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;

例如：@var : 1px +5 =>输出是6px

5、函数 less里边内置了很多用于转换颜色，处理字符串、算数运算等

下面这个例子将介绍如何将 0.5 转换为 50%，将颜色饱和度增加 5%，以及颜色亮度降低 25% 并且色相值增加 8 等用法：
@base: #f04615;
@width: 0.5;

.class {
width: percentage(@width); // returns 50%
color: saturate(@base, 5%);
background-color: spin(lighten(@base, 25%), 8);
}

6、设置命名空间

每一块都可以作为一个明明空间，然后放在总的命名空间下边

bundle {

.button {
display: block;
border: 1px solid black;
background-color: grey;
&:hover {
background-color: white
}
}
.tab { … }
.citation { … }
}

上面是一个子的命名空间

header a {

color: orange;
#bundle > .button;
}
把它放在一个父类的命名空间里

7、scope 局部变量
@var: red;

page {

@var: white;//这个就是局部变量
#header {
color: @var; // white
}
}

8、import
@import ‘library’;//library.less 如果是less文件则可以省略.less
@import ‘typo.css’

9、变量插话 可以用{}中间来写变量的名字
// Variables
@mySelector: banner;

// Usage
.@{mySelector} {
font-weight: bold;
line-height: 40px;
margin: 0 auto;
}

.banner {
font-weight: bold;
line-height: 40px;
margin: 0 auto;
}

// url 感觉这个很多时候可以用到
@images: “../img”;

// 用法
body {
color: #444;
background: url(“@{images}/white-sand.png”);
}

//属性
@property: color;

.widget {
@{property}: #0ee;
background-@{property}: #999;
}

//变量名
@fnord: “I am fnord.”;
@var: “fnord”;
content: @@var;

编译成：content: ‘I am fnord.’

好用的案例：
单参数的Mixin
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}

header {

.border-radius(4px);
}
.button {
.border-radius(6px);
}

或者：

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

header {

.border-radius;
}

或者：命名别名

.mixin(@color: black; @margin: 10px; @padding: 20px) {
color: @color;
margin: @margin;
padding: @padding;
}
.class1 {
.mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
.mixin(#efca44; @padding: 40px);
}