less学习:基础语法总结
一、 less是什么
Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。
注意1):less使用.less
作为文件后缀。通过第三方工具,可以一键或者实时编译成对应的css文件。也就是说:实际项目中,我们编辑的是.less
文件,但引用时依旧像往常一样引用.css
文件。通过第三方工具(例如Koala),可以实现.less
文件一发生改变,就生成同名的.css
文件。
注意2):LESS的基础语法基本上分为以下几个方面:变量、混合(Mixins)、嵌套规则、运算、函数、作用域等。
例子如下:
1).less文件显示:
@base: #f938ab;/*定义变量*/ .box { color: @base; /*使用函数*/ border-color: lighten(@base, 30%); /*嵌套*/ &-content{ width:100%; } .title{ color:#ccc; } }
通过第三方工具(例如Koala),翻译成的css样式如下:
2).css文件显示:
.box { color: #f938ab; border-color: #fdcdea; } .box-content { width: 100%; } .box .title { color: #ccc; }
二、less的语言特性
1、变量
注意,由于变量只能定义一次,其本质就是“常量”;
@nice-blue: #5B83AD; @light-blue: @nice-blue + #111; #header { color: @light-blue; }
编译为:
#header {
color: #6c94be;
}
变量代换 :如选择器名称,属性名称,URL和@import
1):选择器
@mySelector: banner; .@{mySelector} { font-weight: bold; line-height: 40px; margin: 0 auto;
编译为:
.banner { font-weight: bold; line-height: 40px; margin: 0 auto; }
2):网址
@images: "../img"; // 用法 body { color: #444; background: url("@{images}/white-sand.png"); }
3):import语句: @import "@{themes}/tidal-wave.less";
<html> <head> <link rel="stylesheet" href="style.css" type="text/css" /> <title>LESS Variables in Import Statements</title> </head> <body> <div class="myclass"> <h2>Welcome to Yiibai Yiibai</h2> <p>LESS is a CSS pre-processor that enables customizable, manageable and reusable style sheet for web site.</p> </div> </body> </html>
@path : "http://www.yiibai.com/less"; @import "@{path}/external1.less"; .myclass{ color : #A52A2A; }
external1.less
.myclass{
background: #C0C0C0;
}
lessc style.less style.css
style.css
body {
background: #C0C0C0;
}
p {
color: #A52A2A;
}
输出的结果如下:
-
保存上述的HTML代码在 less_variables_interpolation_import.html 文件。
-
在浏览器中打开该HTML文件,得到如下输出显示。
4)属性
@property: color; .widget { @{property}: #0ee; background-@{property}: #999; }
编译后:
.widget { color: #0ee; background-color: #999; }
5)变量名:可以用一个变量名定义变量
@fnord: "I am fnord."; @var: "fnord"; content: @@var;
编译后:
content: "I am fnord.";
2、混合(Mixin):混合是包括从一个规则集到另一个规则集(“在混合”),一堆属性的一种方式。
.bordered { border-top: dotted 1px black; border-bottom: solid 2px black; }
我们要使用内的其他规则集这些属性。好了,我们只是在我们想要的属性,像这样的类名下降:
#menu a { color: #111; .bordered; } .post a { color: red; .bordered; }
属性.bordered
类现在会出现在两个#menu a
和.post a
。(请注意,您也可以使用#ids
如混入。)
1)带参数的mixin :混合也可以使用参数,这是变量传递给选择块
例子:
.border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; }
下面是能组合成的不同的规则集:
#header { .border-radius(4px); } .button { .border-radius(6px); }
2)参数混合也可以有默认值的参数:
.border-radius(@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; }
我们可以调用它的默认值:
#header { .border-radius; }
//输出:它将包括为5px边界半径。
3)也可以使用不带参数的参数混入。
.wrap() { text-wrap: wrap; white-space: -moz-pre-wrap; white-space: pre-wrap; word-wrap: break-word; } pre { .wrap }
编译后:
pre { text-wrap: wrap; white-space: -moz-pre-wrap; white-space: pre-wrap; word-wrap: break-word; }
4)混合多参数:参数或者是分号或逗号分隔。建议使用分号。
- 两个参数,每一个包含逗号分隔的列表:
.name(1, 2, 3; something, else)
, - 三个参数,每个包含一个数字:
.name(1, 2, 3)
, - 使用虚拟分号创建混入调用一个参数包含逗号分隔的CSS列表:
.name(1, 2, 3;)
, - 逗号分隔的默认值:
.name(@param1: red, blue;)
。
.mixin(@color) { color-1: @color; } .mixin(@color; @padding:2) { color-2: @color; padding-2: @padding; } .mixin(@color; @padding; @margin: 2) { color-3: @color; padding-3: @padding; margin: @margin @margin @margin @margin; } .some .selector div { .mixin(#008000); }
编译后:
.some .selector div { color-1: #008000; color-2: #008000; padding-2: 2; }
5)命名参数:任何参数都可以通过其名称来引用,它们不必是任何特殊的顺序
.mixin(@color: black; @margin: 10px; @padding: 20px) {
color: @color;
margin: @margin;
padding: @padding;
}
.class1 {
.mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
.mixin(#efca44; @padding: 40px);
}
编译后:
.class1 {
color: #33acfe;
margin: 20px;
padding: 20px;
}
.class2 {
color: #efca44;
margin: 10px;
padding: 40px;
}
6)@arguments
变量:@arguments
有内混入特殊的意义,它包含传递的所有参数
.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) { -webkit-box-shadow: @arguments; -moz-box-shadow: @arguments; box-shadow: @arguments; } .big-block { .box-shadow(2px; 5px); }
编译后:
.big-block { -webkit-box-shadow: 2px 5px 1px #000; -moz-box-shadow: 2px 5px 1px #000; box-shadow: 2px 5px 1px #000; }
3、嵌套规则
例子如下:
#header { color: black; } #header .navigation { font-size: 12px; } #header .logo { width: 300px; }
可以进行嵌套成如下的写法:
#header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; } }
由此产生的代码更简洁,模仿你的HTML的结构。
也可以捆绑伪元素使用这种方法,改写为一个mixin(&
表示当前选择的父):
.clearfix { display: block; zoom: 1; //捆绑伪元素 &:after { content: " "; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; } }
4、运算:任何数字、颜色或者变量都可以参与运算。
例子1:
@base: 5%; @filler: @base * 2; @other: @base + @filler; color: #888 / 4; background-color: @base - color + #111; height: 100% / 2 + @filler;
例子2:
@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); }
编译为:
.class { width: 50%; color: #f6430f; background-color: #f8b38d; }
1)作为函数使用的Mixin
例子1:
.mixin() { @width: 100%; @height: 200px; } .caller { .mixin(); width: @width; height: @height; }
编译后:
.caller { width: 100%; height: 200px; }
例子2:
.average(@x, @y) { @average: ((@x + @y) / 2); } div { .average(16px, 50px); padding: @average; }
编译后:
div {
padding: 33px;
}
2)Mixin Guards的用法:常用的条件运算符:>、>=、<、<=、=;我们设定的条件还可以使用IS函数:iscolor、isnumber、isstring、iskeyword、isurl、ispixel、ispercentage...
//->LESS代码 .mixin (@a) when (lightness(@a) >= 50%) { background-color: black; } .mixin (@a) when (lightness(@a) < 50%) { background-color: white; } .box1{ .mixin(#ddd); } .box2{ .mixin(#555); } //->编译为CSS的结果 .box1 { background-color: black; } .box2 {
when是在设置条件,除了像上面的写法外,我们还可以通过when设置多个条件,而且条件中可以使用is函数。
//->LESS代码:使用IS函数 .mixin (@a; @b: 0) when (isnumber(@b)) { ... } .mixin (@a; @b: black) when (iscolor(@b)) { ... } //->LESS代码:多条件,可以使用and或者逗号间隔 .mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }
我们还可以通过与&特性结合实现'if'类型的语句。
//->LESS代码:这里的意思是如果为true,.box的文字颜色才是白色 @my-option: true; & when (@my-option = true) { .box { color: white; }
3)Loops ,当一个混合递归调用自己,再结合Guard条件表达式,就可以写出循环结构。使用递归循环最常见的情况就是生成栅格系统的CSS:
//->LESS代码 .generate-columns(4); .generate-columns(@n, @i: 1) when (@i <= @n) { .column-@{i} { width: (@i * 100% / @n); } .generate-columns(@n, (@i + 1)); } //->输出的CSS .column-1 { width: 25%; } .column-2 { width: 50%; } .column-3 { width: 75%; } .column-4 {
4)Merge :Merge特性可以从多个属性中将值,集合到某一个样式属性的列表中(也就是多样式效果)。在编写的时候,+代表以逗号分隔,+_代表多个之前以空格分隔。
//->LESS代码 .mixin() { box-shadow+: inset 0 0 10px #555; } .myclass { .mixin; box-shadow+: 0 0 20px black; } .mixin2() { transform+_: scale(2); } .myclass2 { .mixin2; transform+_: rotate(45deg); } //->输出的CSS .myclass { box-shadow: inset 0 0 10px #555, 0 0 20px black; } .myclass2 {
6、命名空间和访问器
有时候,你可能为了更好组织 CSS 或者单纯是为了更好的封装,将一些变量或者混合模块打包起来,一些属性集之后可以重复使用。
例子:
/*模块*/ #bundle { .button { display: block; border: 1px solid black; background-color: grey; &:hover { background-color: white } } .tab { /**/ } .citation { /**/ } } /*下面复用上面的一部分代码*/ #header a { color: orange; #bundle > .button; }
编译生成:
#bundle .button { display: block; border: 1px solid black; background-color: grey; } #bundle .button:hover { background-color: white; } #bundle .tab { /**/ } #bundle .citation { /**/ } /*下面复用上面的一部分代码*/ #header a { color: orange; display: block; border: 1px solid black; background-color: grey; } #header a:hover { background-color: white; }
LESS中的命名空间,属于高级语法,在日常项目中应用比较广泛。我们可以用LESS中的命名空间为自己封装一些日常比较常用的类名,以便以后做项目的时候更有效率。
7、作用域
子类里面的优先,找不到才往父类里找。
例子:
@var: red; #page { @var: white; #header { color: @var; // 这里值是white } }
也不会因为变量后面定义而影响作用域:
@var: red; #page { #header { color: @var; // white } @var: white; }
和上面的例子是一样的。
8、注释
css仅支持块注释。less里块注释和行注释都可以使用:
/* 一个注释块 style comment! */ @var: red; // 这一行被注释掉了! @var: white;
9、导入
和css一样,你可以导入一个.less
文件,此文件中的所有变量就可以全部使用了。如果导入的文件是.less
扩展名,则可以将扩展名省略掉:
@import "library"; // library.less @import "typo.css";
1)Import Directives :从其他样式表中导入样式。
//->LESS代码 @import "public.less"; .box { &:after { .clear; } } //->输出的CSS:会把public中的样式也输出 .clear { display: block; height: 0; content: ""; clear: both; zoom: 1; } .box:after { display: block; height: 0; content: ""; clear: both; zoom: 1; }
我们发现上述的操作虽然实现了调取使用,但是会把public中的less也编译到了自己的这个css中,如果不想编译的话,我们需要配置一些参数:
//->LESS代码 @import (reference) "public.less"; .box { &:after { .clear; } } //->输出的CSS: .box:after { display: block; height: 0; content: ""; clear: both; zoom: 1; }
除了reference以外我们还可以配置一些其他的参数值: inline:在输出中包含源文件但不加工它 less:将文件作为Less文件对象,无论是什么文件扩展名 css:将文件作为CSS文件对象,无论是什么文件扩展名 once:只包含文件一次(默认行为) multiple:包含文件多次
具体参考:http://lesscss.cn/