less必知必会(2)

less essential less必知必会 2

这节主要讲 嵌套规则(nested rules) 、内置的function 、数字操作。

嵌套规则

第一次使用less的时候,是完全只用这个嵌套规则的,css最烦的就是重复的东西要写好多遍。
例如

1
2
3
4
<ul class='nav'>
<li><a href='#'>abcdefg</a></li>
...
</ul>

要设置a标签的 text-decoration & other props

1
2
.nav li a { ... }
.nav li a:hover,.nav li a:focus,.nav li a:visited { ... }

这个 .nav li a 重复n遍. 使用less , 可以使用 & 解决.

嵌套规则是指 在子元素的 样式可以写在 父元素的 样式 { }中,其实也不一定是父子元素的关系.后面有一个用 & 逆转的例子.前面那个例子可以这样写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.nav{
// .nav style
...

li{
// li style
...

a{
// a style
...

&:focus,&:hover,&:visited{
// a style when focus
...
}
}
}
}

PS: 在实际开发中,我习惯全部使用 .class 选择器,很好的解决 css冲突. 而且这样嵌套后 折叠代码,这块全部都折叠起来了.眼不见心不烦.

.mixin namespace

因为前面介绍的嵌套规则,可以有下面这样的

1
2
3
4
5
#namespace{
.some-class{
background-color: red;
}
}

这个 .some-class 就被放在 #namespace 下面 , 可以用 #namespace .some-class;,引用,还可以使用 > 限制父子关系, #namespace > .some-class;

&符号

定义:

The & symbol refers to the parent of the current selector and you can use it to reverse the order of nesting and to extend or merge classes.


& 符号引用当前选择器的父选择器.你可以用来 更改nest的顺序(reverse order) 、 扩展 或者 合并类。

例如

1
2
3
4
5
a{
&:hover{
// a style when hover
}
}

&:hover 是新构建的选择器,包含 &,是 current 选择器,它的父选择器则是a了.

更改 nest顺序

神奇的效果

1
2
3
4
5
6
7
8
9
10
.class1 {
.class2 &{
property: 5;
}
}
.class2 {
.class1 & {
property: 5;
}
}

=>

1
2
3
4
5
6
.class2 .class1 {
property: 5;
}
.class1 .class2 {
property: 5;
}

& 引用当前选择器的父选择器,对应着这个好好理解.尤其是认为结果是

1
2
3
4
5
6
.class1 .class2 .class1{
property: 5;
}
.class2 .class1 .class2 {
property: 5;
}

的更要好好理解!!!呢吗,我就是…

&:extend

The extend pseudo-class adds the selector to the extended selector list.


extend 伪类添加当前选择器到 被extend的选择器列表中.

例如 给bootstrap添加一个custom button,要使用 .btn 类.

1
2
3
4
.btn-custom{
&:extend(.btn);
// 再加一些自定义属性
}

会出现什么效果呢,以前定义.btn的地方,后面会跟着一个.btn-custom

before:

1
.btn { ... }

after:

1
.btn,.btn-custom { ... }

这个功能还没用过,貌似写library/framework 会用到,这里先不多说了.

属性合并

syntax: property+: value;

例如

1
2
3
4
5
6
7
8
9
10
11
12
13
.code-font(){
font-family+: Consolas,Menlo;
}
.normal-font(){
font-family+: Arial;
}
body{
.normal-font;
}
pre,code{
.code-font;
.normal-font;
}

把值加到属性值上面,适用于CSV(用逗号分隔的值 comma separated value).

内置的function

使用JS

1
2
3
4
@max: ~"`Math.max(10,100)+'px'`";
body{
width: @max;
}

=>

1
2
3
body{
width: 100px;
}

使用以上语法eval一个js表达式.但是以他语言(非js)写的less compiler就没法执行这个了.

color functions

1
2
3
4
color: #aabbcc; // hex
color: rgb(012,123,234); // rgb
color: rgba(012,123,234,0.5); // rgba
color: hsl(90,100%,50%);

顺便学习下hsl知识吧,css3新增hsl or hsla的定义,但less中会将其编译成 #ffffff 的hex形式.

  • h: hue , 色彩
  • s: saturation , 饱和度
  • l: lightness , 明度,明亮程度

可选的 alpha 不透明度,默认为1,不透明.

操作color的函数, 函数签名都是 (color,改变程度)

  • darken/lighten 改变 l 明度
  • saturate/desaturate , 改变s 饱和度
  • fadeIn/fadeOut 改变 不透明度

其他的 mix,grayScale

contrast

操作颜色有个比较有意思的函数 contrast , E文为对比鲜明神马的.就是根据背景色自动产生一个前景色,使阅读更加容易.
函数签名

1
2
3
4
5
contrast(
@background-color,
@dark-color=black,@light-color=white,
@luma-value=43%
)

As you see. 输入一个background-color,然后会计算这个颜色的luma值,

  • 若高于第四个参数@luma-value,就认为这个颜色是亮色,返回 @dark-color 默认black
  • 若地狱第四个参数@luma-value,就认为这个颜色是暗色,返回 @light-color 默认white

type functions

判断某个变量是否是某种类型的数据

  • isnumber() // isnumber(11px); true
  • isstring()
  • iscolor()
  • isurl()
  • iskeyword()
  • isunit()
  • ispixel()
  • isem()
  • ispercentage()

可以用在 when 判断的时候