Less语法整理
一,变量
基本使用
Less:
{selector} { width: 100px; height: 100px; @{property}: #000; background: url("@{bgImg}/test.png"); &:after { display: block; content: @@var; } } @selector: box; @bgImg: "../img"; @property: color; @name: "你好啊"; @var: "name";
生成CSS:
.box { width: 100px; height: 100px; color: #000; background: url("../img/test.png"); } .box:after { display: block; content: "你好啊"; }
字符串插值
@base-url: "http://abc.com"; background-image: url("@{base-url}/images/bg.png");
选择器插值
//Less @name: blocked; {name} { color: black; } //输出css .blocked { color: black; }
二,运算
任何数字、颜色或者变量都可以参与运算
@base: 5%; @filler: @base * 2; @other: @base + @filler; color: #888 / 4; background-color: @base-color + #111; height: 100% / 2 + @filler;
LESS 的运算已经超出了我们的期望,它能够分辨出颜色和单位,括号也同样允许使用,并且可以在复合属性中进行运算:
@var: 1px + 5; width: (@var + 5) * 2; border: (@width * 2) solid black;
三,Mixin混合
基本使用和extend
Less:
/*不加括号显示样式,生成并集选择器组合*/ .public { width: 100px; height: 100px; } .public() { /*加括号隐藏样式,生成在调用者里,代码重复*/ width: 100px; height: 100px; } nav:extend(.public) { background-color: #f00; } div { &:extend(.public); background-color: #00f; } footer { .public; background-color: #cccccc; }
生成CSS:
/*不加括号显示样式,生成并集选择器组合*/ .public, nav, div { width: 100px; height: 100px; } nav { background-color: #f00; } div { background-color: #00f; } footer { /*隐藏样式,生成在调用者里,代码重复*/ width: 100px; height: 100px; background-color: #cccccc; }
模式匹配
Less:
.mixin (dark, @color) { background-color: darken(@color, 10%); } .mixin (light, @color) { background-color: lighten(@color, 10%); } .mixin (show) { display: block; } .mixin (hide) { display: none; } div { width: 100px; height: 100px; .mixin(show); //.mixin(hide); .mixin(dark,red) }
生成CSS:
div { width: 100px; height: 100px; display: block; background-color: #cc0000; }
命名空间
Less:
/*加括号隐藏了样式 .div命名空间*/ .div() { width: 200px; height: 200px; background-color: #000; div { width: 50px; height: 50px; background-color: #f00; } .color { color: skyblue; } &:hover{ background-color: lighten(rgb(0, 0, 0), 20%); } } /*这样使用*/ nav { .div; } nav p { .div > .color; }
生成CSS:
nav { width: 200px; height: 200px; background-color: #000; } nav div { width: 50px; height: 50px; background-color: #f00; } nav .color { color: skyblue; } nav:hover { background-color: #333333; } nav p { color: skyblue; }
作用域
(类似于JS作用域链,一层一层网上找,找到为止)
Less:
@color: #ccc; .box { @color: #eee; .gray { color: @color; } } .box2 { .gray { color: @color; } }
生成CSS:
.box .gray { color: #eeeeee; } .box2 .gray { color: #cccccc; }
!important
Less:
.box() { @color: #eee; background-color: #f00; width: 100px; height: 200px; .gray() { color: @color; } } nav { /*可以使继承到的混合集所有属性都添加!important*/ .box !important; .box > .gray; }
生成CSS:
nav { /*可以使继承到的混合集所有属性都添加!important*/ background-color: #f00 !important; width: 100px !important; height: 200px !important; color: #eeeeee; }
Parametric Mixins(参数混合)
Less:
/*可以设定参数,也可以同时设置默认值*/ .transition(@property:all;@duration:1s;@function:linear;@delay:0s;) { -webkit-transition: @property @duration @function @delay; -moz-transition: @property @duration @function @delay; -ms-transition: @property @duration @function @delay; -o-transition: @property @duration @function @delay; transition: @property @duration @function @delay; } /*等同于上式,Less中也有arguments*/ .transition(@property:all;@duration:1s;@function:linear;@delay:0s;) { -webkit-transition: @arguments; -moz-transition: @arguments; -ms-transition: @arguments; -o-transition: @arguments; transition: @arguments; } div1 { .transition; } div2 { .transition(@duration: 2s); } div3 { .transition(@duration: 3s;@property: width;) }
生成CSS:
div1 { -webkit-transition: all 1s linear 0s; -moz-transition: all 1s linear 0s; -ms-transition: all 1s linear 0s; -o-transition: all 1s linear 0s; transition: all 1s linear 0s; } div2 { -webkit-transition: all 2s linear 0s; -moz-transition: all 2s linear 0s; -ms-transition: all 2s linear 0s; -o-transition: all 2s linear 0s; transition: all 2s linear 0s; } div3 { -webkit-transition: width 3s linear 0s; -moz-transition: width 3s linear 0s; -ms-transition: width 3s linear 0s; -o-transition: width 3s linear 0s; transition: width 3s linear 0s; }
Less:
.test(@width:100px;@height:100px;) { width: @width; //可以不需要执行体,只为了获得返回值 @result: (@width + @height) / 2; } div { .test; //call the mixin padding: @result; //use the return value }
生成CSS:
div { width: 100px; padding: 100px; }
高级参数用法与 @rest 变量
.mixin (...) { // 接受 0-N 个参数 .mixin () { // 不接受任何参数 .mixin (@a: 1) { // 接受 0-1 个参数 .mixin (@a: 1, ...) { // 接受 0-N 个参数 .mixin (@a, ...) { // 接受 1-N 个参数 //此外 .mixin (@a, @rest...) { // @rest 表示 @a 之后的参数 // @arguments 表示所有参数 }
Mixin Guards(导引表达式/混合保护)
我们可以在mixin中设置条件;常用的条件运算符:>、>=、<、<=、=;我们设定的条件还可以使用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 { background-color: white; }
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) { ... //你可以使用关键词 and 在 guard 中加入额外的条件: .mixin (@a) when (isnumber(@a)) and (@a > 0) { ... } //或者,使用关键词 not 否定条件: .mixin (@b) when not (@b > 0) { ... }
我们还可以通过与&特性结合实现‘if‘类型的语句
//->LESS代码:这里的意思是如果为true,.box的文字颜色才是白色 @my-option: true; & when (@my-option = true) { .box { color: white; } }
四,Loops(递归/循环)
在Less中,混合可以调用它自身。这样,当一个混合递归调用自己,再结合Guard条件表达式,就可以写出循环结构。使用递归循环最常见的情况就是生成栅格系统的CSS
Less:
/*生成栅格系统*/ @media screen and (max-width: 768px){ .generate-columns(12); .generate-columns(@n, @i: 1) when (@i <= @n) { .column-xs-@{i} { width: (@i * 100% / @n); } .generate-columns(@n, (@i+1)); } } @media screen and (min-width: 768px){ .generate-columns(12); .generate-columns(@n, @i: 1) when (@i <= @n) { .column-sm-@{i} { width: (@i * 100% / @n); } .generate-columns(@n, (@i+1)); } }
生成CSS:
@media screen and (max-width: 768px) { .column-xs-1 { width: 8.33333333%; } .column-xs-2 { width: 16.66666667%; } .column-xs-3 { width: 25%; } .column-xs-4 { width: 33.33333333%; } .column-xs-5 { width: 41.66666667%; } .column-xs-6 { width: 50%; } .column-xs-7 { width: 58.33333333%; } .column-xs-8 { width: 66.66666667%; } .column-xs-9 { width: 75%; } .column-xs-10 { width: 83.33333333%; } .column-xs-11 { width: 91.66666667%; } .column-xs-12 { width: 100%; } } @media screen and (min-width: 768px) { .column-sm-1 { width: 8.33333333%; } .column-sm-2 { width: 16.66666667%; } .column-sm-3 { width: 25%; } .column-sm-4 { width: 33.33333333%; } .column-sm-5 { width: 41.66666667%; } .column-sm-6 { width: 50%; } .column-sm-7 { width: 58.33333333%; } .column-sm-8 { width: 66.66666667%; } .column-sm-9 { width: 75%; } .column-sm-10 { width: 83.33333333%; } .column-sm-11 { width: 91.66666667%; } .column-sm-12 { width: 100%; } }
五,Merge(兼并)
+代表以逗号分隔,+_代表多个之前以空格分隔
Less:
.mixin(){ /*内阴影*/ box-shadow+: inset 0 0 10px #555; } .scale(@num){ transform+_: scale(@num); } div{ width: 100px; height: 100px; background-color: #f00; margin: 100px auto; .mixin; box-shadow+: 0 0 20px black; transform+_: translateX(100px); .scale(2); }
生成CSS:
div { width: 100px; height: 100px; background-color: #f00; margin: 100px auto; /*内阴影*/ box-shadow: inset 0 0 10px #555, 0 0 20px black; transform: translateX(100px) scale(2); }
六,Parent Selectors
Less:
.box(){ border-color: #f00; top { /*名称写死的后代选择*/ width: 10px; } &:hover { background-color: #00f; } &.current { /*选择当前选择器并且class为current*/ color: red; } &>top{ /*名称写死的直接后代选择*/ width: 11px; } &-top { /*根据选择器名称变化的直接选中*/ background-color: #fff; } & &-top{ /*根据选择器名称变化的后代选择*/ width: 12px; } &>&-top{ /*根据选择器名称变化的直接后代选择*/ width: 13px; } &,&-top{ /*根据选择器名称变化的并集选择*/ height: 14px; } &-top+&-main{ /*根据选择器名称变化的兄弟选择*/ height: 15px; } &+&{ /*根据选择器名称变化的兄弟选择*/ height: 16px; } } nav { .box; }
生成CSS:
nav { border-color: #f00; } nav top { width: 10px; } nav:hover { background-color: #00f; } nav.current { color: red; } nav > top { width: 11px; } nav-top { background-color: #fff; } nav nav-top { width: 12px; } nav > nav-top { width: 13px; } nav, nav-top { height: 14px; } nav-top + nav-main { height: 15px; } nav+nav{ height: 16px; }
改变选择器顺序,下面的案例中,选择器.no-border-radius &会前置插入它的父选择器.header .menu,最后变成.no-border-radius .header .menu形式输出:
//->LESS代码 .header { .menu { border-radius: 5px; .parent & { /*增加权重?*/ background-color: #f00; } } } //->输出的CSS .header .menu { border-radius: 5px; } .parent .header .menu { /*增加权重?*/ background-color: #f00; }
七,Import Directives(导入指令)
从其他样式表中导入样式。
//->LESS代码 @import "public.less"; //默认把指定文件的less也编译 @import "header.less"; //默认把指定文件的less也编译 @import (reference) "public.less"; //设置仅导入指定文件的less但不编译
除了reference以外我们还可以配置一些其他的参数值:
inline:在输出中包含源文件但不加工它
less:将文件作为Less文件对象,无论是什么文件扩展名
css:将文件作为CSS文件对象,无论是什么文件扩展名
once:只包含文件一次(默认行为) multiple:包含文件多次
八,注释
CSS 形式的注释在 LESS 中是依然保留的:
/* Hello, I‘m a CSS-style comment */ .class { color: black }
LESS 同样也支持双斜线的注释, 但是编译成 CSS 的时候自动过滤掉:
// Hi, I‘m a silent comment, I won‘t show up in your CSS .class { color: white }
九,内置函数
内容来源于网络,如有侵权请联系客服删除