Magicdawn
0%

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
3
4
5
6
7
8
.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
.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
2
3
.btn {
  ...;
}

after:

1
2
3
4
.btn,
.btn-custom {
  ...;
}

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

属性合并

syntax: property+: value;

例如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.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 判断的时候