less必知必会(3)

less essential less必知必会 3

这节主要讲实际应用 什么的.

less library

• Less Elements ( http://lesselements.com )
• Less Hat ( http://lesshat.madebysource.com/ )
• 3L ( http://mateuszkocz.github.io/3l/ )
• ClearLess ( http://clearleft.github.com/clearless/ )
• Preboot ( http://markdotto.com/bootstrap/ )

library里面会有一些mixin,class 可以用到,各有特点,可以加载一个或多个库,为防止命名冲突,可以加一个namespace

1
2
3
4
5
6
7
.less-hat {
@import (reference) "less-hat";
}

.some-class{
.less-hat .some-less-hat-helper();
}

import

syntax @omport (keyword) "path";

keyword 可以是 css, less,reference,once,multiple,inline

  • once,multiple . 正如其义包含一次 或 多次.
  • css 因为css中本身就可以有 @import "other.css";

    1
    2
    3
    4
    5
    // less
    @import (css) "other.css";

    // 编译后的css
    @import "other.css";
  • inline,less,reference

    • inline , 把文件包含进来,但不编译,即包含进来的不是less code
    • less , 包含文件,并编译,即包含进来的是less code
    • reference, 只包含mixin等,就是你可以使用里面的mixin,class等,但是被包含文件的样式不会编译进来.

@import "xxx"; 默认的keyword 是 less , 即包含文件,并作为less code编译.

bootstrap中的 grid system

1
2
3
4
5
import 'bootstrap/mixin/grid';

.make-row // 完成 .row 的功能
.make-md-col(3) // 完成 col-md-3 的功能
.make-md-col-offset(3) // 完成 col-md-offset-3 的功能

bootstrap

  • col-${size}-${col} , eg col-md-1
    • padding: gutter/2 , 默认15px
  • .row
    • padding - gutter/2 , 默认 -15px

.row的作用仅仅是 使左右padding为-15px (half of gutter),间距的一半