给 CSS 加点料 ~
LESS(Leaner Style Sheets 的缩写)为 CSS 赋予了动静语言的个性,如变量,继承,运算,函数等,它是一门向后兼容的 CSS 扩大语言。
以后最新版本:Less 3.0
官网文档:http://lesscss.org
疾速入门:http://www.bootcss.com/p/lesscss
源码地址:https://github.com/less/less.js
<!– more –>
1. 浏览器应用
1.1. 编译成 *.css ????
-
node.js
➜ npm install -g less ➜ lessc styles.less styles.css
- koala
这是一个简略易用的 GUI 工具,能够对 less 进行实时编译、压缩等,详见:http://koala-app.com/index-zh.html
更多工具,请拜访官网:http://lesscss.org/tools/#guis-for-less
- webapck(后续待补充 …)
1.2. 借助 less.js
<!-- 首先引入 less 文件,留神这里的 rel 类型 -->
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<!-- 之后引入 less.js 文件 -->
<script src="//cdn.bootcss.com/less.js/3.0.0/less.min.js" ></script>
留神:
- *.less 文件肯定要在引入 less.js 之前引入。
- 请在 web 服务环境下应用,间接双击关上可能报错。
2. 语法规定
2.1. 变量(Variables)
// 定义变量
@bg-color: #fffccc;
// 应用变量
body {background-color: @bg-color;}
输入:body {background-color: #fffccc;}
还反对这样:
@size: 14px;
@content-font-size: 'size';
h3 {font-size: @@content-font-size;}
输入:h3 {font-size: 14px;}
2.2. 混合(Mixins)
咱们能够事后定义一个通用的属性集(mixin,如上面的 .bordered),而后在另一个须要用到的属性集(如上面的 #menu)外面去调用(或称作引入、合并),这种形式叫混合。
-
根本应用
.bordered {// 如果不想这个 mixin 被编译输入,能够写成 .bordered() {...} border-top: dotted 1px black; border-bottom: solid 2px black; } #link { display: inline-block; .bordered; // .bordered(); 实现同样的性能,括号不是必须的。} 输入:.bordered { border-top: dotted 1px black; border-bottom: solid 2px black; } #link { display: inline-block; border-top: dotted 1px black; border-bottom: solid 2px black; }
-
带参数的混合
.border-radius (@radius) { // 不设置参数默认值,调用时必须传参,否则编译报错 border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; } .border-radius2 (@radius: 5px) { // 设置参数默认值 border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; } #header {.border-radius(4px); // 传参 4px //.border-radius; // 编译报错 } #footer {.border-radius2; // 编译失常,不传参时,能够省略 () } 输入:#header { border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } #footer { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
-
@arguments 变量
@arguments 蕴含了所有传递进来的参数,如下示例
.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) { box-shadow: @arguments; -moz-box-shadow: @arguments; -webkit-box-shadow: @arguments; } .div1 {.box-shadow(2px, 5px); } 输入:.div1 { box-shadow: 2px 5px 1px #000000; -moz-box-shadow: 2px 5px 1px #000000; -webkit-box-shadow: 2px 5px 1px #000000; }
-
匹配模式
只有被匹配的混合才会被应用。
变量能够匹配任意的传入值,而变量以外的固定值就仅仅匹配与其相等的传入值。
.mixin (dark, @color) { // 调用时,第一个参数必须传 dark 才会匹配 color: darken(@color, 10%); } .mixin (light, @color) { // 调用时,第一个参数必须传 light 才会匹配 color: lighten(@color, 10%); } .mixin (@_, @color) { // 不论第一个参数传什么,都会匹配 display: block; } @switch: light; .class {.mixin(@switch, #888); } 输入:.class { color: #a2a2a2; display: block; }
也能够匹配多个参数,即 依据调用时传参的多少,匹配对应的混合规定(如下)。
.mixin2 (@a) { // 调用时传 1 个参数 color: @a; } .mixin2 (@a, @b) { // 调用时传 2 个参数 color: @b; } .class2 {.mixin2(#888, #eee); } 输入:.class2 {color: #eeeeee;}
-
导引(Guards)
应用关键字 when 依据表达式进行匹配混合(mixin)。
为了尽可能地保留 CSS 的可申明性,Less 通过导引(Guards)而非 if/else 语句来实现条件判断,因为前者已在 @media query 个性中被定义。
如下示例:
// when 关键字用以定义一个导引(Guards)序列(此例只有一个导引).mixin (@a) when (lightness(@a) >= 50%) { // 色彩的亮度大于等于 50% 时匹配 background-color: black; } .mixin (@a) when (lightness(@a) < 50%) { // 色彩的亮度小于 50% 时匹配 background-color: white; } .mixin (@a) { // 不论传什么,始终匹配 color: @a; } .class3 {.mixin(#ddd) } .class4 {.mixin(#555) } 输入:.class3 { background-color: black; color: #dddddd; } .class4 { background-color: white; color: #555555; }
导引中可用的比拟运算符 >、>=、=、=<、<。
// 关键字 true 只示意布尔真 // 上面两种形式是等价的 .truth (@a) when (@a) {...} .truth (@a) when (@a = true) {...} // 除关键字 true 以外的其它值都被视作布尔假 .class {.truth(40); // 这里的传参 40 被视作布尔假,不会匹配下面定义的混合(mixin)}
导引序列能够应用基于 CSS media queries 的逻辑操作符
// 用关键字 and 合并导引序列,示意条件的并且关系 .mixin (@a) when (isnumber(@a)) and (@a > 0) {...} // 用逗号 , 合并导引序列,示意条件的或者(or)关系 .mixin (@a) when (@a > 10), (@a < -10) {...} // 用关键字 not 取反 .mixin (@b) when not (@b > 0) {...}
最初,如果想基于值的类型进行匹配,咱们就能够应用 is* 函式
.mixin (@a, @b: 0) when (isnumber(@b)) {...} .mixin (@a, @b: black) when (iscolor(@b)) {...}
可用的 is* 函数
- iscolor
- isnumber
- isstring
- iskeyword
- isurl
- ispixel 判断一个值的单位是否是 px
- ispercentage 判断一个值的单位是否是 百分比
- isem 判断一个值的单位是否是 em
- isunit(value, unit) 判断一个值是否是指定的单位类型
- isruleset
2.3. 嵌套(Nesting)
LESS 能够让咱们以嵌套的形式编写层叠款式
#header {
color: black;
.navigation {font-size: 12px;}
.logo {
width: 300px;
// 符号 & 示意以后选择器的父级
// 次要用于编写串联选择器,对伪类(如:hover、:focus)尤其有用
&:hover {text-decoration: none}
}
}
输入:#header {color: black;}
#header .navigation {font-size: 12px;}
#header .logo {width: 300px;}
#header .logo:hover {text-decoration: none;}
@规定(At-rules)例如 @media 或 @supports,同样是能够被嵌套的,编译后,@规定被放在顶级,同一个规定集下的其它元素绝对程序放弃不变,如下示例:
.component {
width: 300px;
@media (min-width: 768px) {
width: 600px;
@media (min-resolution: 192dpi) {background-image: url(/img/retina2x.png);
}
}
@media (min-width: 1280px) {width: 800px;}
}
输入:.component {width: 300px;}
@media (min-width: 768px) {
.component {width: 600px;}
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
.component {background-image: url(/img/retina2x.png);
}
}
@media (min-width: 1280px) {
.component {width: 800px;}
}
2.4. 运算(Operations)
任何数字、色彩或者变量都能够采纳运算符 加(+)、减(–)、乘(*)、除(/) 进行运算。
在加、减或比拟数字之前,如果数字蕴含单位,则先转换成雷同的单位(比方 10mm 转成 1cm),并且 以最左侧的单位为基准。如果单位是不可转换的(比方 px → cm)或转换是没有意义的,则会被疏忽。
@conversion-1: 5cm + 10mm; // 后果:6cm(10mm 先转成 1cm 而后再计算)@conversion-2: 2 - 3mm - 5cm; // 后果:-51mm(5cm 先转成 50mm 而后再计算)@incompatible-units: 2 + 5px - 3cm; // 后果:4px(cm 不能转成 px,所以单位被疏忽)@base: 5%;
@filler: @base * 2; // 后果:10%
@other: @base + @filler; // 后果:15%
div {
color: #888 / 4; // 后果:#222222
height: 100% / 2 + @filler; // 后果:60%
}
乘法 和 除法 运算不会转换数字,因为在大多数状况下,这是没有意义的:长度乘以长度会产生一个区域,而 css 不反对指定区域。所以,LESS 将会对数字进行原样操作(疏忽单位), 并将最左侧指定的单位带到后果里。
@base: 2cm * 3mm; // 后果:6cm
2.5. 函数(Functions)
LESS 提供了一系列针对色彩、字符串和数学运算的函数,详见官网文档。
上面是一些示例:
hue(@color); // 获取色彩的色调
saturation(@color); // 获取色彩的饱和度
lightness(@color); // 获取色彩的亮度
// 基于一种色彩创立另一种色彩
// @new 将会放弃 @old 的 色调, 然而具备不同的饱和度和亮度
@new: hsl(hue(@old), 45%, 90%);
percentage(0.5); // 转成百分比 50%
2.6. 命名空间
有时候,为了更好组织 CSS 或者单纯是为了更好的封装,将一些变量或者混合(mixins)模块打包起来, 你能够像上面这样在 #bundle 中定义一些属性集:
#bundle {.button () {
display: block;
border: 1px solid black;
background-color: grey;
&:hover {background-color: white}
}
.tab {...}
.citation {...}
}
应用 > 援用某属性集上面的规定:
#header a {
color: orange;
#bundle > .button;
}
2.7. 作用域(Scope)
LESS 中的作用域跟其余编程语言十分相似,首先会从本地查找变量或者混合(mixins)模块,如果没找到的话会去父级作用域中查找,直到找到为止。
@var: red;
#page {
@var: white;
#header {color: @var; // white,首先在 #header 里查找,而后 #page,而后再向外层}
}
2.8. 正文(Comments)
// 这种是 less 退出的正文,不会被编译
/* 这种是保留的 css 正文,编译时保留 */
2.9. 引入(Importing)*.less 文件
@import "library"; // library.less 后缀名可带可不带
@import "typo.css"; // 间接导入 CSS 文件,不想 LESS 对它进行解决
2.10. 变量嵌入字符串
变量能够用相似 ruby 和 php 的形式嵌入到字符串中,构造:@{name}
@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");
2.11. 应用 ~ 禁止编译
有时候咱们须要输入一些不正确的 CSS 语法或者应用一些 LESS 不意识的专有语法,这时能够应用合乎 ~,如下:
.class {filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}
输入:.class {filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}
2.12. 应用 JavaScript 表达式
通过反引号的形式能够再 LESS 中应用 JavaScript 表达式。
@var: `"hello".toUpperCase() + '!'`; // 后果:HELLO!