less是 一种 动态 样式 语言.
学习网址:http://www.bootcss.com/p/lesscss/
1. 变量
@关键字来定义:
LESS 中的变量为完全的 ‘常量’ ,所以只能定义一次.
@color: #4D926F;
2.混合(Mixins)
混合可以将一个定义好的class A轻松的引入到另一个class B中,实现class B继承class A中的所有属性。也可以带参数地调用,像使用函数一样。
- 带参数混合
@color:#f00;
.rounded-corners (@radius: 5px) { //参数设置默认值
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
@arguments 变量
@arguments包含了所有传递进来的参数.
.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
box-shadow: @arguments;
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px);
输出:
box-shadow: 2px 5px 1px #000;
-moz-box-shadow: 2px 5px 1px #000;
-webkit-box-shadow: 2px 5px 1px #000;
- 模式匹配
相当于编程语言中的if语句,即如果满足条件,则执行。
.triangle(top; @border_width: 5px; @border_color: #000;) {
border: @border_width solid transparent;
border-bottom-color: @border_color;
}
.triangle(bottom; @border_width: 5px; @border_color: #000;) {
border: @border_width solid transparent;
border-top-color: @border_color;
}
.triangle(left; @border_width: 5px; @border_color: #000;) {
border: @border_width solid transparent;
border-right-color: @border_color;
}
.triangle(right; @border_width: 5px; @border_color: #000;) {
border: @border_width solid transparent;
border-left-color: @border_color;
}
// 默认执行(无论是否匹配,都会执行)
.triangle(@_; @border_width: 5px; @border_color: #000;) {
width: 0px;
height: 0px;
overflow: hidden;
}
.box {
.triangle(top);
}
3.嵌套规则
在一个选择器中嵌套另一个选择器来实现继承,能很大程度减少代码量
& 关键字表示父级元素
#header {
h1 {
font-size: 26px;
font-weight: bold;
&.nav{
font-size:20px;
}
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
4.函数
运算提供了加,减,乘,除操作;可以做属性值和颜色的运算,这样就实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码,可以操作属性值。
color函数
lighten(@color, 10%); // 返回比@color 轻 10%的颜色
darken(@color, 10%); // 返回比@color 深 10%的颜色
saturate(@color, 10%); // 返回比@color更饱和10%*的颜色
desaturate(@color, 10%); // 返回比@color少10%*饱和的颜色
fadein(@color, 10%); // 返回比@color更多透明10%*的颜色
fadeout(@color, 10%); // 返回比@color少透明10%*的颜色
fade(@color, 50%); // 返回@color,透明度为50%
spin(@color, 10); // 返回色调比@color大10度的颜色
spin(@color, -10); // 返回色调比@color小10度的颜色
mix(@color1, @color2); // 返回@color1和@color2的混合的颜色
math 函数
round(1.67); // returns `2`
ceil(2.4); // returns `3`
floor(2.6); // returns `2`
5.运算
有变量即可以运算,单位可加可不加
@the-border: 1px;
@base-color: #111;
@red: #842210;
#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}
#footer {
color: @base-color + #003300;
border-color: desaturate(@red, 10%);
}
6.注释
// 注释不进行编译
/* */进行编译
7.字符串插值
使用 @{name}
@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");