目录
- 变量
- 混合
- 带参数混合
- 嵌套规则
- 运算
- Color函数
- 命名空间
- 作用域
- Importing
变量
less中可以定义变量，用于后文使用。
//使用@符号开始
@redColor: red;
//这样使用
.header {
color: @redColor
}
//会被编译成
.header {
color: red;
}
//还可以这样使用
@str: redColor; //定义一个字符串
@redColor: red;
.header {
color: @@str
}
//编译成
.header {
color: red; //得到同样的效果
}
运算
@color1: #000;
@other: @color1 + #111;
div {
color: @other;
}
混合
混合顾名思义，就是将多种样式进行组合在一起。比如：
.bg-red {
background-color: red;
}
.color-white {
color: white;
}
div {
width: 100%;
height: 200px;
.bg-red;
.color-white;
}
//最终回被编译成
.bg-red {
background-color: red;
}
.color-white {
color: white;
}
div {
width: 100%;
height: 200px;
background-color: red;
color: white;
}
当然也可以使用变量，也可以嵌套。上边这样写，编译后会多处两个样式.bg-red和.color-white暴露在了作用域中。如果觉得不太好，那么带参数混合可以很好解决这样的问题。
带参数混合
.bg-red() {
background-color: red;
}
.color(@c) {
color: @c;
}
.border(@px: 1px, @type: solid, @c: red) { //可以使用默认参数
border: @px @type @c;
}
.border2(@px: 1px, @type: solid, @c: red) {
border: @arguments; //可以使用arguments代替所有参数
}
div {
.bg-red;
.color(white);
.border();
.border2; //可以添加括号，可以不添加
}
//编译后，不会出现.bg-red，.border等
div {
background-color: red;
color: #ffffff;
border: 1px solid #ff0000;
border: 1px solid #ff0000;
}
使用参数的传递的时候，匹配几个就会编译几个，而且还可以通过名称传递，而不用管其顺序。
.mixins(@color: red; @width: 200px; @height: 300px) {
width: @width;
height: @height;
color: @color;
}
div {
.mixins(@height: 400px)
}
//编译成
div {
width: 200px;
height: 400px;
color: red;
}
条件规则
@media: mobile;
@color: white;
.mixin (@c) when (@media = mobile) { color: @c; }
.mixin (@c) when (@media = desktop) { color: @c;border:1px; }
.class1 {
.mixin(@color);
}
//编译成
.class1 {
color: white;
}
嵌套规则
.header {
height: 300px;
.title {
width: 200px;
}
&:hover {
background-color: red;
}
}
//编译成
.header {
height: 300px;
}
.header .title {
width: 200px;
}
.header:hover {
background-color: red;
}
Color函数
//可以使用许多种函数操作color，如：
lighten(@color, 10%); // 返回一个比@color还要淡10%的color
darken(@color, 10%); // 返回一个比@color还要深10%的color
命名空间
将嵌套灵活运用，就变成了命名空间的用法。
#home {
.title {
height: 80px;
line-height: 80px;
}
.content {
color: gray;
}
.footer {
height: 100px;
background-color: black;
}
}
.title {
#home > .title;
}
//编译成
#home .title {
height: 80px;
line-height: 80px;
}
#home .content {
color: gray;
}
#home .footer {
height: 100px;
background-color: black;
}
.title {
height: 80px;
line-height: 80px;
}
像上面这样，会把#home .title等暴露出来，如果不想暴露，则可以在#home后边加上括号，文章上边提到过。这样就可以不用暴露在编译后的内容代码中
#home() {
.title {
height: 80px;
line-height: 80px;
}
.content {
color: gray;
}
.footer {
height: 100px;
background-color: black;
}
}
.title {
#home > .title;
}
//编译成
.title {
height: 80px;
line-height: 80px;
}
作用域
从当前模块作用域的最内层开始查找变量
@var: red;
#page {
@var: white;
#header {
color: @var;
}
}
#footer {
color: @var;
}
//编译成
#page #header { color: white; }
#footer { color: red; }
Importing
@import 'xxx/xxx/public.less' //导入public.less
@import 'xxx/xxx/public.css' //导入public.css
@import 'xxx/xxx/public' //导入public.less
这是学习记录，如想深入研究，建议拜访Less教程网站或者lesscss.cn
