Magicdawn
0%

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
    6
    // less
    @import (css) "other.css";

    // 编译后的 css
    @import "other.css";

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

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

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

    ## bootstrap 中的 grid system

    ```css
    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),间距的一半