您当前的位置: Less语法整理本人邮箱:kk306484328@163.com,欢迎交流讨论.欢迎转载,转载请注明网址:http://www.cnblogs.com/kk-here/p/7601058.html个人博客地址:http://www.cnblogs.com/kk-here/
这是本人整理的一些语法,基本上全了,至于进阶就是看你怎么组合怎么使用了;网上一些文章还谈到有js表达式,但是亲测无效并且在官网中找不到相关的介绍,是他们随便拷贝的还是之前的版本存在过呢,这个问题我就不太清楚了.以下整理的内容都亲测有效,不放心的可以自己再测试一遍哈,有问题欢迎指正,谢谢查阅!
一,变量基本使用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;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;}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;}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;}.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中设置条件；常用的条件运算符：>、>=、<、<=、=；我们设定的条件还可以使用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; } }在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%; }}+代表以逗号分隔，+_代表多个之前以空格分隔
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);}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;}从其他样式表中导入样式。
//->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 }Less函数手册