fghgfhgfhgfhLess是一种动态样式语言,属于CSS预处理语言的一种。它使用类似CSS的语法,为CSS赋予动态语言的特性,如变量、函数、运算等。今天开始学习Less...
一、环境
通过<script>标签引入.less文件即可实现在服务器端将less预编译为css样式。
<script type="text/javascript" src="less.js"></script>也可通过监测less样式,自动编译为css,从而减少修改less代码后需要按F5刷新后才能看到改变后的效果。
<script>less = { env: 'development'};</script> <script src="less.js"></script> <script>less.watch();</script
比较常用的less编译软件如Koala等。
二、注释
//单行注释不会进行编译 /*多行注释作为css的/*注释...*/形式进行编译*/
三、变量
定义采用"@变量名:变量值"形式,使用时采用"@变量名"或"@{变量名}"的形式。局部作用域高于全局作用域。
Less源码:
@c:color; @div:.div; @h:200px; @w:200px; @s1:'hello ';//要保留空格使用单引号或双引号,否则空格被忽略 @s2:world; @{div}{ @c:#ccc; width:@w; height:@h; content:'@{s1}@{s2}'; }
编译后的css:
.div { width: 200px; height: 200px; content: 'hello world'; }
还可以通过extract函数获得列表元素,length获取元素个数,例如
@colors:#fff #ccc #ddd; .div{ background:extract(@colors,1); height:12px * length(@colors); }编译后的css:
.div { background: #ffffff; height: 36px; }
四、嵌套
Less源码:
.main{ height:200px; width:500px; .main-left{ float:left; height:200px; width:100px; } .main-right{ float:right; right:0; height:200px; width:400px; .main-right-top{ height:50px; } .main-right-content{ height:120px; } .main-right-bottom{ height:30px; } } }
编译后的css:
.main { height: 200px; width: 500px; } .main .main-left { float: left; height: 200px; width: 100px; } .main .main-right { float: right; right: 0; height: 200px; width: 400px; } .main .main-right .main-right-top { height: 50px; } .main .main-right .main-right-content { height: 120px; } .main .main-right .main-right-bottom { height: 30px; }
五、父选择器&
通过&选择完整的父选择器,可以通过&追加,生成新的选择器,&:添加伪类,父选择器是组选择器时,会生成新选择器。
Less源码:
#lol .btn{ &:hover{ cursor:pointer; } &-m,&t{ font-size:10px; } .cng &{ text-indent:1px; } } #lol1,.lol1{ &:hover{ cursor:pointer; } & + &{ cursor:pointer; } }编译后的css:
#lol .btn:hover { cursor: pointer; } #lol .btn-m, #lol .btnt { font-size: 10px; } .cng #lol .btn { text-indent: 1px; } #lol1:hover, .lol1:hover { cursor: pointer; } #lol1 + #lol1, #lol1 + .lol1, .lol1 + #lol1, .lol1 + .lol1 { cursor: pointer; }
六、@import
1、@import (reference)"文件路径"
将引入的文件作为样式库使用,因此文件中样式不会被直接编译为css样式规则。当前样式文件通过extend
和mixins
的方式引用样式库的内容。
2、@import (inline)"文件路径"
用于引入与less不兼容的css文件,通过inline配置告知编译器不对引入的文件进行编译处理,直接输出到最终输出。注意:引入的文件和当前文件会被编译为一个样式样式。
3、@import (less)"文件路径"
默认使用该配置项,表示引入的文件为less文件。
4、@import (css)"文件路径"
表示当前操作为CSS中的@import
操作。当前文件会输出一个样式文件,而被引入的文件自身为一个独立的样式文件.
5、@import (once)"文件路径"
表示对同一资源可引入多次。
6、@import (multiple)"文件路径"
表示对同一资源可引入多次。
七、继承
7.1 语法
1、<selector>:extend(<parentSelector>){}
2、<selector>{&:(<parentSelector>);}
Less源码:
.parent{ width:50px; } .son1:extend(.parent){ height:10px; } .son2{ &:extend(.parent); height:20px; }
编译后的css:
.parent{ width:50px; } .son1:extend(.parent){ height:10px; } .son2{ &:extend(.parent); height:20px; }
7.2 all关键字
all关键字会匹配所有parentSelector中的样式,并用selector替换parentSelector生成新的选择器。
Less源码:
.parent{ height: 100px; .hair{ color: #f27; } [name=eyes]{ color: #768; } } .son:extend(.parent all){}
css源码:
.parent, .son { height: 100px; } .parent .hair, .son .hair { color: #f27; } .parent [name=eyes], .son [name=eyes] { color: #768; }八、混合(Mixin)
less源码:
.parent{ width:20px; } .parent1(@h){ height:@h; } .parent3(@fs:10px){ font-size:@fs; } .son{ .parent; .parent1(100px); .parent3(); }
编译后的css:
.parent { width: 20px; } .son { width: 20px; height: 100px; font-size: 10px; }
九、匹配模式
Less源码:
.tri(top,@w,@c){ border-width:@w; border-style:solid; border-color:transparent transparent @c transparent; } .tri(bottom,@w,@c){ border-width:@w; border-style:solid; border-color:@c transparent transparent transparent; } .tri(left,@w,@c){ border-width:@w; border-style:solid; border-color:transparent @c transparent transparent; } .tri(right,@w,@c){ border-width:@w; border-style:solid; border-color:transparent transparent transparent @c; } .tri(@_,@w,@c){ width:0px; height:0px; } .tri{ .tri(right,50px,green); }
编译后的css
.tri { border-width: 50px; border-style: solid; border-color: transparent transparent transparent #008000; width: 0px; height: 0px; }
十、条件、循环
when关键字实现条件控制,递归实现循环控制
Less代码:
<span style="color:#009900;">/*true值匹配*/</span> .truth(@a) when(@a){ &::after{ content:@a; } } .myDiv1{ .truth(true); } <span style="color:#006600;">/* 类型判断函数 * iscolor * isnumber * isstring * iskeyword * isurl */</span> .color(@c) when(iscolor(@c)){ color:@c; } <span style="color:#006600;">/* 单位判断函数 * ispixel * ispercentage * isem * isunit */</span> .myDiv2(@h) when(ispixel(@h)){ height:@h; } <span style="color:#006600;">/* 关系运算符 * > * < * >= * <= */</span> .mydiv3(@h) when (@h>100){ height:@h; } .temp{ .mydiv3(100); } <span style="color:#006600;">/* 逻辑运算符 * and * or * not */</span> .mydiv4(@h,@w) when(@h>100) and (@w>200){ width:@w; height:@h; } <span style="color:#006600;">/*& when实现if*/</span> @tmp:true; & when(@tmp){ .txt{ border-style:solid; } } <span style="color:#006600;">/*循环*/</span> .columns(@n,@i:1) when(@i<=3){ .columns-@{i}{ width:@i * 100% /100; } .columns(@n,@i + 1); } .columns(4);
编译后的css:
.myDiv1::after { content: true; } .txt { border-style: solid; } /*循环*/ .columns-1 { width: 1%; } .columns-2 { width: 2%; } .columns-3 { width: 3%; }
十一、运算符
在使用运算符时,运算符与运算数之间一定要有空格,否则会报错。当运算数之间单位不同时,以第一个运算数为准。
十二、函数