Less学习
1st less介绍:
什么是less?
less是一个CSS预处理器,可以为网站启用可自定义、可管理、可重用的样式表。它是一种动态样式表语言(第一个版本是ruby写的),扩展了css的功能。
它可以扩展css,然后编译成常规css,从而通过浏览器进行读取!它提供了诸如变量、函数、mixins多功能,可以动态构建css。
less的优点:
- 排除代码冗余,跨浏览器支持友好!
- less用javascript设计,并且创建在live中,编译速度比其他预处理器要快!
- less使代码代码保持模块化,可读性提高,易于更改维护!
历史:
LESS由 Alexis Sellier 于2009年设计,开源,第一个版本使用ruby编写,后续版本采用javascript编写!
2nd less 安装
安装nodejs,然后使用npm(nodejs 的包管理器)进行安装!
(尝试了切换路径安装,不过好像npm默认安装到c盘下,╮(╯▽╰)╭)
示例:
test.less:
1 @testColor:gold; 2 .div1{ 3 width: 200px; 4 height: 200px; 5 background-color: @testColor; 6 }
使用以下命令将test.less编译成test.css:
注意:test.less处于哪个文件夹,需要切换到相应文件夹,然后运行命令!
test.css:
1 .div1 { 2 width: 200px; 3 height: 200px; 4 background-color: gold; 5 }
注意:每次更改test.less后,如需更改test.css,都需要重新运行lessc命令!
3rd less 语言特性:
3.1 less变量(variables):注意:通常less变量是类似“常数”,只能被定义一次!
以下:定义了testColor变量!
@testColor:gold; .div1{ background-color: @testColor; }
编译后:
.div1{ background-color:gold; }
3.2 less混合(mixins):使用类或id选择器(与css样式相同)申明mixins。这样可以将一个类的属性用于另一个类!
示例:
.div6 { p{ color: blueviolet; .border; } span{ color: blue; .border; } }
上面采用了嵌套,如果不采用,上半部分等价于下面:
.div6 p{ color: blueviolet; .border; }
编译后:
.div6 p { color: blueviolet; border-color: gold; border-top-width: 5px; border-style: dashed; border-radius: 2px; } .div6 span { color: blue; border-color: gold; border-top-width: 5px; border-style: dashed; border-radius: 2px; }
3.3 less 嵌套(Nested Rules):
示例:
<div class="div2"> <h1>this is div2</h1> <div class="div3"><h1>this is div3</h1></div> </div>
test.css这样写:
.div2 h1 { color: goldenrod; font-style: italic; } .div2 .div3 h1 { color: silver; font-style: initial; }
如今test.less这样写:
.div2{ h1{ color: goldenrod; font-style: italic; } .div3{ h1{ color: silver; font-style: initial; } } }
看起来结构更加清晰,层次分明!
3.4 嵌套规则及冒泡(Nested Directives and Buddling):诸如media和keyframe的规则,可以像选择器被正常的嵌套。但是他们编译成css文件后,将会出现在最上方!可参考
示例:
.test{ @media screen { color: gold; @media (min-width: 500px){ color:blue; } } }
编译后变为:(@media提至最上方!)
@media screen and (min-width: 500px) { .test { color: blue; } }
3.5 less 操作(operations):它可以支持一些+,-,*,/(加减乘除)的运算操作!可以对颜色或变量进行操作!
示例:
@initialWidth:100px; .div4{ width:@initialWidth *2; height: 100px; background-color: gold; }
可编译为:
.div4 { width: 200px; height: 100px; background-color: gold; }
3.6 less转义(Escaping):~'anything' 或 ~"anything"将会转化为 anything!
示例:
.div4::after{ content:~ "'abcd//less'"; }
lessc将会将其编译为:
.div4::after { content: 'abcd//less'; }
3.7 less函数(functions):less提供了一些转换颜色,操作字符串,计算数学等函数。参考:点击此处!
示例:
@base:gold; @num:0.6; .div5{ width: percentage(@num);//return 50%; color: saturate(@base,10%);//increase saturation of base by 10%; border: 1px solid black; }
编译的css为:
.div5 { width: 60%; color: #ffd700; border: 1px solid black; }
3.8 命名空间和访问器(Namespaces and Accessors):将mixins分组,从而可以避免命名冲突,封装使用!
示例:
#rule{ color:red; .class1{ color: blue; background-color: gold; .class2{ color: orange; } } } .test7{ font-size: 15px; #rule > .class1 >.class2; }
3.9 less 变量范围(Scope):与编程语言很相像;它们首先从本地作用域进行查找,如未找到,则一级一级向上查找!
@var:red; .div7{ @var:orange; color: @var; }
编译后:
.div7 { color: orange; }
注意:less不存在javascript中的变量提权问题,变量或者mixins定义在使用前或使用后效果一样!
3.10 注释(comments):块注释(/* */)和内联注释(//)
示例:
/* this is block comments; */ @var:red; .div7{ @var:orange; //this is inline comments; color: @var; }
编译后:
/* this is block comments; */ .div7 { color: orange; }
注意:我们可以显然观察到,块注释的内容保留到了css中,而内联注释的没有被保存!
3.11 导入(importing):导入一个.less文件后,其中所有的变量就可以在当前文件下使用了!
示例:
@import 'test.less'; .div{ color: @testColor; }
注意:编译后,test.css也将会被编译,即导入的less文件也会被编译!
4th less中级内容
4.1 变量插值(Variable Interpolation):
示例:
@val:div1; .@{val}{ border:solid; }
编译后:
.div1 { border: solid; }
给变量定义变量名:
示例:
@first:"I'm first"; @second: "first"; div1::after{ content: @@second; }
编译后:
div1::after { content: "I'm first"; }
延迟加载(Lazy Evaluation):在使用以前申明变量与使用之后申明变量效果一样。
4.2 扩展(Extend):Extend是一个Less伪类,通过使用:extend在其引用(reference)的选择器(下面指h2)中扩展另一个选择器(下面指.test)。
示例:
h2{ &:extend(.test); font-size:13px; } .test{ color: red; }
编译后:
h2 { font-size: 13px; } .test, h2 { color: red; }
扩展(Extend)的语法:
1.
.a:extend(.b){}; //上面代码与下面代码等价! .a{ &:extend(.b); }
2.
// 扩展所有带有.d的选择器,如.x.d 和.d.x .c:extend(.d all){}; //扩展仅是.d的选择器 .c:extend(.d){};
更多有关Extend的语法:参考链接
4.3 混合(mixins):
.test1{ color: blue; } .test2{ background-color: black; } .test3{ .test1; .test2; }
注意:mixins调用时,没有参数,.test1()与.test2()表现是一样的!
.test3 { color: blue; background-color: black; }
注意:如果.test2{background-color:black}变为.test2(){background-color:black;}编译后.test2不会显示出来!!!
混合参数:
.border(@width;@style;@color){ border: @width @style @color; } .test11{ .border(1px;solid;gold); }
编译后:
.test11 { border: 1px solid gold; }
混合函数:
.average(@x,@y){ @average:((@x+@y)/2); } .test12{ .average(10, 20);//调用函数 padding: @average;//使用函数的返回值 }
编译后:
.test12 { padding: 15; }
在线less编译器:
结尾:
更多学习,访问官网!
也可访问:Less教程