10 09/2014

lesscss 笔记

最后更新: Wed Sep 10 2014 12:29:11 GMT+0800

浅色

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
//也可以 @light-blue: lighten(@nice-blue,10%);
#header { color: @light-blue; }
#header { color: #6c94be; }

变量嵌套

@fnord: "I am fnord.";
@var: 'fnord';
content: @@var;
content: “I am fnord.”;

当前作用域中最后一次定义

@var: 0;
.class1 {
    @var: 1;
    .class {
        @var: 2;
        three: @var;
        @var: 3;
    }
    one: @var;
}
.class1 .class {
three: 3;
}
.class1 {
one: 1;
}

变量声明提升（和 js hoisting 类似）

lazy-eval {
    width: @var;
}

@var: @a;
@a: 9%;

.lazy-eval-scope {
    width: @var;
    @a: 9%;
}

@var: @a;
@a: 100%;

编译结果一样。注意：第二个例子，作用域优先。

.lazy-eval-scope {
width: 9%;
}

class 混合 mixin

.bordered {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}
#menu a {
    color: #111;
    .bordered;
}
.post a {
    color: red;
    .bordered;
}
#menu a {
color: #111;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.post a {
color: red;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}

默认参数

.border-radius (@radius: 5px) {
    border-radius: @radius;
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
}
#header {
      .border-radius;
}

输出 5px radius

& 表示父选择器以及反转两种用法

.child, .sibling {
    .parent & {
        color: black;
    }
    & + & {
        color: red;
    }
}
.parent .child,
.parent .sibling {
color: black;
}
.child + .child,
.child + .sibling,
.sibling + .child,
.sibling + .sibling {
color: red;
}

命名空间

#bundle {
    .button () {
        display: block;
        border: 1px solid black;
        background-color: grey;
        &:hover { background-color: white }
    }
    .tab { ... }
    .citation { ... }
}

这样使用

#header a {
    color: orange;
    #bundle > .button;
}

import 可嵌套

@imported-color: red;
h1 { color: green; }

pre {
    @import "library.less";
    color: @importedColor;
}
pre {
color: #ff0000; // 定义在library.less中的变量可用
}
pre h1 { // 定义在library.less中的样式规则被嵌套到pre中
color: green;
}

字符串插值

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");

选择器插值

@name: blocked;
.@{name} {
    color: black;
}
.blocked {
color: black;
}

避免编译 ~ 和 执行 javascript `

避免编译 ~”…” (波浪线+引号)

执行 javascript `

执行 javascript `…` (反引号)

@var: `parseInt(Math.random()*255)`;
.randomColor {color:~"rgb(@{var},@{var},@{var})";}
.randomColor {
color: rgb(191,53,66);
}

注意：这个随机颜色没实际意义。除非用 lesscss.min.js 现场解析 css。

data-uri

data-uri('../data/image.jpg');
url(‘data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==’);

color

@c1:#c00;
.c {
    color:hsl(hue(@c1),50%,50%);
}

根据 c1 颜色的 色相（hue），调整饱和度（saturation）和 亮度（lightness）


.c {
color: #bf4040;
}

注意： hsv － 通过色相 (hue)，饱和度 (saturation)，色调 (value) 三种值 (HSV)

  • saturate 增加饱和度
  • desaturate 降低饱和度
  • fadeout，fadein 增加（降低透明度）
  • fade 设置透明度
  • mix 混合两种颜色 mix(#ff0000, #0000ff, 50%)
  • greyscale 饱和度为0（置灰）
  • multiply,overlay,hardlight,difference 等 类似ps层模式

via http://www.lesscss.net/article/document.html