Less: Getting StartedCSS, Less

Less: Getting Started

Preparation

有几种方法可以编译对应的 .less 文件

  1. Kaola (推荐, 支持自动编译)
  2. NodeJS 三方库
  3. 浏览器端支持

Less 相对 CSS 就如同 jQuery 相对于 JS, 我们提供.less 文件然后编译成 css, 最终还是要引用 css 文件到 html

<link rel="stylesheet" href="styles/main.css">

Variables

  • 就是一些很典型的变量的定义以及使用.
  • 需要注意的是, 定义变量的时候不是用等于号, 而是用冒号.
@fontSize: 20px + 20; // 定义变量的时候要用冒号
@color: #ccc - 10; // =255-10, but...Are you crazy?

body{
  background: lightgreen;
  font-size: @fontSize;
}

Mixin

Example

主要是用于重用

.a,
#b {
  color: red;
}

.mixin-class {
  .a(); // 直接将上面已经定义的 styles 放到这里
}

.mixin-id {
  #b; // 同样的将上面已经定义的 styles 放到这里, 这里不写括号也是可以的。
}

最终将会得到如下的输出:

.a,
#b {
  color: red;
}

.mixin-class {
  color: red;
}

.mixin-id {
  color: red;
}

No outputting the mixin

如果你想要创建一个混合集, 但是却不想让它输出到你的样式中, 你可以在混合集的名字后面加上一个括号.

.my-mixin {
  color: black;
}
.my-other-mixin() { // 注意这个地方,我们多加了一个括号, 最终这段就不会输出,而是会直接混合到下方。background: white;
}
.class {
  .my-mixin;
  .my-other-mixin;
}

输出:

.my-mixin {
  color: black;
}

.class {
  color: black;
  background: white;
}

Parametric Mixins(Mixins with arguments)

可以声明一系列的方法:

.border-radius(@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

#box{
  width: 50px;
  height: 50px;
  background: red;
  .border-radius(50px)
}

以及参数可以有默认值:

.border-radius(@radius: 10px) {
    ……
}

当然没有默认值的方法是必须要传一个有效的值进去的.

@Variables

和 JS 类似, 这个变量包含了所有传进来的参数.

.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
  -webkit-box-shadow: @arguments;
     -moz-box-shadow: @arguments;
          box-shadow: @arguments;
}

Pattern-matching

经常性有那么一种情况:

我写了一个 mixin A, 又写了一个 mixin B 然后现在我希望给 A 和 B 都加一些属性

使用模式匹配就可以解决这个问题

.mixin(dark; @color) { // A
  color: darkeni(@color, 10%);
}
.mixin(light; @color) { // B
  color: lighten(@color, 10%);
}
.mixin(@_; @color) { // 这个地方写上希望共同添加的属性
  display: block;
}

上方这个代码的关键点在于, 共同属性需要用 @_ 这个参数来接收, 另外因为是 mixin, 类似重载, 所以 mixin 也必须要写上完全的参数, 所以上方的最后一个参数 @color 必须要提供

现在, 如果运行它:

@switch: light;

.class {
  .mixin(@switch; #888);
}

这将得到如下 CSS:

.class {
  color: #a2a2a2;
  display: block; // 所有的调用都会带上这一段
}

Nested Rules

body{
  #box{
    width: 100px;
    height: 50px;
    background: violet;

  }
  a{
    &:hover{ // 这个地方的 & 代表选择上一层选择器, 因此这里就相当于 a:hover
      color: green;
    }
  }
}
Powered by Remix
|
Designed by szhshp
|
Copyright © szhshp 2022