LESS速查-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

LESS速查

简介: 注释 缓存式注释/*注释内容*/  非缓存式注释//注释内容   变量 @nice-blue: #5B83AD; @light-blue: @nice-blue + #111; #header { color: @light-blue; }   混合 1.

注释

缓存式注释/*注释内容*/ 
非缓存式注释//注释内容

 

变量

@nice-blue: #5B83AD;

@light-blue: @nice-blue + #111;

#header { color: @light-blue; }

 

混合

1.混合类:

.bordered {

border-top: dotted 1px black;

border-bottom: solid 2px black;

}

#menu a {

color: #111;

.bordered;

2.混合带参数:

.border-radius (@radius) {

border-radius: @radius;

-moz-border-radius: @radius;

-webkit-border-radius: @radius;

}}

 

#header {

.border-radius(4px);

}

我们还可以像这样给参数设置默认值:

.border-radius (@radius: 5px) {

border-radius: @radius;

-moz-border-radius: @radius;

-webkit-border-radius: @radius;

}

#header {

.border-radius;

}

 

模式匹配

LESS 提供了通过参数值控制 mixin 行为的功能,让我们先从最简单的例子开始:

.mixin (@s, @color) { ... }

.class {

.mixin(@switch, #888);

}

如果要根据 @switch 的值控制 .mixin 行为,只需按照下面的方法定义 .mixin:

 

.mixin (dark, @color) {

color: darken(@color, 10%);

}

.mixin (light, @color) {

color: lighten(@color, 10%);

}

.mixin (@_, @color) {

display: block;

}

然后调用:

@switch: light;

 

.class {

.mixin(@switch, #888);

}

将会得到以下 CSS:

 

.class {

color: #a2a2a2;

display: block;

}

传给 .mixin 的颜色将执行 lighten 函数,如果 @switch 的值是 dark,那么则会执行 darken 函数输出颜色。

 

运算:

@test:800px;

body{

width:@test - 200; //运算会自动同步单位

}

 

嵌套规则

LESS 可以让我们以嵌套的方式编写层叠样式

#header {

color: black;

 

.navigation {

font-size: 12px;

}

.logo {

width: 300px;

&:hover { text-decoration: none }

}

}

注意 & 符号的使用 — 如果你想写串联选择器,而不是写后代选择器,就可以用到 & 了。这点对伪类尤其有用如 :hover 和 :focus。

例如:

.bordered {

&.float {

float: left;

}

.top {

margin: 5px;

}

}

会输出:

 

.bordered.float {

float: left;

}

.bordered .top {

margin: 5px;

}

 

@arguments 变量

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {

box-shadow: @arguments;

-moz-box-shadow: @arguments;

-webkit-box-shadow: @arguments;

}

.box-shadow(2px, 5px);

将会输出:

box-shadow: 2px 5px 1px #000;

-moz-box-shadow: 2px 5px 1px #000;

-webkit-box-shadow: 2px 5px 1px #000;

 

避免编译

~"样式" 可用单引号或双引号

有时候我们需要输出一些不正确的 CSS 语法或者使用一些 LESS 不认识的专有语法。

 

要输出这样的值我们可以在字符串前加上一个 ~,例如:

.class {

filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";

}

这叫作“避免编译”,输出结果为:

 

.class {

filter: ms:alwaysHasItsOwnSyntax.For.Stuff();

}

 

作用域

LESS 中的作用域跟其他编程语言非常类似,首先会从本地查找变量或者混合模块,如果没找到的话会去父级作用域中查找,直到找到为止。

@var: red;

#page {

@var: white;

#header {

color: @var; // white

}

}

#footer {

color: @var; // red

}

 

!important关键字

 

调用时在混合后面加上!important关键字表示将混合带来的所有属性标记为!important:

 

.mixin (@a: 0) {

border: @a;

boxer: @a;

}

.unimportant {

.mixin(1);

}

.important {

.mixin(2) !important;

}

编译成:

 

.unimportant {

border: 1;

boxer: 1;

}

.important {

border: 2 !important;

boxer: 2 !important;

}

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章