学习less;
less是什么,用途,怎么用,使用中的问题,注意事项,
1.LESS是一种由Alexis Sellier设计的动态层叠样式表语言。第一个版本由Ruby写,逐渐被替换为JavaScript,LESS可以在客户端上运行(IE6+、Webkit、Firefox),也可以在服务端运行(Node.js、Rhino).
2.LESS 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 CSS 文件.
3.LESS 并没有裁剪 CSS 原有的特性,更不是用来取代 CSS 的,而是在现有 CSS 语法的基础上,为 CSS 加入程序式语言的特性。
意义:
改变传统样式的编写方式,以面向对象的方式编写,提高开发效率.
怎么用:
在服务器端,如Node.js,我们有专门的less编译模块。如果是在客户端,需要从LESS官网下载less.js文件,然后在HTML页面中引入.???
CDN (内容分发网络,其目的是使用户可就近取得所需内容,解决 Internet网络拥挤的状况,提高用户访问网站的响应速度,减少服务器的压力。CDN最常用的用途是用来给终端用户发布静态文件,如图片、java脚本、css文件等。请注意,该服务仅仅用于处理静态文件,如主要的网站页面,所有动态内容,都是由主网站服务器提供。这通常是分开处理的,通过不同的子域名进行处理,如images.mydomain.com,与www.是分开的。)
<script src="http://cdn.bootcss.com/less.js/1.7.0/less.min.js"></script>
注意事项:
在浏览器中使用less.js开发是很好的,但不推荐用于生产环境中。浏览器端使用是在使用LESS开发时最直观的一种方式。如果是在生产环境中???,对性能要求比较高的场合,建议使用node或者其它第三方工具先编译成CSS再上线使用。(使用Grunt插件,实现一个简单的Web服务器,同时有一个文件监听功能,监听less文 件的修改,然后将修改的Less实时编译为CSS。)
一、定义变量:@width:150px;@color:#f5f5f5;把重复用到的写成变量,注意只能定义一次,本质是常量;
@bgcolor:#000;@hoverbgcolor:dark(@bgcolor,10%);
Less中的变量有以下规则:
- 以@作为变量的起始标识,变量名由字母、数字、_和-组成
- 没有先定义后使用的规定;
- 以最后定义的值为最终值;
- 可用于rule值、rule属性、rule属性部件、选择器、选择器部件、字符串拼接;???
用于 选择器部件,必须使用"@{变量名}" 的形式
- 定义时 "@变量名: 变量值;" 的形式;引用时采用 "@变量名" 或 "@{变量名}" 的形式;
- 存在作用域,局部作用域优先级高于全局作用域;
less变量除了支持#FFF,12px,12,test等单值类型外,还支持列表类型,通过内置函数extract通过索引获取列表元素,通过内置函数length获取列表的元素个数
@colors: #FFF, #0F0, #F0F; .skin{ color: extract(@colors, 0); height: 12px * length(@colors); }
-------------------------------------------
.skin{ color: #FFF; height: 36px; }
3. 嵌套(Nested)
4. 父选择器引用(ParentSelector)
- 采用&引用完整的父选择器
- 可通过追加和预追加的方式加工&,从而生成新的选择器
- 通过
&::after
等方式添加伪元素、伪类样式规则集合 - 同一个选择器可使用多个&
- 通过在选择器后添加 "空格&"的方式,可将当前选择器排列到最前面
- &指向组选择器时,会生成新的组选择器
Less源码:
/* * 采用&引用完整的父选择器 * 可通过追加和预追加的方式加工&,从而生成新的选择器 * 通过&::after等方式添加伪元素样式规则集合 * 同一个选择器可使用多个& * 通过在选择器后添加 "空格&"的方式,可将当前选择器排列到最前面 */ @bg: #aaa; #ps1 .btn{ background-color: @bg; border-radius: 5px; &:hover{ background-color: lighten(@bg, 30%); cursor: pointer; } &-msg, &-eof{ color: blue; } .no-borderradius &{ background-image: url('img/btn-bg.png'); } } /* * &指向组选择器时,会生成新的组选择器 */ #dummy1, .dummy1{ &:hover{ color: red; } & + &{ font-size: 12px; } }
最终输出:
5. 导入指令(Import)
less样式文件可通过 @import '文件路径'; 引入外部的less文件。
注意:
- 不带扩展名或带非.less的扩展名均被视为less文件;
@import
可出现在任何位置,而不像css的@import
那样只能放在文件第一行。另外
@import
还提供了6个可选配置项(分别为reference
,inline
,less
,css
,once
,multiple
),用来改变引入文件的特性。语法为: @import (reference)'文件路径'; 。下面为各配置项的具体说明:- 1. @import (reference) "文件路径";
- 将引入的文件作为样式库使用,因此文件中样式不会被直接编译为css样式规则。当前样式文件通过
extend
和mixins
的方式引用样式库的内容。 - 2. @import (inline) "文件路径";
- 用于引入与less不兼容的css文件,通过inline配置告知编译器不对引入的文件进行编译处理,直接输出到最终输出。
- 注意:引入的文件和当前文件会被编译为一个样式样式
- 3. @import (less) "文件路径";
- 默认使用该配置项,表示引入的文件为less文件。
- 4. @import (css) "文件路径";
- 表示当前操作为CSS中的
@import
操作。当前文件会输出一个样式文件,而被引入的文件自身为一个独立的样式文件 - 引入CSS的方法有两种,一种是@import,一种是link
@import url('地址');
<link href="地址" rel="stylesheet" type="text/css" />
现在绝大部分的网站都采用后一种link方式,原因在于
@import先加载HTML,后加载CSS
link先加载CSS,后加载HTML。
所以前者加载网页会出现令浏览者以外的格式,后者则是带格式的加载网页。 - 5. @import (once) "文件路径";
- 默认使用该配置项,表示对同一个资源仅引入一次。
- 6. @import (multiple) "文件路径";
- 表示对同一资源可引入多次。???引入多次干嘛??
-
6. 继承(Extend)
有两种语法形式, <selector>:extend(<parentSelector>){} 和 <selector>{ &:extend(<parentSelector>); }
Less源码:
.animal{ color: #fff; } /* 语法1:<selector>:extend(<parentSelector>){} */ .bear:extend(.animal){ width: 100px; height: 100px; } /* 语法2:<selector>{ &:extend(<parentSelector>); } */ .deer{ &:extend(.animal); width: 50px; height: 50px; }
最终输出:
.animal, .bear, .deer { color: #fff; } /* 语法1:<selector>:extend(<parentSelector>){} */ .bear { width: 100px; height: 100px; } /* 语法2:<selector>{ &:extend(<parentSelector>); } */ .deer { width: 50px; height: 50px; }
注意事项:
*.parent{ height: 100px; .hair{ color: #f27; } [name=eyes]{ color: #768; } } // 匹配失败 .son:extend(.parent){} .son:extend(.hair){} // 匹配成功 .son:extend(*.parent [name='eyes']){} .son:extend(*.parent [name="eyes"]){} // all关键字会匹配所有包含parentSelector内容的选择器,并以selector替换parentSelector来生成新的选择器,parentSelector没有了。 // 下面的内容会生成 *.son,*.son .hair,*.son [name=eyes]三个新的选择器 .son:extend(.parent all){}
最终输出:
*.parent, *.son { height: 100px; } *.parent .hair, *.son .hair { color: #f27; } *.parent [name=eyes], .son, .son, *.son [name=eyes] { color: #768; }
Less源码:
@p1: .parent1; @p2: .parent2; .parent1{ height: 100px; } @{p2}{ height: 200px; } // 匹配失败 // 形式1,不支持以变量作入参 .son1:extend(@{p1}){} // 形式2,不支持以变量作为选择器的规则集合 .son1:extend(.parent2){} // 匹配成功 .son2:extend(.parent1){} @s3: son3; .@{s3}:extend(.parent1){}
最终输出:
.parent1, .son2, .son3 { height: 100px; } .parent2 { height: 200px; }
6.3.1. media query内的extend操作,仅能继承当前块的其他选择器样式。
注意:不能extend当前media query块内部的子media query块中的选择器样式;但可以extend父media query块的选择器样式。
Less源码:
.parent1{ height: 200px; } @media screen{ .parent1{ height: 100px; } // 无法继承子media query块的选择器样式 .son1:extend(.parent2){} @media (min-width: 1023px){ // 继承父media query块的选择器样式 .son2:extend(.parent1){} .parent2{ width: 200px; } } }
最终输出:
.parent1 { height: 200px; } @media screen { .parent1 { height: 100px; } } @media screen and (min-width: 1023px) { .parent2 { width: 200px; } }
6.3.2. 非media query内的extend操作,将会继承所有media query中匹配的选择器样式。
Less源码:
@media screen{ .parent{ height: 100px; } @media (min-width: 1023px){ .parent{ width: 200px; } } } .son:extend(.parent){}
最终输出:
@media screen { .parent, .son { height: 100px; } } @media screen and (min-width: 1023px) { .parent, .son { width: 200px; } }
6.4. 增强的mixin定义mixin时仅能使用类选择器和ID选择器,而extend操作可对应所有的选择器,因此当没有动态入参而又需要类选择器和ID选择器以外的选择器时,可使用extend来实现mixin的功能。????
Mixin相当于macro,会将样式规则内联到调用的位置中。而Less中的mixin有以下的注意点:
.animal{ .human{ #fsjohnhuang{ .hair{ color: #000; } } } } .front-end-monkey{ // 或者.animal.human#fsjohnhuang.hair(); // 或者.animal>.human>#fsjohnhuang>.hair; // 或者.animal>.human>#fsjohnhuang>.hair(); // 即可调用mixin .animal.human#fsjohnhuang.hair; }
最终输出:
.animal .human #fsjohnhuang .hair { color: #000; } .front-end-monkey { color: #000; }
7.2. 显示定义不带参数和带参数的样式库(mixin库),不会输出到最终输出中,仅供调用;
Less源码:
// 定义不带参数的mixin .animal(){ color: #000; } // 定义带参数的mixin // 注意:由于,和;均可用于作为参数分隔符,但由于如background、border等样式属性支持属性值组,而,则作为属性值组元素分隔符,因此推荐使用;作为参数分隔符 .dog(@type; @age){ height: @type * @age * 12px; } // 定义带参数默认值的mixin .cat(@type; @age:1){ height: @type * @age * 5px; } // 调用才会出现在最终输出 .chihuahua{ .dog(1;2); }
最终输出:
.chihuahua { height: 24px; }
7.3. mixin内置两个特殊的对象 @arguments 和 @reset 。@arguments代表mixin的所有入参,而@reset代表mixin的...入参数组。
Less源码:
.dog(@type;@age;@rest...){ height: @type * @age * 12px; border: @rest; } .cat(@solid;@w;@color){ border: @arguments; } .chihuahua{ .dog(1;2;solid;1px;red); } .mimi{ .cat(solid;2px;blue); }
最终输出:
.chihuahua { height: 24px; border: solid 1px red; } .mimi { border: solid 2px blue; }
7.4. mixin的重载可定义多个同名mixin,调用时只要参数数量匹配则会执行相应的mixin。
Less源码:
.dog(@name){ &::after{ content: @name; } } .dog(@name;@age){ height: @age * 4px; } .dog(@name;@age;@width:20px){ height: @age * 12px; width: @width; } // 仅匹配到 .dog(@name){ .one-dog{ .dog('chihuahua'); } // 匹配到.dog(@name;@age) 和 .dog(@name;@age;@width:20px) .two-three-dog{ .dog('two-three-dog', 2); } // 参数的模式匹配 // 当第一参数值为mimi时调用该mixin .cat(mimi, @age){ height: @age * 22px; } // 当第一参数值为mini时调用该mixin .cat(mini, @age){ height: @age * 12px; } // 不管第一参数值为啥均调用该mixin .cat(@any, @age){ color: #f3c; } .mycat{ .cat(mini, 1); }
最终输出:
.one-dog::after { content: 'chihuahua'; } .two-three-dog { height: 8px; height: 24px; width: 20px; } .mycat { height: 12px; color: #f3c; }
Less中通过混合(Mixin)后的when关键字来提供选择的作业控制,通过递归来实现循环的作业控制。
Less源码:
// 条件匹配 // true值匹配,仅实参为true时才匹配成功 .truth(@a) when (@a){ &::after{ content: @a; } } // 匹配成功 .truth1{ .truth(true); } // 匹配失败 .truth2{ .truth(#fff); } /* 类型判断函数 * iscolor * isnumber * isstring * iskeyword * isurl */ .bear(@color) when (iscolor(@color)){ color: @color; } /* 单位判断函数 * ispixel * ispercentage * isem * isunit */ .bear(@height) when (ispixel(@height)){ height: @height; } // =,>,>=,<=,< 关系运算符 .rich(@h) when (@h > 1000){ height: @h; } // and、not、or(使用,号表示) 逻辑运算符 .huge(@h, @w) when (@h > 180) and (@w > 180){ height: @h; width: @w; } // 使用& when()实现if语句 @debug: true; & when (@debug){ div{ border: solid 1px red; } } // 通过递归实现循环 .generate-columns(4); .generate-columns(@n, @i: 1) when (@i =< @n) { .column-@{i} { width: (@i * 100% / @n); } .generate-columns(@n, (@i + 1)); }
最终输出:
.truth1::after { content: true; } /* 类型判断函数 * iscolor * isnumber * isstring * iskeyword * isurl */ /* 单位判断函数 * ispixel * ispercentage * isem * isunit */ div { border: solid 1px red; } .column-1 { width: 25%; } .column-2 { width: 50%; } .column-3 { width: 75%; } .column-4 { width: 100%; }
Less还支持+、-、*、/运算符。但对单位不一致的运算数进行运算要注意以下两点:
1. 运算数与运算符间必须用空格分隔;
2. 以第一个运算数的单位作为运算结果的单位;
Less源码:
// 运算数与运算符间没有空格 @fail: 1px +2em; .fail{ height: @fail; } @success1: 1px + 2em; .success1{ height: @success1; } @success2: 2em + 1px; .success2{ height: @success2; }
最终输出:
.fail{ height: 1px 2em; } .success1{ height: 3px; } .success2{ height: 3em; }
Less为我们提供了一个功能强大的内置函数库,其中绝大部分为颜色处理函数。下面着重介绍Misc Function中的default函数、String Function中的escape函数和颜色处理函数。
示例:
// for teenager .person(@age) when (@age <= 19) and (@age >=13){ height: @age * 10px; } // for child .person(@age) when (@age <13){ height: @age * 6px; } // for adult .person(@age) when (default()){ height: 180px; } .son{ .person(10); } .daughter{ person(17); } .father{ .person(27); }
最终输出:
.son{ height: 60px; } .daughter{ height: 170px; } .father{ height: 180px; }
虽然上述示例逻辑上不合理。但可以看出default函数用于条件控制当中,充当else或switch语句中default的角色。
通过官网提供的综合示例我们可以更好理解它的用法:
// Less源码 .x { .m(red) {case-1: darkred} .m(blue) {case-2: darkblue} .m(@x) when (iscolor(@x)) and (default()) {default-color: @x} .m('foo') {case-1: I am 'foo'} .m('bar') {case-2: I am 'bar'} .m(@x) when (isstring(@x)) and (default()) {default-string: and I am the default} &-blue {.m(blue)} &-green {.m(green)} &-foo {.m('foo')} &-baz {.m('baz')} } // 最终输出 .x-blue { case-2: #00008b; } .x-green { default-color: #008000; } .x-foo { case-1: I am 'foo'; } .x-baz { default-string: and I am the default; }
注意:
1. default函数必须在条件控制语句当中使用;
2. default函数可实现比else更复杂的功能,如下:
// Less源码 .mixin(@value) when (ispixel(@value)) {width: @value} .mixin(@value) when not(default()) {padding: (@value / 5)} div-1 { .mixin(100px); } div-2 { /* ... */ .mixin(100%); } // 最终输出: div-1 { width: 100px; padding: 20px; } div-2 { /* ... */ }
顾名思义就是对字符串中的特定字符进行编码,该函数将对
\<space\>
,#
,^
,(
,)
,{
,}
,|
,:
,>
,<
,;
,]
,[ 和
=字符进行编码。
颜色处理函数又分为四大类:颜色定义函数(Color Definition)(
rgb,rgba,argb(用于安卓开发),hsl(当你想基于一种颜色的通道来创建另一种颜色时很方便,例如:
@new: hsl(hue(@old), 45%, 90%);
,hsla,hsv(用于Photoshop中可用色彩空间),)、颜色通道值获取函数(Color Channel)(获取你想要的R,G,B,A等等)、颜色通道值修改函数(Color Operation Function)(操作颜色变亮变暗变其他颜色)、混色函数(Color Blending)。
multiply
分别将两种颜色的红绿蓝 (RGB) 三种值做乘法运算,然后再除以 255,输出结果是更深的颜色。(译注:对应Photoshop中的“变暗/正片叠底”。)
这里仅仅介绍常用的lighten和darken函数。
lighten(color, amount) ,color为颜色,amount为增加的亮度值,取值范围为0-100%。
darken(color, amount) ,color为颜色,amount为减少的亮度值,取值范围为0-100%。
screen
与
multiply
函数效果相反,输出结果是更亮的颜色。(译注:对应Photoshop中的“变亮/滤色”。)。。。。。。。。
数学函数:
ceil(2,4)向上取整3,
floor(2,6)向下取整2,
percentage(0.5)将浮点数转成百分比字符串50%,
round(1.67,1)四舍五入取整,1.7,第二参数默认为0;
sqrt
计算一个数的平方根,并原样保持单位
abs
计算数字的绝对值,并原样保持单位。
正反余弦正弦正切
pi
返回圆周率 π (pi);
pow
设第一个参数为A,第二个参数为B,返回A的B次方。
mod
返回第一个参数对第二参数取余的结果。
min
返回一系列值中最小的那个。
max
返回一系列值中最大的那个。
列表函数
length:返回列表中元素的个数。
extract:返回列表中指定位置的元素。
字符串函数
escape
对字符串中的特殊字符做 URL-encoding 编码。
- 这些字符不会被编码:
,
,/
,?
,@
,&
,+
,'
,~
,!
and$
。 - 被编码的字符是:
\<space\>
,#
,^
,(
,)
,{
,}
,|
,:
,>
,<
,;
,]
,[
and=
。
参数:
string
: 需要转义的字符串。返回值:转义后不带引号的
string
字符串。案例:
escape('a=1')
输出:
a%3D1
注意:如果参数不是字符串的话,函数行为是不可预知的。目前传入颜色值的话会返回
undefined
,其它的值会原样返回。写代码时不应该依赖这个特性,而且这个特性在未来有可能改变。e
用于对 CSS 的转义,已经由
~"value"
语法代替。它接受一个字符串作为参数,并原样返回内容,不含引号。它可用于输出一些不合法的 CSS 语法,或者是使用 LESS 不能识别的属性。
参数:
string
- 需要转义的字符串。返回值:
string
- 转义后的字符串,不含引号案例:
filter: e("ms:alwaysHasItsOwnSyntax.For.Stuff()");
输出:
filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
注意:也接受经
~""
转义的值或者是数字作为参数。任何其它的值将产生错误。% 格式化
此函数
%(string, arguments ...)
用于格式化字符串。第一个参数是一个包含占位符的字符串。占位符以百分号
%
开头,后面跟着字母s
、S
、d
、D
、a
或A
。后续的参数用于替换这些占位符。如果你需要输出百分号,可以多用一个百分号来转义%%
。使用大写的占位符可以将特殊字符按照 UTF-8 编码进行转义。 此函数将会对所有的特殊字符进行转义,除了
()'~!
。空格会被转义为%20
。小写的占位符将原样输出特殊字符,不进行转义。占位符说明:
d
,D
,a
,A
- 以被任意类型的参数替换 (颜色、数字、转义后的字符串、表达式等)。如果将它们和字符串一起使用,则整个字符串都会被使用,包括引号。然而,引号将会按原样放在字符串中,不会用 "/" 或类似的方式转义。s
,S
- 可以被除了颜色的之外的任何类型参数替换。如果你将它们和字符串一起使用,则只有字符串的值会被使用,引号会被忽略。
参数:
string
: 有占位符的格式化字符串。anything
* : 用于替换占位符的值。-
返回值: 格式化后的
字符串(string)
.案例:
format-a-d: %("repetitions: %a file: %d", 1 + 2, "directory/file.less"); format-a-d-upper: %('repetitions: %A file: %D', 1 + 2, "directory/file.less"); format-s: %("repetitions: %s file: %s", 1 + 2, "directory/file.less"); format-s-upper: %('repetitions: %S file: %S', 1 + 2, "directory/file.less");
输出:
format-a-d: "repetitions: 3 file: "directory/file.less""; format-a-d-upper: "repetitions: 3 file: %22directory%2Ffile.less%22"; format-s: "repetitions: 3 file: directory/file.less"; format-s-upper: "repetitions: 3 file: directory%2Ffile.less";
replace
-
用一个字符串替换一段文本。
添加于 v1.7.0 版本
参数:
string
: 用于搜索、替换操作的字符串。pattern
: 用于搜索匹配的字符串或正则表达式。replacement
: 用于替换匹配项的字符串。flags
: (可选) 正则表达式参数。
返回值: 被替换之后的字符串。
案例:
replace("Hello, Mars?", "Mars\?", "Earth!"); replace("One + one = 4", "one", "2", "gi"); replace('This is a string.', "(string)\.$", "new $1."); replace(~"bar-1", '1', '2');
输出:
"Hello, Earth!"; "2 + 2 = 4"; 'This is a new string.'; bar-2;
-
杂项函数
color:解析颜色值,将代表颜色的自负转成颜色值,
convert:将数字从一种单位转换成另一种单位,
unit:对单位进行增删,unit(5,px)返回5px,
unit(5em);返回5;
- 这些字符不会被编码: