est

est: Grace; favour.
From Middle English este, from Old English ēst (“will, consent, favour, grace, liberality, munificence, bounty, kindness, love, good pleasure, harmony, liberal gifts, luxuries”).

est 是一个基于 Less 的样式工具库,帮助您更轻松地书写 Less 代码。

est 提供了一系列方便快捷的 mixin,只在调用时才输出代码。est 不希望提供直接给 HTML 调用的类名,用「样式类」污染 HTML 代码的语义。当然您也可以根据自己的项目需求基于 est 搭建样式类库,提供类名接口来进行快速开发。

快速开始

想先试试?在 estFiddle 抢先体验一下吧!

est 可以以两种方式引入您的项目:

  1. Less 代码中引入:

    下载最新版本( .zip / .tar.gz)或使用 Git 获取代码:

    git clone https://github.com/ecomfe/est.git

    然后在 Less 代码中引入。

    // quick import
    @import "est/src/all.less";
    
    // override global variables
    @support-ie-version: 10;
    @default-font-size: 14px;
    
    // ...your own awesome less code starts here...
  2. 使用 Less 插件在编译时引入:

    安装插件

    npm install -g less-plugin-est

    调用插件

    在 Less 代码中无需额外 @import,只需要在编译时加载 est 即可自动注入样式库。

    lessc styles.less --est

Autoprefixer

引入 est 后,就可以开始简单快速地书写样式文件了。但需注意的是,est 自 2.0.0 版本起不再推荐使用自带的前缀兼容 mixin(compatibility 模块下的多数 mixin),而建议采用 Autoprefixer 进行按需生成厂商前缀。Less 也已提供对应的插件 less-plugin-autoprefix,这样安装后在编译时只要额外加载一个插件就能解决厂商前缀带来的困扰了。

lessc styles.less --est --autoprefix

贡献

est 已经提供超过 100 个帮助您进行快速开发的 mixin,也欢迎您提供更多新的功能需求!欢迎提交 issue 发表反馈意见或直接发送 pull request。

单元测试

单测用例在 test/specs 目录下,每个模块一个目录,下面可能拆成多个 spec 文件,也可能只含一个。

在 est 项目目录下,运行如下命令即可开始测试:

npm install
npm test

API 详述

本文档剩余部分详细描述了每个预定义变量和 mixin 的使用方法。需要注意的是,给出的编译后代码非基于全局预定义变量默认值,而是基于如下设置:

@support-ie-version: 7;
@use-autoprefixer: false;

variables

全局变量设置。

  • @use-autoprefixer

    是否使用 Autoprefixer 来处理浏览器前缀相关的兼容性问题。

    默认值:true

  • @support-ie-version

    需要支持的最老版本的 IE。

    默认值:7

  • @support-old-ie

    deprecated

    是否添加支持 IE 6/7 相关的代码。

    默认值:true

  • @support-html5

    是否添加支持 HTML5 新元素相关的代码。

    默认值:true

  • @default-font-size

    默认的字体大小(以像素为单位),请确保其和 <html> 元素的字体大小一致(单位可以不一致,例如 100% = 16px)。

    默认值:16

  • @default-text-color

    默认的文字颜色。

    默认值:#666

  • @default-input-placeholder-color

    文本输入框占位文字的默认颜色。

    默认值:#999

  • @default-base-font-family

    默认的普通字体族。

    默认值:"Helvetica Neue", Arial, sans-serif

  • @default-heading-font-family

    默认的标题字体族。

    默认值:"Helvetica Neue", Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif

  • @default-old-ie-heading-font-family

    IE6/7 以下的默认的标题字体族。IE7 以下在匹配到第一个字体后,不会根据字符再在 font-family 列表中进行 fallback。Arial 写在微软雅黑之后是为了考虑没有微软雅黑字体的客户端。

    默认值:"Microsoft YaHei", Arial, sans-serif

  • @default-code-font-family

    默认的代码字体。

    默认值:Monaco, Consolas, monospace

  • @default-border-radius

    默认的圆角半径。

    默认值:5px

  • @default-box-shadow

    默认的元素阴影。

    默认值:0 1px 3px rgba(0, 0, 0, 0.25)

  • @header-z-index

    页头的默认 z-index

    默认值:1000

  • @footer-z-index

    页脚的默认 z-index

    默认值:1000

  • @modal-z-index

    浮层遮罩层的默认 z-index

    默认值:1050

  • @default-column-gutter

    默认的栅格间隔。

    默认值:3%

  • @column-justify-content

    栅格布局左右是否留出间隔。可选值为 space-betweenspace-around

    默认值:space-between

normalize

用来归一化不同浏览器下的页面样式。

依赖于:
  • .global-normalize()

    全局归一化页面样式,基于 normalize.css

    前往 estFiddle 查看

    // global scope
    .global-normalize();
    /*! normalize.css v1.1.2 | MIT License | git.io/normalize */
    
    html {
        font-size: 100%;
            -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
    }
    
    html,
    button,
    input,
    select,
    textarea {
        font-family: "Helvetica Neue", Arial, sans-serif;
    }
    
    body {
        margin: 0;
    }
    
    a:focus {
        outline: thin dotted;
    }
    
    a:active,
    a:hover {
        outline: 0;
    }
    
    h1 {
        font-size: 2em;
        margin: 0.67em 0;
    }
    
    h2 {
        font-size: 1.5em;
        margin: 0.83em 0;
    }
    
    h3 {
        font-size: 1.17em;
        margin: 1em 0;
    }
    
    h4 {
        font-size: 1em;
        margin: 1.33em 0;
    }
    
    h5 {
        font-size: 0.83em;
        margin: 1.67em 0;
    }
    
    h6 {
        font-size: 0.67em;
        margin: 2.33em 0;
    }
    
    abbr[title] {
        border-bottom: 1px dotted;
    }
    
    b,
    strong {
        font-weight: bold;
    }
    
    blockquote {
        margin: 1em 40px;
    }
    
    dfn {
        font-style: italic;
    }
    
    hr {
        -webkit-box-sizing: content-box;
           -moz-box-sizing: content-box;
                box-sizing: content-box;
        height: 0;
    }
    
    p,
    pre {
        margin: 1em 0;
    }
    
    code,
    kbd,
    pre,
    samp {
        font-family: Monaco, Consolas, monospace;
        font-size: 1em;
    }
    
    pre {
        white-space: pre;
        white-space: pre-wrap;
        word-wrap: break-word;
    }
    
    q {
        quotes: none;
    }
    
    q:before,
    q:after {
        content: "";
        content: none;
    }
    
    small {
        font-size: 80%;
    }
    
    sub,
    sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }
    
    sup {
        top: -0.5em;
    }
    
    sub {
        bottom: -0.25em;
    }
    
    dl,
    menu,
    ol,
    ul {
        margin: 1em 0;
    }
    
    dd {
        margin: 0 0 0 40px;
    }
    
    menu,
    ol,
    ul {
        padding: 0 0 0 40px;
    }
    
    nav ul,
    nav ol {
        list-style: none;
        list-style-image: none;
    }
    
    img {
        border: 0;
        -ms-interpolation-mode: bicubic;
    }
    
    svg:not(:root) {
        overflow: hidden;
    }
    
    form {
        margin: 0;
    }
    
    fieldset {
        border: 1px solid #c0c0c0;
        margin: 0 2px;
        padding: 0.35em 0.625em 0.75em;
    }
    
    legend {
        border: 0;
        padding: 0;
        white-space: normal;
        *margin-left: -7px;
    }
    
    button,
    input,
    select,
    textarea {
        font-size: 100%;
        margin: 0;
        vertical-align: baseline;
        *vertical-align: middle;
    }
    
    button,
    input {
        line-height: normal;
    }
    
    button,
    select {
        text-transform: none;
    }
    
    button,
    html input[type="button"],
    input[type="reset"],
    input[type="submit"] {
        -webkit-appearance: button;
        cursor: pointer;
        *overflow: visible;
    }
    
    button[disabled],
    html input[disabled] {
        cursor: default;
    }
    
    input[type="checkbox"],
    input[type="radio"] {
        box-sizing: border-box;
        padding: 0;
        *height: 13px;
        *width: 13px;
    }
    
    button::-moz-focus-inner,
    input::-moz-focus-inner {
        border: 0;
        padding: 0;
    }
    
    textarea {
        overflow: auto;
        vertical-align: top;
    }
    
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    main,
    nav,
    section,
    summary {
        display: block;
    }
    
    audio,
    canvas,
    video {
        display: inline-block;
        *display: inline;
        *zoom: 1;
    }
    
    audio:not([controls]) {
        display: none;
        height: 0;
    }
    
    [hidden] {
        display: none;
    }
    
    mark {
        background: #ff0;
        color: #666666;
    }
    
    figure {
        margin: 0;
    }
    
    input[type="search"] {
        -webkit-appearance: textfield;
        -webkit-box-sizing: content-box;
           -moz-box-sizing: content-box;
                box-sizing: content-box;
    }
    
    input[type="search"]::-webkit-search-cancel-button,
    input[type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
    }
    
  • .global-normalize-opentype()

    全局归一化 OpenType 相关样式,基于 normalize-opentype.css

    前往 estFiddle 查看

    // global scope
    .global-normalize-opentype();
    /*! normalize-opentype v0.1.2 | MIT License | kennethormandy.com/journal/normalize-opentype-css */
    
    html,
    body {
        font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0;
    }
    
    h1,
    h2,
    h3 {
        font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 1;
    }
    
    abbr {
        text-transform: uppercase;
        font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "smcp" 1, "c2sc" 1;
    }
    
    time {
        font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0;
    }
    
    pre,
    kbd,
    samp,
    code {
        font-feature-settings: "kern" 0, "liga" 0, "dlig" 0, "pnum" 0, "tnum" 1, "onum" 0, "lnum" 1, "zero" 1;
    }
    
    sup {
        font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0, "sups" 1;
    }
    
    sub {
        font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0, "subs" 1;
    }
    
    table {
        font-feature-settings: "kern" 0, "liga" 1, "pnum" 0, "tnum" 1, "onum" 0, "lnum" 1, "zero" 1;
    }
    
    table thead,
    table tfoot {
        font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0;
    }
    
    input[type="color"],
    input[type="date"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="number"],
    input[type="range"],
    input[type="tel"],
    input[type="week"] {
        font-feature-settings: "kern" 0, "liga" 1, "pnum" 1, "tnum" 0, "onum" 0, "lnum" 1, "zero" 0;
    }
    

reset

基于 Eric Meyer's reset 2.0。在整站中推荐使用 normalize 来初始化样式, reset 仅建议在第三方页面局部使用。

依赖于:
  • .global-reset()

    进行全局样式重置。

    前往 estFiddle 查看

    // global scope
    .global-reset();
    html,
    body,
    div,
    span,
    applet,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    pre,
    a,
    abbr,
    acronym,
    address,
    big,
    cite,
    code,
    del,
    dfn,
    em,
    img,
    ins,
    kbd,
    q,
    s,
    samp,
    small,
    strike,
    strong,
    sub,
    sup,
    tt,
    var,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td {
        padding: 0;
        margin: 0;
        border: 0;
        outline: 0;
        font-weight: inherit;
        font-style: inherit;
        font-family: inherit;
        font-size: 100%;
        vertical-align: baseline;
    }
    
    body {
        line-height: 1;
    }
    
    ol,
    ul {
        list-style: none;
    }
    
    table {
        border-collapse: separate;
        border-spacing: 0;
        vertical-align: middle;
    }
    
    caption,
    th,
    td {
        text-align: left;
        font-weight: normal;
        vertical-align: middle;
    }
    
    a img {
        border: none;
    }
    
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section,
    summary,
    main {
        display: block;
        padding: 0;
        margin: 0;
        border: 0;
        outline: 0;
        font-weight: inherit;
        font-style: inherit;
        font-family: inherit;
        font-size: 100%;
        vertical-align: baseline;
    }
    
    audio,
    canvas,
    video {
        display: inline-block;
        *display: inline;
        *zoom: 1;
    }
    
    audio:not([controls]),
    [hidden] {
        display: none;
    }
    
  • .nested-reset()

    对选择器指定的元素内部进行样式重置。

    前往 estFiddle 查看

    .preview {
        .nested-reset();
    }
    .preview div,
    .preview span,
    .preview object,
    .preview iframe,
    .preview h1,
    .preview h2,
    .preview h3,
    .preview h4,
    .preview h5,
    .preview h6,
    .preview p,
    .preview pre,
    .preview a,
    .preview abbr,
    .preview acronym,
    .preview address,
    .preview code,
    .preview del,
    .preview dfn,
    .preview em,
    .preview img,
    .preview dl,
    .preview dt,
    .preview dd,
    .preview ol,
    .preview ul,
    .preview li,
    .preview fieldset,
    .preview form,
    .preview label,
    .preview legend,
    .preview caption,
    .preview tbody,
    .preview tfoot,
    .preview thead,
    .preview tr {
        padding: 0;
        margin: 0;
        border: 0;
        outline: 0;
        font-weight: inherit;
        font-style: inherit;
        font-family: inherit;
        font-size: 100%;
        vertical-align: baseline;
    }
    
    .preview table {
        border-collapse: separate;
        border-spacing: 0;
        vertical-align: middle;
    }
    
    .preview caption,
    .preview th,
    .preview td {
        text-align: left;
        font-weight: normal;
        vertical-align: middle;
    }
    
    .preview a img {
        border: none;
    }
    
    .preview article,
    .preview aside,
    .preview details,
    .preview figcaption,
    .preview figure,
    .preview footer,
    .preview header,
    .preview hgroup,
    .preview menu,
    .preview nav,
    .preview section,
    .preview summary,
    .preview main {
        display: block;
        padding: 0;
        margin: 0;
        border: 0;
        outline: 0;
        font-weight: inherit;
        font-style: inherit;
        font-family: inherit;
        font-size: 100%;
        vertical-align: baseline;
    }
    
    .preview audio,
    .preview canvas,
    .preview video {
        display: inline-block;
        *display: inline;
        *zoom: 1;
    }
    
    .preview audio:not([controls]),
    .preview [hidden] {
        display: none;
    }
    
  • .reset-box-model()

    重置盒模型。

    前往 estFiddle 查看

    .module {
        .reset-box-model();
    }
    .module {
        padding: 0;
        margin: 0;
        border: 0;
    }
    
  • .reset-focus()

    重置元素外框线。

    前往 estFiddle 查看

    .module {
        .reset-focus();
    }
    .module {
        outline: 0;
    }
    

    IE 下需使用 hidefocus 属性。慎用此功能,可能带来可访问性的损失。

  • .reset-font()

    重置字体相关属性。

    前往 estFiddle 查看

    span {
        .reset-font();
    }
    span {
        font-weight: inherit;
        font-style: inherit;
        font-family: inherit;
        font-size: 100%;
        vertical-align: baseline;
    }
    
  • .reset-body()

    重置 body 元素。

    前往 estFiddle 查看

    body {
        .reset-body();
    }
    body {
        line-height: 1;
    }
    
  • .reset-table()

    重置表格样式。

    前往 estFiddle 查看

    table {
        .reset-table();
    }
    table {
        border-collapse: separate;
        border-spacing: 0;
        vertical-align: middle;
    }
    
  • .reset-table-cell()

    重置表格单元格样式(tdth)。

    前往 estFiddle 查看

    td, th {
        .reset-table-cell();
    }
    td,
    th {
        text-align: left;
        font-weight: normal;
        vertical-align: middle;
    }
    
  • .reset-list-style()

    重置列表项目符号样式。

    前往 estFiddle 查看

    ul, ol {
        .reset-list-style();
    }
    ul,
    ol {
        list-style: none;
    }
    
  • .reset-html5()

    重置 HTML5 元素的样式。

    前往 estFiddle 查看

    // global scope
    .reset-html5();
    
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section,
    summary,
    main {
        display: block;
        padding: 0;
        margin: 0;
        border: 0;
        outline: 0;
        font-weight: inherit;
        font-style: inherit;
        font-family: inherit;
        font-size: 100%;
        vertical-align: baseline;
    }
    
    audio,
    canvas,
    video {
        display: inline-block;
        *display: inline;
        *zoom: 1;
    }
    
    audio:not([controls]),
    [hidden] {
        display: none;
    }
    

compatibility

提供基础的兼容性封装。

依赖于:
  • .inline-block()

    让元素表现为 display: inline-block 的状态,IE 6/7 下通过 zoom: 1 模拟。

  • .box-sizing()

    -prefix

    设定盒模型的计算方式。

    • .box-sizing(@sizing)

      @sizing
      模型计算方式,可以为 border-box / padding-box / content-box

      前往 estFiddle 查看

      .box {
          .box-sizing(border-box);
      }
      .box {
          -webkit-box-sizing: border-box;
             -moz-box-sizing: border-box;
                  box-sizing: border-box;
      }
      
  • .placeholder()

    -prefix

    设定文本输入框占位符的颜色。

  • .user-select()

    -prefix

    设定处理选区的方式。

    • .user-select(@type)

      @type
      处理选区的方式。可用取值有 text / none

      前往 estFiddle 查看

      .menu-item {
          .user-select(none);
      }
      .menu-item {
          -webkit-user-select: none;
             -moz-user-select: none;
              -ms-user-select: none;
                  user-select: none;
      }
      

      user-select 目前没有出现在任何 W3C 官方的规范中,浏览器厂商的实现可能会有细节上的差异,目前不建议使用除 textnone 以外的任何值。

  • .opacity()

    设定不透明度。

  • .rgba-background()

    设定半透明背景色。

    • .rgba-background(@rgba)

      @rgba
      RGBA 格式色值。

      前往 estFiddle 查看

      .overlay {
          .rgba-background(rgba(0, 0, 0, 0.7));
      }
      .overlay {
          background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) repeat\0;
          filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3000000,endColorstr=#b3000000)\0;
          zoom: 1\0;
          background: rgba(0, 0, 0, 0.7);
      }
      
      :root .overlay {
          filter: none\9;
      }
      
    • .rgba-background(@color, @opacity)

      @color
      不带 alpha 通道的色值。
      @opacity
      不透明度。可取 0100(可以带 %)。

      前往 estFiddle 查看

      .overlay {
          .rgba-background(#000, 70%);
      }
      .overlay {
          background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) repeat\0;
          filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3000000,endColorstr=#b3000000)\0;
          zoom: 1\0;
          background: rgba(0, 0, 0, 0.7);
      }
      
      :root .overlay {
          filter: none\9;
      }
      
  • .border-radius()

    -prefix

    设定圆角。

    • .border-radius(@radius)

      @radius
      圆角半径。可包含 1 – 4 个空格分隔的半径值同时指定多个角的圆角半径。可选,默认值:@default-border-radius

      前往 estFiddle 查看

      .box-one {
          .border-radius(3px);
      }
      
      .box-two {
          .border-radius(3px 2px);
      }
      .box-one {
          -webkit-border-radius: 3px;
             -moz-border-radius: 3px;
                  border-radius: 3px;
      }
      
      .box-two {
          -webkit-border-radius: 3px 2px;
             -moz-border-radius: 3px 2px;
                  border-radius: 3px 2px;
      }
      
    • .border-radius(@radius-x, @radius-y)

      @radius-x
      水平方向的圆角半径。可含 1–4 个空格分隔的半径值同时指定多个角的圆角半径。
      @radius-y
      垂直方向的圆角半径。可含 1–4 个空格分隔的半径值同时指定多个角的圆角半径。

      前往 estFiddle 查看

      .box-one {
          .border-radius(3px, 5px);
      }
      
      .box-two {
          .border-radius(3px 6px, 5px 5px 3px 3px);
      }
      .box-one {
          -webkit-border-radius: 3px / 5px;
             -moz-border-radius: 3px / 5px;
                  border-radius: 3px / 5px;
      }
      
      .box-two {
          -webkit-border-radius: 3px 6px / 5px 5px 3px 3px;
             -moz-border-radius: 3px 6px / 5px 5px 3px 3px;
                  border-radius: 3px 6px / 5px 5px 3px 3px;
      }
      
  • .border-top-left-radius()

    -prefix

    设定左上角圆角半径。

  • .border-top-right-radius()

    -prefix

    设定右上角圆角半径。

    参数说明请参考 .border-top-left-radius()

  • .border-bottom-right-radius()

    -prefix

    设定右下角圆角半径。

    参数说明请参考 .border-top-left-radius()

  • .border-bottom-left-radius()

    -prefix

    设定左下角圆角半径。

    参数说明请参考 .border-top-left-radius()

  • .border-top-radius()

    设定左上角和右上角圆角半径。

    参数说明请参考 .border-top-left-radius()

  • .border-right-radius()

    设定右上角和右下角圆角半径。

    参数说明请参考 .border-top-left-radius()

  • .border-bottom-radius()

    设定左下角和右下角圆角半径。

    参数说明请参考 .border-top-left-radius()

  • .border-left-radius()

    设定左上角和左下角圆角半径。

    参数说明请参考 .border-top-left-radius()

  • .box-shadow()

    -prefix

    设定元素的阴影,支持多个阴影。

    • .box-shadow(@shadow, ...)

      @shadow
      单个阴影参数。可选,默认值:@default-box-shadow

      前往 estFiddle 查看

      .box-one {
          .box-shadow(0 0 5px rgba(0, 0, 0, 0.5));
      }
      
      .box-two {
          .box-shadow(0 -1px 0 #000, inset 0 1px 1px rgb(255, 0, 0));
      }
      .box-one {
          -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
             -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
                  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
      }
      
      .box-two {
          -webkit-box-shadow: 0 -1px 0 #000000, inset 0 1px 1px #ff0000;
             -moz-box-shadow: 0 -1px 0 #000000, inset 0 1px 1px #ff0000;
                  box-shadow: 0 -1px 0 #000000, inset 0 1px 1px #ff0000;
      }
      
  • .transition()

    -prefix

    过渡(transition)设定。

    • .transition(@transition, ...)

      @transition
      单个过渡设定。

      前往 estFiddle 查看

      .box-one {
          .transition(background-color 1s linear);
      }
      
      .box-two {
          .transition(height 0.5s ease, opacity 2s linear 0.5s);
      }
      .box-one {
          -webkit-transition: background-color 1s linear;
             -moz-transition: background-color 1s linear;
               -o-transition: background-color 1s linear;
                  transition: background-color 1s linear;
      }
      
      .box-two {
          -webkit-transition: height 0.5s ease, opacity 2s linear 0.5s;
             -moz-transition: height 0.5s ease, opacity 2s linear 0.5s;
               -o-transition: height 0.5s ease, opacity 2s linear 0.5s;
                  transition: height 0.5s ease, opacity 2s linear 0.5s;
      }
      
    过渡属性值写法请参考:
  • .transition-property()

    -prefix

    设定过渡(transition)影响的属性。

    • .transition-property(@property, ...)

      @property
      参与单个过渡的属性名称。

      前往 estFiddle 查看

      .box-one {
          .transition-property(background-color);
      }
      
      .box-two {
          .transition-property(height, opacity);
      }
      .box-one {
          -webkit-transition-property: background-color;
             -moz-transition-property: background-color;
               -o-transition-property: background-color;
                  transition-property: background-color;
      }
      
      .box-two {
          -webkit-transition-property: height, opacity;
             -moz-transition-property: height, opacity;
               -o-transition-property: height, opacity;
                  transition-property: height, opacity;
      }
      

      可以参与过渡的属性列表参见 Animatable properties from CSS

  • .transition-duration()

    -prefix

    设定过渡(transition)的持续时间。

    • .transition-duration(@duration, ...)

      @duration
      单个过渡的持续时间。

      前往 estFiddle 查看

      .box-one {
          .transition-duration(1s);
      }
      
      .box-two {
          .transition-duration(0.5s, 2s);
      }
      .box-one {
          -webkit-transition-duration: 1s;
             -moz-transition-duration: 1s;
               -o-transition-duration: 1s;
                  transition-duration: 1s;
      }
      
      .box-two {
          -webkit-transition-duration: 0.5s, 2s;
             -moz-transition-duration: 0.5s, 2s;
               -o-transition-duration: 0.5s, 2s;
                  transition-duration: 0.5s, 2s;
      }
      
  • .transition-timing-function()

    -prefix

    设定过渡(transition)的时间函数。

    • .transition-timing-function(@timing-function, ...)

      @timing-function
      单个过渡的时间函数。

      前往 estFiddle 查看

      .box-one {
          .transition-timing-function(linear);
      }
      
      .box-two {
          .transition-timing-function(ease, linear);
      }
      .box-one {
          -webkit-transition-timing-function: linear;
             -moz-transition-timing-function: linear;
               -o-transition-timing-function: linear;
                  transition-timing-function: linear;
      }
      
      .box-two {
          -webkit-transition-timing-function: ease, linear;
             -moz-transition-timing-function: ease, linear;
               -o-transition-timing-function: ease, linear;
                  transition-timing-function: ease, linear;
      }
      
  • .transition-delay()

    -prefix

    设定过渡(transition)的延迟时间。

    • .transition-delay(@delay, ...)

      @delay
      单个过渡的延迟时间。

      前往 estFiddle 查看

      .box-one {
          .transition-delay(0s);
      }
      
      .box-two {
          .transition-delay(0s, 0.5s);
      }
      .box-one {
          -webkit-transition-delay: 0s;
             -moz-transition-delay: 0s;
               -o-transition-delay: 0s;
                  transition-delay: 0s;
      }
      
      .box-two {
          -webkit-transition-delay: 0s, 0.5s;
             -moz-transition-delay: 0s, 0.5s;
               -o-transition-delay: 0s, 0.5s;
                  transition-delay: 0s, 0.5s;
      }
      
  • .animation()

    -prefix

    动画(animation)设定。

    • .animation(@animation, ...)

      @animation
      单个动画设定。

      前往 estFiddle 查看

      .box-one {
          .animation(rotate 2s linear);
      }
      
      .box-two {
          .animation(fly-in 0.5s ease-out, fade-in 0.5s ease-out);
      }
      .box-one {
          -webkit-animation: rotate 2s linear;
             -moz-animation: rotate 2s linear;
               -o-animation: rotate 2s linear;
                  animation: rotate 2s linear;
      }
      
      .box-two {
          -webkit-animation: fly-in 0.5s ease-out, fade-in 0.5s ease-out;
             -moz-animation: fly-in 0.5s ease-out, fade-in 0.5s ease-out;
               -o-animation: fly-in 0.5s ease-out, fade-in 0.5s ease-out;
                  animation: fly-in 0.5s ease-out, fade-in 0.5s ease-out;
      }
      
    动画属性值写法请参考:
  • .animation-name()

    -prefix

    设定动画(animation)对应的 @keyframes 规则名称。

    • .animation-name(@name, ...)

      @name
      单个动画对应的 @keyframes 规则名称。

      前往 estFiddle 查看

      .box-one {
          .animation-name(rotate);
      }
      
      .box-two {
          .animation-name(fly-in, fade-in);
      }
      .box-one {
          -webkit-animation-name: rotate;
             -moz-animation-name: rotate;
               -o-animation-name: rotate;
                  animation-name: rotate;
      }
      
      .box-two {
          -webkit-animation-name: fly-in, fade-in;
             -moz-animation-name: fly-in, fade-in;
               -o-animation-name: fly-in, fade-in;
                  animation-name: fly-in, fade-in;
      }
      
  • .animation-duration()

    -prefix

    设定动画(animation)的持续时间。

    • .animation-duration(@duration, ...)

      @duration
      单个动画的持续时间。

      前往 estFiddle 查看

      .box-one {
          .animation-duration(3s);
      }
      
      .box-two {
          .animation-duration(0.5s, 3s);
      }
      .box-one {
          -webkit-animation-duration: 3s;
             -moz-animation-duration: 3s;
               -o-animation-duration: 3s;
                  animation-duration: 3s;
      }
      
      .box-two {
          -webkit-animation-duration: 0.5s, 3s;
             -moz-animation-duration: 0.5s, 3s;
               -o-animation-duration: 0.5s, 3s;
                  animation-duration: 0.5s, 3s;
      }
      
  • .animation-timing-function()

    -prefix

    设定动画(animation)的时间函数。

    • .animation-timing-function(@timing-function, ...)

      @timing-function
      单个动画的时间函数。

      前往 estFiddle 查看

      .box-one {
          .animation-timing-function(linear);
      }
      
      .box-two {
          .animation-timing-function(ease, linear);
      }
      
      .box-one {
          -webkit-animation-timing-function: linear;
             -moz-animation-timing-function: linear;
               -o-animation-timing-function: linear;
                  animation-timing-function: linear;
      }
      
      .box-two {
          -webkit-animation-timing-function: ease, linear;
             -moz-animation-timing-function: ease, linear;
               -o-animation-timing-function: ease, linear;
                  animation-timing-function: ease, linear;
      }
      
  • .animation-iteration-count()

    -prefix

    设定动画(animation)的循环次数。

    • .animation-iteration-count(@count, ...)

      @count
      单个动画的循环次数。

      前往 estFiddle 查看

      .box-one {
          .animation-iteration-count(5);
      }
      
      .box-two {
          .animation-iteration-count(3, infinite);
      }
      .box-one {
          -webkit-animation-iteration-count: 5;
             -moz-animation-iteration-count: 5;
               -o-animation-iteration-count: 5;
                  animation-iteration-count: 5;
      }
      
      .box-two {
          -webkit-animation-iteration-count: 3, infinite;
             -moz-animation-iteration-count: 3, infinite;
               -o-animation-iteration-count: 3, infinite;
                  animation-iteration-count: 3, infinite;
      }
      
  • .animation-direction()

    -prefix

    设定动画(animation)播放的正反方向。

    • .animation-direction(@direction, ...)

      @direction
      单个动画播放的正反方向。

      前往 estFiddle 查看

      .box-one {
          .animation-direction(reverse);
      }
      
      .box-two {
          .animation-direction(normal, alternate);
      }
      .box-one {
          -webkit-animation-direction: reverse;
             -moz-animation-direction: reverse;
               -o-animation-direction: reverse;
                  animation-direction: reverse;
      }
      
      .box-two {
          -webkit-animation-direction: normal, alternate;
             -moz-animation-direction: normal, alternate;
               -o-animation-direction: normal, alternate;
                  animation-direction: normal, alternate;
      }
      
  • .animation-play-state()

    -prefix

    设定动画(animation)的播放状态。

    • .animation-play-state(@state, ...)

      @state
      单个动画的播放状态。

      前往 estFiddle 查看

      .box-one {
          .animation-play-state(paused);
      }
      
      .box-two {
          .animation-play-state(paused, running);
      }
      .box-one {
          -webkit-animation-play-state: paused;
             -moz-animation-play-state: paused;
               -o-animation-play-state: paused;
                  animation-play-state: paused;
      }
      
      .box-two {
          -webkit-animation-play-state: paused, running;
             -moz-animation-play-state: paused, running;
               -o-animation-play-state: paused, running;
                  animation-play-state: paused, running;
      }
      
  • .animation-delay()

    设定动画(animation)的播放延迟时间。

    -prefix
    • .animation-delay(@delay, ...)

      @delay
      单个动画的播放延迟时间。

      前往 estFiddle 查看

      .box-one {
          .animation-delay(2s);
      }
      
      .box-two {
          .animation-delay(0s, 1s);
      }
      .box-one {
          -webkit-animation-delay: 2s;
             -moz-animation-delay: 2s;
               -o-animation-delay: 2s;
                  animation-delay: 2s;
      }
      
      .box-two {
          -webkit-animation-delay: 0s, 1s;
             -moz-animation-delay: 0s, 1s;
               -o-animation-delay: 0s, 1s;
                  animation-delay: 0s, 1s;
      }
      
  • .animation-fill-mode()

    -prefix

    设定动画(animation)的属性填充方式。

    • .animation-fill-mode(@mode, ...)

      @mode
      单个动画的属性填充方式。

      前往 estFiddle 查看

      .box-one {
          .animation-fill-mode(backwards);
      }
      
      .box-two {
          .animation-fill-mode(forwards, both);
      }
      .box-one {
          -webkit-animation-fill-mode: backwards;
             -moz-animation-fill-mode: backwards;
               -o-animation-fill-mode: backwards;
                  animation-fill-mode: backwards;
      }
      
      .box-two {
          -webkit-animation-fill-mode: forwards, both;
             -moz-animation-fill-mode: forwards, both;
               -o-animation-fill-mode: forwards, both;
                  animation-fill-mode: forwards, both;
      }
      
  • .transform()

    -prefix

    变换(transform)操作。

    • .transform(@transform-function, ...)

      @transform-function
      变换函数。

      前往 estFiddle 查看

      .box-one {
          .transform(matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0));
      }
      
      .box-two {
          .transform(translateX(10px), rotate(10deg), translateY(5px));
      }
      .box-one {
          -webkit-transform: matrix(1, 2, 3, 4, 5, 6);
             -moz-transform: matrix(1, 2, 3, 4, 5, 6);
              -ms-transform: matrix(1, 2, 3, 4, 5, 6);
               -o-transform: matrix(1, 2, 3, 4, 5, 6);
                  transform: matrix(1, 2, 3, 4, 5, 6);
      }
      
      .box-two {
          -webkit-transform: translateX(10px) rotate(10deg) translateY(5px);
             -moz-transform: translateX(10px) rotate(10deg) translateY(5px);
              -ms-transform: translateX(10px) rotate(10deg) translateY(5px);
               -o-transform: translateX(10px) rotate(10deg) translateY(5px);
                  transform: translateX(10px) rotate(10deg) translateY(5px);
      }
      
    变换函数写法请参考:
  • .transform-style()

    -prefix

    设定变换是否支持 3D。

    • .transform-style(@style)

      @style
      对 3D 变换的支持方式。

      前往 estFiddle 查看

      .box {
          .transform-style(preserve-3d);
      }
      .box {
          -webkit-transform-style: preserve-3d;
             -moz-transform-style: preserve-3d;
                  transform-style: preserve-3d;
      }
      
  • .transform-origin()

    -prefix

    设定变换的坐标原点。

    • .transform-origin(@origin)

      @origin
      坐标原点位置。

      前往 estFiddle 查看

      .box-one {
          .transform-origin(2px left);
      }
      
      .box-two {
          .transform-origin(2px 30% 10px);
      }
      .box-one {
          -webkit-transform-origin: 2px left;
             -moz-transform-origin: 2px left;
              -ms-transform-origin: 2px left;
               -o-transform-origin: 2px left;
                  transform-origin: 2px left;
      }
      
      .box-two {
          -webkit-transform-origin: 2px 30% 10px;
             -moz-transform-origin: 2px 30% 10px;
              -ms-transform-origin: 2px 30% 10px;
               -o-transform-origin: 2px 30% 10px;
                  transform-origin: 2px 30% 10px;
      }
      
  • .backface-visibility()

    -prefix

    设定3D变换后元素背面是否可见。

  • .perspective()

    -prefix

    设定透视距离。

  • .matrix()

    根据指定的矩阵进行 2D 变换。

    • .matrix(@a, @b, @c, @d, @tx, @ty)

      前往 estFiddle 查看

      .box {
          .matrix(1, -0.2, 0, 1, 0, 0);
      }
      .box {
          -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
             -moz-transform: matrix(1, -0.2, 0, 1, 0, 0);
              -ms-transform: matrix(1, -0.2, 0, 1, 0, 0);
               -o-transform: matrix(1, -0.2, 0, 1, 0, 0);
                  transform: matrix(1, -0.2, 0, 1, 0, 0);
      }
      

    参数含义及写法请参考 transform-function - CSS | MDN

  • .translate()

    进行 2D 平移变换。

    • .translate(@tx)

      @tx
      X 轴方向上的平移距离。

      前往 estFiddle 查看

      .box {
          .translate(80px);
      }
      .box {
          -webkit-transform: translate(80px);
             -moz-transform: translate(80px);
              -ms-transform: translate(80px);
               -o-transform: translate(80px);
                  transform: translate(80px);
      }
      

      Y 轴方向不进行平移。等价于 .translateX(@tx)

    • .translate(@tx, @ty)

      @tx
      X 轴方向上的平移距离。
      @ty
      Y 轴方向上的平移距离。

      前往 estFiddle 查看

      .box {
          .translate(30px, 50px);
      }
      .box {
          -webkit-transform: translate(30px, 50px);
             -moz-transform: translate(30px, 50px);
              -ms-transform: translate(30px, 50px);
               -o-transform: translate(30px, 50px);
                  transform: translate(30px, 50px);
      }
      
  • .translateX()

    进行 X 轴方向上的平移变换。

  • .translateY()

    进行 Y 轴方向上的平移变换。

    • .translateY(@ty)

      @ty
      平移距离。

      前往 estFiddle 查看

      .box {
          .translateY(80px);
      }
      .box {
          -webkit-transform: translateY(80px);
             -moz-transform: translateY(80px);
              -ms-transform: translateY(80px);
               -o-transform: translateY(80px);
                  transform: translateY(80px);
      }
      

      等价于 .translate(0, @ty)

  • .scale()

    进行 2D 缩放变换。

    • .scale(@s)

      @s
      缩放比例。

      前往 estFiddle 查看

      .box {
          .scale(2.1);
      }
      .box {
          -webkit-transform: scale(2.1);
             -moz-transform: scale(2.1);
              -ms-transform: scale(2.1);
               -o-transform: scale(2.1);
                  transform: scale(2.1);
      }
      

      等价于 .scale(@s, @s)

    • .scale(@sx, @sy)

      @sx
      X 轴方向上的缩放比例。
      @sy
      Y 轴方向上的缩放比例。

      前往 estFiddle 查看

      .box {
          .scale(2.1, 4);
      }
      .box {
          -webkit-transform: scale(2.1, 4);
             -moz-transform: scale(2.1, 4);
              -ms-transform: scale(2.1, 4);
               -o-transform: scale(2.1, 4);
                  transform: scale(2.1, 4);
      }
      
  • .scaleX()

    进行 X 轴方向上的缩放变换。

    • .scaleX(@sx)

      @sx
      缩放比例。

      前往 estFiddle 查看

      .box {
          .scaleX(0.5);
      }
      .box {
          -webkit-transform: scaleX(0.5);
             -moz-transform: scaleX(0.5);
              -ms-transform: scaleX(0.5);
               -o-transform: scaleX(0.5);
                  transform: scaleX(0.5);
      }
      

      等价于 .scale(@sx, 1)

  • .scaleY()

    进行 Y 轴方向上的缩放变换。

    • .scaleY(@sy)

      @sy
      缩放比例。

      前往 estFiddle 查看

      .box {
          .scaleY(2.7);
      }
      .box {
          -webkit-transform: scaleY(2.7);
             -moz-transform: scaleY(2.7);
              -ms-transform: scaleY(2.7);
               -o-transform: scaleY(2.7);
                  transform: scaleY(2.7);
      }
      
  • .rotate()

    进行 2D 旋转变换。

    • .rotate(@angle)

      @angle
      旋转角度。

      前往 estFiddle 查看

      .box {
          .rotate(30deg);
      }
      .box {
          -webkit-transform: rotate(30deg);
             -moz-transform: rotate(30deg);
              -ms-transform: rotate(30deg);
               -o-transform: rotate(30deg);
                  transform: rotate(30deg);
      }
      
  • .skew()

    进行 2D 倾斜拉伸变换。

    • .skew(@ax)

      @ax
      沿 X 轴倾斜拉伸的角度。

      前往 estFiddle 查看

      .box {
          .skew(30deg);
      }
      .box {
          -webkit-transform: skew(30deg);
             -moz-transform: skew(30deg);
              -ms-transform: skew(30deg);
               -o-transform: skew(30deg);
                  transform: skew(30deg);
      }
      

      沿 Y 轴方向不进行倾斜拉伸。等价于 .skewX(@ax)

    • .skew(@ax, @ay)

      @ax
      沿 X 轴倾斜拉伸的角度。
      @ay
      沿 Y 轴倾斜拉伸的角度。

      前往 estFiddle 查看

      .box {
          .skew(30deg, 15deg);
      }
      .box {
          -webkit-transform: skew(30deg, 15deg);
             -moz-transform: skew(30deg, 15deg);
              -ms-transform: skew(30deg, 15deg);
               -o-transform: skew(30deg, 15deg);
                  transform: skew(30deg, 15deg);
      }
      

    须注意 skew 的行为与 skewX 叠加上 skewY 并不等价。

  • .skewX()

    进行 X 轴方向上的平移变换。

    • .skewX(@ax)

      @ax
      倾斜拉伸的角度。

      前往 estFiddle 查看

      .box {
          .skewX(30deg);
      }
      .box {
          -webkit-transform: skewX(30deg);
             -moz-transform: skewX(30deg);
              -ms-transform: skewX(30deg);
               -o-transform: skewX(30deg);
                  transform: skewX(30deg);
      }
      

      等价于 .skew(@ax)

  • .skewY()

    沿 Y 轴倾斜拉伸的角度。

    • .skewY(@ay)

      @ay
      倾斜拉伸的角度。

      前往 estFiddle 查看

      .box {
          .skewY(15deg);
      }
      .box {
          -webkit-transform: skewY(15deg);
             -moz-transform: skewY(15deg);
              -ms-transform: skewY(15deg);
               -o-transform: skewY(15deg);
                  transform: skewY(15deg);
      }
      
  • .matrix3d()

    根据指定的矩阵进行 3D 变换。

    • .matrix3d(@a1, @b1, @c1, @d1, @a2, @b2, @c2, @d2, @a3, @b3, @c3, @d3, @a4, @b4, @c4, @d4)

      前往 estFiddle 查看

      .box {
          .matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      }
      .box {
          -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
             -moz-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
              -ms-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
               -o-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
                  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      }
      

    参数含义及写法请参考 transform-function - CSS | MDN

  • .translate3d()

    进行 3D 平移变换。

    • .translate3d(@tx, @ty, @tz)

      @tx
      X 轴方向上的平移距离。
      @ty
      Y 轴方向上的平移距离。
      @tz
      Z 轴方向上的平移距离。

      前往 estFiddle 查看

      .box {
          .translate3d(12px, 50%, 3em);
      }
      .box {
          -webkit-transform: translate3d(12px, 50%, 3em);
             -moz-transform: translate3d(12px, 50%, 3em);
              -ms-transform: translate3d(12px, 50%, 3em);
               -o-transform: translate3d(12px, 50%, 3em);
                  transform: translate3d(12px, 50%, 3em);
      }
      
  • .translateZ()

    进行 Z 轴方向上的平移变换。

  • .scale3d()

    进行 3D 缩放变换。

    • .scale3d(@sx, @sy, @sz)

      @sx
      X 轴方向上的缩放比例。
      @sy
      Y 轴方向上的缩放比例。
      @sz
      Z 轴方向上的缩放比例。

      前往 estFiddle 查看

      .box {
          .scale3d(2.5, 1.2, 0.3);
      }
      .box {
          -webkit-transform: scale3d(2.5, 1.2, 0.3);
             -moz-transform: scale3d(2.5, 1.2, 0.3);
              -ms-transform: scale3d(2.5, 1.2, 0.3);
               -o-transform: scale3d(2.5, 1.2, 0.3);
                  transform: scale3d(2.5, 1.2, 0.3);
      }
      
  • .scaleZ()

    进行 Z 轴方向上的缩放变换。

  • .rotate3d()

    进行 3D 旋转变换。

    • .rotate3d(@x, @y, @z, @angle)

      @x
      旋转轴方向向量在 X 轴方向上的分量。
      @y
      旋转轴方向向量在 Y 轴方向上的分量。
      @z
      旋转轴方向向量在 Z 轴方向上的分量。
      @angle
      旋转角度。

      前往 estFiddle 查看

      .box {
          .rotate3d(1, 2.0, 3.0, 10deg);
      }
      .box {
          -webkit-transform: rotate3d(1, 2, 3, 10deg);
             -moz-transform: rotate3d(1, 2, 3, 10deg);
              -ms-transform: rotate3d(1, 2, 3, 10deg);
               -o-transform: rotate3d(1, 2, 3, 10deg);
                  transform: rotate3d(1, 2, 3, 10deg);
      }
      
  • .rotateX()

    绕 X 轴方向进行旋转变换。

  • .rotateY()

    绕 Y 轴方向进行旋转变换。

  • .rotateZ()

    绕 Z 轴方向进行旋转变换。

  • .background-clip()

    -prefix

    设定背景渲染范围。可以分别指定多个背景的渲染范围。

    • .background-clip(@clip, ...)

      @clip
      单个背景的渲染范围。

      前往 estFiddle 查看

      .box-one {
          .background-clip(padding-box);
      }
      
      .box-two {
          .background-clip(border-box, content-box);
      }
      .box-one {
          -webkit-background-clip: padding-box;
             -moz-background-clip: padding;
               -o-background-clip: padding-box;
                  background-clip: padding-box;
      }
      
      .box-two {
          -webkit-background-clip: border-box, content-box;
             -moz-background-clip: border, content;
               -o-background-clip: border-box, content-box;
                  background-clip: border-box, content-box;
      }
      
  • .background-size()

    -prefix

    设定背景的尺寸。可以分别指定多个背景的尺寸。

    • .background-size(@size, ...)

      @size

      前往 estFiddle 查看

      .box-one {
          .background-size(cover);
      }
      
      .box-two {
          .background-size(50% auto, contain);
      }
      .box-one {
          -webkit-background-size: cover;
             -moz-background-size: cover;
               -o-background-size: cover;
                  background-size: cover;
      }
      
      .box-two {
          -webkit-background-size: 50% auto, contain;
             -moz-background-size: 50% auto, contain;
               -o-background-size: 50% auto, contain;
                  background-size: 50% auto, contain;
      }
      
  • .background-origin()

    -prefix

    设定背景的起止范围,可以分别指定多个背景的范围。

    • .background-origin(@origin, ...)

      @origin

      前往 estFiddle 查看

      .box-one {
          .background-origin(border-box);
      }
      
      .box-two {
          .background-origin(border-box, padding-box);
      }
      .box-one {
          -webkit-background-origin: border-box;
             -moz-background-origin: border;
               -o-background-origin: border-box;
                  background-origin: border-box;
      }
      
      .box-two {
          -webkit-background-origin: border-box, padding-box;
             -moz-background-origin: border, padding;
               -o-background-origin: border-box, padding-box;
                  background-origin: border-box, padding-box;
      }
      
  • .linear-gradient()

    -prefix

    设定线性渐变的背景。

    • .linear-gradient(@direction, @color-stops...)

      @direction
      渐变线的方向。取值可以是角度值,也可以使用关键字,如 to top / to right / to bottom left等。可参考 linear-gradient() Syntax
      @color-stops
      色标,至少有两个参数值。写法可参考 Gradient Color-Stops

      前往 estFiddle 查看

      .box-one {
          .linear-gradient(to right, white, black);
      }
      
      .box-two {
          .linear-gradient(to top right, white, black);
      }
      
      .box-three {
          .linear-gradient(273deg, red, yellow 30%, green 70%, purple);
      }
      .box-one {
          background-image: -webkit-linear-gradient(left, white, black);
          background-image: -moz-linear-gradient(left, white, black);
          background-image: -moz-linear-gradient(to right, white, black);
          background-image: -o-linear-gradient(to right, white, black);
          background-image: linear-gradient(to right, white, black);
          background-repeat: repeat;
      }
      
      .box-two {
          background-image: -webkit-linear-gradient(bottom left, white, black);
          background-image: -moz-linear-gradient(bottom left, white, black);
          background-image: -moz-linear-gradient(to top right, white, black);
          background-image: -o-linear-gradient(to top right, white, black);
          background-image: linear-gradient(to top right, white, black);
          background-repeat: repeat;
      }
      
      .box-three {
          background-image: -webkit-linear-gradient(177deg, red, yellow 30%, green 70%, purple);
          background-image: -moz-linear-gradient(177deg, red, yellow 30%, green 70%, purple);
          background-image: -o-linear-gradient(177deg, red, yellow 30%, green 70%, purple);
          background-image: linear-gradient(273deg, red, yellow 30%, green 70%, purple);
          background-repeat: repeat;
      }
      

      由于支持方向设定,不支持采用老 WebKit 的语法(Introducing CSS Gradients)的浏览器(Chrome 10-),且不使用 filter 语法在 IE 10 以下浏览器中进行模拟。

      需要特别注意的是,当使用 to <corner> 这样的写法(例如 to top right)来指定渐变线角度时,已经支持此语法的浏览器渲染效果将与采用 <corner> 语法的浏览器有差异。效果差异见此邮件:[css3-images] Gradient Magic 中的配图(新标准效果对应图中的“magic”效果)。

  • .horizontal-gradient()

    设定水平方向(从左到右)双色线性渐变的背景。

    • .horizontal-gradient(@start-color, @end-color)

      @start-color
      起始颜色。
      @end-color
      结束颜色。

      前往 estFiddle 查看

      .box {
          .horizontal-gradient(black, white);
      }
      .box {
          background-image: -webkit-gradient(linear, left top, right top, from(black), to(white));
          background-image: -webkit-linear-gradient(left, black, white);
          background-image: -moz-linear-gradient(left, black, white);
          background-image: -o-linear-gradient(left, black, white);
          background-image: linear-gradient(to right, black, white);
          background-repeat: repeat-x;
          filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#ff000000', endColorstr='#ffffffff', GradientType=1);
      }
      

      支持采用老 WebKit 语法的浏览器,并在 IE 10 以下浏览器中使用 filter 语法进行了模拟。

  • .vertical-gradient()

    设定垂直方向(从上到下)双色线性渐变的背景。

    • .vertical-gradient(@start-color, @end-color)

      @start-color
      起始颜色。
      @end-color
      结束颜色。

      前往 estFiddle 查看

      .box {
          .vertical-gradient(black, white);
      }
      .box {
          background-image: -webkit-gradient(linear, left top, left bottom, from(black), to(white));
          background-image: -webkit-linear-gradient(top, black, white);
          background-image: -moz-linear-gradient(top, black, white);
          background-image: -o-linear-gradient(top, black, white);
          background-image: linear-gradient(to bottom, black, white);
          background-repeat: repeat-x;
          filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#ff000000', endColorstr='#ffffffff', GradientType=0);
      }
      

      支持采用老 WebKit 语法的浏览器,并在 IE 10 以下浏览器中使用 filter 语法进行了模拟。

  • .repeating-linear-gradient()

    -prefix

    设定循环线性渐变的背景。

    • .repeating-linear-gradient(@direction, @color-stops...)

      @direction
      渐变线的方向。
      @color-stops
      色标,至少有两个参数值。

      前往 estFiddle 查看

      .box-one {
          .repeating-linear-gradient(to top right, white, black 20px);
      }
      
      .box-two {
          .repeating-linear-gradient(273deg, red, yellow 30%, green 70%);
      }
      .box-one {
          background-image: -webkit-repeating-linear-gradient(bottom left, white, black 20px);
          background-image: -moz-repeating-linear-gradient(bottom left, white, black 20px);
          background-image: -moz-repeating-linear-gradient(to top right, white, black 20px);
          background-image: -o-repeating-linear-gradient(to top right, white, black 20px);
          background-image: repeating-linear-gradient(to top right, white, black 20px);
      }
      
      .box-two {
          background-image: -webkit-repeating-linear-gradient(177deg, red, yellow 30%, green 70%);
          background-image: -moz-repeating-linear-gradient(177deg, red, yellow 30%, green 70%);
          background-image: -o-repeating-linear-gradient(177deg, red, yellow 30%, green 70%);
          background-image: repeating-linear-gradient(273deg, red, yellow 30%, green 70%);
      }
      

      参数写法及注意事项请参考 .linear-gradient()

  • .radial-gradient()

    -prefix

    设定径向渐变的背景。

    • .radial-gradient(@shape, @color-stops...)

      @shape
      渐变的形状、范围、位置。写法可参考 radial-gradient() Syntax。书写方式按草案的标准写法书写,格式为 [<shape>] ? [<extent>] ? [at <position>] ?,其中每一部分都为可选。整个 @shape 参数省略不写时,默认输出圆形径向渐变。
      @color-stops
      色标,至少有两个参数值。写法可参考 Gradient Color-Stops

      前往 estFiddle 查看

      .box-one {
          .radial-gradient(black, white);
      }
      
      .box-two {
          .radial-gradient(closest-corner at 30% 30%, rgba(0, 0, 0, 0.2), rgba(0, 0, 225, 0.8));
      }
      
      .box-three {
          .radial-gradient(ellipse, limegreen, skyblue 30%, crimson 70%);
      }
      .box-one {
          background-image: -webkit-radial-gradient(black, white);
          background-image: -moz-radial-gradient(black, white);
          background-image: -o-radial-gradient(black, white);
          background-image: radial-gradient(circle, black, white);
      }
      
      .box-two {
          background-image: -webkit-radial-gradient(30% 30%, closest-corner, rgba(0, 0, 0, 0.2), rgba(0, 0, 225, 0.8));
          background-image: -moz-radial-gradient(30% 30%, closest-corner, rgba(0, 0, 0, 0.2), rgba(0, 0, 225, 0.8));
          background-image: -o-radial-gradient(30% 30%, closest-corner, rgba(0, 0, 0, 0.2), rgba(0, 0, 225, 0.8));
          background-image: radial-gradient(closest-corner at 30% 30%, rgba(0, 0, 0, 0.2), rgba(0, 0, 225, 0.8));
      }
      
      .box-three {
          background-image: -webkit-radial-gradient(ellipse, limegreen, skyblue 30%, crimson 70%);
          background-image: -moz-radial-gradient(ellipse, limegreen, skyblue 30%, crimson 70%);
          background-image: -o-radial-gradient(ellipse, limegreen, skyblue 30%, crimson 70%);
          background-image: radial-gradient(ellipse, limegreen, skyblue 30%, crimson 70%);
      }
      

      不支持采用老 WebKit 语法(Introducing CSS Gradients)的浏览器。另外,不支持按具体尺寸(px / % 等)设置渐变范围,只能使用范围关键字即 closest-side / closest-corner / farthest-side / farthest-corner 之一。

  • .repeating-radial-gradient()

    -prefix

    设定循环线性渐变的背景。

    • .repeating-radial-gradient(@shape, @color-stops...)

      @shape
      渐变的形状、范围、位置。
      @color-stops
      色标,至少有两个参数值。

      前往 estFiddle 查看

      .box-one {
          .repeating-radial-gradient(white, black 20px);
      }
      
      .box-two {
          .repeating-radial-gradient(ellipse farthest-side, white, black 20px);
      }
      .box-one {
          background-image: -webkit-repeating-radial-gradient(white, black, 20px);
          background-image: -moz-repeating-radial-gradient(white, black, 20px);
          background-image: -o-repeating-radial-gradient(white, black, 20px);
          background-image: repeating-radial-gradient(circle, white, black, 20px);
      }
      
      .box-two {
          background-image: -webkit-repeating-radial-gradient(ellipse farthest-side, white, black 20px);
          background-image: -moz-repeating-radial-gradient(ellipse farthest-side, white, black 20px);
          background-image: -o-repeating-radial-gradient(ellipse farthest-side, white, black 20px);
          background-image: repeating-radial-gradient(ellipse farthest-side, white, black 20px);
      }
      

      参数写法及注意事项请参考 .radial-gradient()

  • .display()

    -prefix

    设定元素的显示方式,用来为带前缀的属性值提供兼容性支持。

    目前需要使用此功能的 display 值有 flex / inline-flex / box / inline-box 四种,前两种对应的伸缩盒布局规范为 CSS Flexible Box Layout Module Level 1(最新版)CSS Flexible Box Layout Module(2012 年初版),后两种对应的是 Flexible Box Layout Module(2009 版)

  • .flex-direction()

    -prefix

    设定伸缩盒布局的排列方向。

    • .flex-direction(@flex-direction)

      @flex-direction
      布局方向,可用值为 row / row-reverse / column / column-reverse

      前往 estFiddle 查看

      .container {
          .flex-direction(row-reverse);
      }
      .container {
          -webkit-flex-direction: row-reverse;
              -ms-flex-direction: row-reverse;
                  flex-direction: row-reverse;
      }
      
  • .flex-wrap()

    -prefix

    设定伸缩盒子元素在排列时是否可以折行。

    • .flex-wrap(@wrap)

      @wrap
      折行方式。wrap 表示可以折行,nowrap 表示必须排列在同一行中。

      前往 estFiddle 查看

      .container {
          .flex-wrap(wrap);
      }
      .container {
          -webkit-flex-wrap: wrap;
              -ms-flex-wrap: wrap;
                  flex-wrap: wrap;
      }
      
  • .flex-flow()

    -prefix

    设定伸缩盒子元素的排列方式,用来快速定义 flex-directionflex-wrap 的值。

  • .order()

    -prefix

    设定伸缩盒项目元素的排列次序。

  • .flex()

    -prefix

    设定伸缩盒项目元素的可伸缩程度,用来快速定义 flex-growflex-shrinkflex-basis 的值。

  • .flex-grow()

    -prefix

    设定伸缩盒项目元素的伸展因子。

  • .flex-shrink()

    -prefix

    设定伸缩盒项目元素的收缩因子。

  • .flex-basis()

    -prefix

    设定伸缩盒项目元素的初始主尺寸。

  • .justify-content()

    -prefix

    设定在当前伸缩行中,沿主轴方向排列伸缩盒项目元素时如何分配它们之间和两边的多余空间。

    • .justify-content(@align)

      @align
      多余空间分配方式。

      前往 estFiddle 查看

      .gallery {
          .justify-content(space-around);
      }
      .gallery {
          -ms-flex-pack: distribute;
          -webkit-justify-content: space-around;
                  justify-content: space-around;
      }
      
      justify-content 值含义见下图:
      justify-content
  • .align-items()

    -prefix

    设定在当前伸缩行中,沿交叉轴(与主轴垂直)方向如何分配多余的空间。

    • .align-items(@align)

      @align
      多余空间分配方式。

      前往 estFiddle 查看

      .gallery {
          .align-items(center);
      }
      .gallery {
          -ms-flex-align: center;
          -webkit-align-items: center;
                  align-items: center;
      }
      
      align-items 值含义见下图:
      align-items
  • .align-self()

    -prefix

    设定在当前伸缩行中,沿交叉轴(与主轴垂直)方向如何分配某个伸缩盒项目两侧的多余空间,可以覆盖伸缩盒容器上设定的 align-items 属性。

  • .align-content()

    -prefix

    用来设定伸缩盒容器的各行在交叉轴方向(与主轴垂直)上有多余空间时的对齐方式。

    • .align-content(@align)

      @align
      多余空间分配方式。

      前往 estFiddle 查看

      .photo {
          .align-content(flex-start);
      }
      .photo {
          -ms-flex-line-pack: start;
          -webkit-align-content: flex-start;
                  align-content: flex-start;
      }
      
      align-content 值含义见下图:
      align-content
  • .box-orient()

    -prefix

    用来设定伸缩盒子元素按垂直排列还是水平排列。

    • .box-orient(@orient)

      @orient
      排列方向。可用值为 horizontal / vertical / inline-axis / block-axis

      前往 estFiddle 查看

      .gallery {
          .box-orient(horizontal);
      }
      .gallery {
          -webkit-box-orient: horizontal;
             -moz-box-orient: horizontal;
      }
      

    box-orient 是老版本伸缩盒规范的属性,建议仅在必要时使用。

  • .box-direction()

    -prefix

    用来设定伸缩盒子元素按正向排列还是逆向排列。

    box-direction 是老版本伸缩盒规范的属性,建议仅在必要时使用。

  • .box-ordinal-group()

    -prefix

    为伸缩盒子元素分配一个组序号,将影响 box-direction 排列的次序,参见 box-ordinal-group - CSS | MDN

    box-ordinal-group 是老版本伸缩盒规范的属性,建议仅在必要时使用。

  • .box-flex-group()

    -prefix

    为伸缩盒子元素分配一个伸缩组序号,伸缩组将影响多余空间的分配方式,可参考 box-flex-group - CSS | MDN

    box-flex-group 是老版本伸缩盒规范的属性,建议仅在必要时使用。

  • .box-flex()

    -prefix

    指定伸缩盒子元素在分配多余空间时的伸展因子。

    box-flex 是老版本伸缩盒规范的属性,建议仅在必要时使用。

  • .box-align()

    -prefix

    指定伸缩盒元素如何在垂直于排列方向的方向上分配多余空间。

    box-align 是老版本伸缩盒规范的属性,建议仅在必要时使用。

  • .box-pack()

    -prefix

    指定伸缩盒元素如何在排列方向上分配多余空间。

    • .box-pack(@align)

      @align
      分配方式,可用值为 start / center / end / justify

      前往 estFiddle 查看

      .container {
          .box-pack(justify);
      }
      .container {
          -webkit-box-pack: justify;
             -moz-box-pack: justify;
      }
      

      参数值可参考 .justify-content()start / center / end / justify 分别对应 flex-start / center / flex-end / space-between

    box-pack 是老版本伸缩盒规范的属性,建议仅在必要时使用。

util

常用辅助类工具函数。

依赖于:

typography

文字排版相关功能。

依赖于:
  • .font-family()

    调用预设样式设定文字的字体族。

    • .font-family(@type)

      @type
      预设字体类型,可取值为 base / heading / code,分别对应普通文本、标题、代码。

      前往 estFiddle 查看

      pre code {
          .font-family(code);
      }
      pre code {
          font-family: Monaco, Consolas, monospace;
      }
      
  • .ellipsis()

    省略号样式,当文字超过容器宽度时,超出部分文字隐藏并显示省略号。

    • .ellipsis()

      前往 estFiddle 查看

      .cell {
      width: 120px;
          .ellipsis();
      }
      .cell {
          width: 120px;
          overflow: hidden;
          -o-text-overflow: ellipsis;
             text-overflow: ellipsis;
          white-space: nowrap;
      }
      
    • .ellipsis(@line-number)

      限定最多显示的行数,超出部分隐藏并显示省略号。

      @line-number
      最多显示的行数。

      前往 estFiddle 查看

      .news {
          width: 300px;
          .ellipsis(3);
      }
      .news {
          width: 300px;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
      }
      

      限制超出指定行数截断的功能只在 WebKit 内核浏览器下有效。

  • .force-wrap()

    强制换行,阻止长字符串(例如 URL 或很长的连续英文字符)打破布局。

    前往 estFiddle 查看

    .comment {
        .force-wrap();
    }
    .comment {
        white-space: pre;
        white-space: pre-wrap;
        white-space: pre-line;
        white-space: -pre-wrap;
        white-space: -o-pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -hp-pre-wrap;
        word-wrap: break-word;
    }
    
  • .hide-text()

    用于隐藏元素内文字,一般在文字隐藏之后使用背景图片替代显示。如果使用此 mixin 的元素是 inline-block 元素,请确保为其设置宽度。

    前往 estFiddle 查看

    .logo {
        .hide-text();
    }
    .logo {
        text-indent: -9999px;
        overflow: hidden;
        text-align: left;
    }
    
  • .invisible()

    用于隐藏整个元素,一般处理那些仅仅用于增加可访问性的文字或元素。

    前往 estFiddle 查看

    .screen-reader-notes {
        .invisible();
    }
    .screen-reader-notes {
        position: absolute !important;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
        *clip: rect(1px 1px 1px 1px);
    }
    

    了解更多相关内容可以参考 Using CSS clip as an Accessible Method of Hiding Content

  • .img-replace()

    用图片替换文字,通常用作图标的样式。

    • .img-replace(@img-url, @img-x, @img-y)

      @img-url
      字符串格式的背景图片路径。可以是路径字符串,也可以是 url() 表达式。
      @img-x
      背景图 background-position 的水平方向位置。可选,默认值:0
      @img-y
      背景图 background-position 的垂直方向位置。可选,默认值:0

      前往 estFiddle 查看

      .logo-one {
          .inline-block();
          .img-replace("http://www.baidu.com/img/bdlogo.gif");
          width: 270px;
          height: 129px;
      }
      
      .logo-two {
          .inline-block();
          .img-replace(url("../logo.gif"));
          width: 270px;
          height: 129px;
      }
      .logo-one {
          display: inline-block;
          *display: inline;
          *zoom: 1;
          text-indent: -9999px;
          overflow: hidden;
          text-align: left;
          background: url(http://www.baidu.com/img/bdlogo.gif) no-repeat 0 0;
          width: 270px;
          height: 129px;
      }
      
      .logo-two {
          display: inline-block;
          *display: inline;
          *zoom: 1;
          text-indent: -9999px;
          overflow: hidden;
          text-align: left;
          background: url(../logo.gif) no-repeat 0 0;
          width: 270px;
          height: 129px;
      }
      

      当 Less 编译时开启了 --relative-urls-ru)时,直接输入字符串路径很可能得到非预期的结果。此时需要使用 url() 表达式来提供参数。

  • .font-size-rem()

    用于将 px 单位的字体大小转换为 rem 单位。依赖于 @default-font-size,请确保 <HTML> 标签的字体大小与 @default-font-size 一致。

    • .font-size-rem(@px-size)

      @px-size
      px 为单位的字体大小。可以是纯数字(如 14)也可以是带 px 单位的值(如 14px)。

      前往 estFiddle 查看

      .text {
          .font-size-rem(32px);
      }
      .text {
          font-size: 32px;
          font-size: 2rem;
      }
      
  • .font-size-em()

    用于将 px 单位的字体大小转换为 em 单位。依赖于 @default-font-size,请确保 <HTML> 标签的字体大小与 @default-font-size 一致。

  • .font-face()

    用来方便地使用 @font-face 定义 web 字体。

    • .font-face(@family-name, @font-path, @font-weight, @font-style, @include-svg)

      @family-name
      字体族的名称。
      @font-path
      字体的路径。可以是路径字符串,也可以是 url() 表达式。
      @font-weight
      字重。可选,默认值:normal
      @font-style
      字体的风格。可选,默认值:normal
      @include-svg
      是否使用 svg 格式的字体。可取 truefalse。可选,默认值:false

      前往 estFiddle 查看

      .font-face("FamilyName", "/some/font/url");
      @font-face {
          font-family: "FamilyName";
          src: url(/some/font/url.eot);
          src: url(/some/font/url.eot?#iefix) format("embedded-opentype"),
               url(/some/font/url.woff) format("woff"),
               url(/some/font/url.ttf) format("truetype");
          font-weight: normal;
          font-style: normal;
      }
      

      当 Less 编译时开启了 --relative-urls-ru)时,直接输入字符串路径很可能得到非预期的结果。此时需要使用 url() 表达式来提供参数。

  • .hover-link()

    用于实现链接默认无下划线,hover后有下划线的样式。

    前往 estFiddle 查看

    a {
        .hover-link();
    }
    a {
        text-decoration: none;
    }
    
    a:hover {
        text-decoration: underline;
    }
    
  • .unstyled-link()

    用于将链接变成默认的文字样式。

    前往 estFiddle 查看

    .plain-link {
        .unstyled-link();
    }
    .plain-link {
        color: inherit;
        text-decoration: inherit;
        cursor: inherit;
    }
    
    .plain-link:active,
    .plain-link:focus {
        outline: none;
    }
    
  • .drop-cap()

    用于实现首文字下沉样式。

    • .drop-cap(@line-height, @lines, @margin-right)

      @line-height
      行高。单位可选% / px / em,或者直接使用缩放因子如 2
      @line-number
      下沉的行数。可选,默认值:2
      @margin-right
      下沉文字与普通文字的间隔。可选,默认值:1em(相对普通文字大小计算)。

      @margin-right 直接设为 1em 时为相对下沉文字的字体大小,不设会自动转换为相对普通文字字体大小的 1em

      前往 estFiddle 查看

      article p {
          line-height: 24px;
          .drop-cap(24px);
      }
      article p {
          overflow: hidden;
          line-height: 24px;
      }
      
      article p:first-letter {
          float: left;
          margin-right: 0.5em;
          font-size: 2em;
          line-height: 24px;
          line-height: 48px;
      }
      
  • .drop-cap-inline()

    用于实现多字下沉样式。

    • .drop-cap-inline(@line-height, @lines, @margin-right)

      @context-line-height
      所处环境的行高。单位可选% / px / em,或者直接使用缩放因子如 2
      @line-number
      下沉的行数。可选,默认值:2
      @margin-right
      下沉文字与普通文字的间隔。可选,默认值为相对普通文字大小的 1em

      @margin-right 直接设为 1em 时为相对下沉文字的字体大小,不设会自动转换为相对普通文字字体大小的 1em

      <p>
      <span class="drop">Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit. Nesciunt, eos, beatae error quaerat blanditiis repudiandae laudantium debitis officiis veritatis quasi dicta deserunt quo ipsum. Excepturi numquam nesciunt voluptates veniam eligendi.
      </p>
      

      前往 estFiddle 查看

      p {
          line-height: 24px;
      
          .drop {
              .drop-cap-inline(24px, 2);
          }
      }
      p {
          line-height: 24px;
      }
      
      p .drop {
          float: left;
          margin-right: 0.5em;
          font-size: 2em;
          line-height: 24px;
          line-height: 48px;
      }
      
  • .rhythm()

    用于按照“垂直的旋律”来排版文字,适合中文阅读。规范化作用域内所有块级元素的上下边框、行高、字体大小,一般用于多段文字(文章)的显示。

    .rhythm() 可结合下面的 mixin 更灵活地使用(这些 mixin 必须在已经使用了 .rhythm() 的作用域下使用)。下面所述的基础高度为 line-height 的一半。

    • .rhythm-line-height(@lines)

      设置行高倍数。

      @lines
      行高相对于基础行高的倍数。
    • .rhythm-margin(@lines)

      设置上下外边距高度。

      @lines
      外边距相对基础高度的倍数。
    • .rhythm-margin-top(@lines)

      设置上外边距高度。

      @lines
      上外边距相对基础高度的倍数。
    • .rhythm-margin-bottom(@lines)

      设置下外边距高度。

      @lines
      下外边距相对基础高度的倍数。
    • .rhythm-padding(@lines, @border)

      设置上下内边距高度。

      @lines
      内边距相对基础高度的倍数。
      @border
      上下边框样式,格式与 CSS border 属性相同。可选,默认值:false,此时没有边框。
    • .rhythm-padding-top(@lines, @border)

      设置上内边距高度。

      @lines
      上内边距相对基础高度的倍数。
      @border
      上边框样式,格式与 CSS border 属性相同。可选,默认值:false,此时没有边框。
    • .rhythm-padding-bottom(@lines, @border)

      设置下内边距高度。

      @lines
      下内边距相对基础高度的倍数。
      @border
      下边框样式,格式与 CSS border 属性相同。可选,默认值:false,此时没有边框。

    前往 estFiddle 查看

    .entry {
        .rhythm(14px, 2);
        blockquote {
            .rhythm-margin(1);
            .rhythm-padding(1, 1px solid #CCC);
        }
        p {
            .rhythm-line-height(2);
            .rhythm-margin(2);
            .rhythm-padding(2);
        }
    }
    .entry {
        font-size: 14px;
        line-height: 2;
    }
    
    .entry h1,
    .entry h2,
    .entry h3,
    .entry h4,
    .entry h5,
    .entry h6,
    .entry div,
    .entry p,
    .entry section,
    .entry header,
    .entry footer,
    .entry article,
    .entry ul,
    .entry ol,
    .entry pre,
    .entry table,
    .entry figure {
        line-height: 28px;
        margin-top: 14px;
        margin-bottom: 14px;
        padding: 0;
    }
    
    .entry h1 {
        line-height: 56px;
    }
    
    .entry h1 {
        font-size: 28px;
    }
    
    .entry h2 {
        font-size: 21px;
    }
    
    .entry h3 {
        font-size: 16.8px;
    }
    
    .entry h4,
    .entry h5,
    .entry h6 {
        font-size: 14px;
    }
    
    .entry blockquote {
        margin-top: 14px;
        margin-bottom: 14px;
        padding-top: 13px;
        padding-bottom: 13px;
        border-top: 1px solid #cccccc;
        border-bottom: 1px solid #cccccc;
    }
    
    .entry p {
        line-height: 56px;
        margin-top: 28px;
        margin-bottom: 28px;
        padding-top: 28px;
        padding-bottom: 28px;
    }
    
  • .centered-line()

    用于设置单行文本垂直居中。

grid

帮助生成自定义的栅格布局。 效果可以参考测试用的示例

依赖于:
  • .make-row()

    创建栅格外部容器。

  • .make-column()

    创建栅格单列容器。

    • .make-column(@ratio, @gutter, @offset)

      @ratio
      单列的比例,如 1/3
      @gutter
      间隔宽度占全部宽度的百分比。可选,默认值为 @default-column-gutter
      @offset
      偏移量。可选,默认为 0

      前往 estFiddle 查看

      main {
          .make-column(2/3, 5%);
      }
      
      aside {
          .make-column(1/3, 5%);
      }
      main {
          display: block;
          float: left;
          width: 65%;
          margin-left: 5%;
      }
      
      main:first-child {
          margin-left: 0%;
      }
      
      aside {
          display: block;
          float: left;
          width: 30%;
          margin-left: 5%;
      }
      
      aside:first-child {
          margin-left: 0%;
      }
      

      适用于按百分比的流式栅格布局。

    • .make-column(@ratio, @gutter, @total, @offset)

      @ratio
      单列的比例,如 1/3
      @gutter
      间隔宽度值,不能填写百分比。
      @total
      总宽度值,不可使用百分比。
      @offset
      偏移量。可选,默认为 0

      前往 estFiddle 查看

      main {
          .make-column(2/3, 15px, 960px);
      }
      
      aside {
          .make-column(1/3, 15px, 960px);
      }
      main {
          display: block;
          float: left;
          width: 635px;
          margin-left: 15px;
      }
      
      main:first-child {
          margin-left: 0px;
      }
      
      aside {
          display: block;
          float: left;
          width: 310px;
          margin-left: 15px;
      }
      
      aside:first-child {
          margin-left: 0px;
      }
      

      适用于按非百分比的栅格布局。

    栅格左右两侧是否有间隔取决于 @column-justify-content

layout

提供常见的基础布局。

依赖于:
  • .est-layout-fixed-header()

    定高、相对视口固定页头布局。

    • .est-layout-fixed-header(@height, @header-selector, @body-selector)

      @height
      页头高度。
      @header-selector
      页头要应用的选择器。可选,默认值为 .est-header
      @body-selector
      页面主体要应用的选择器。可选,默认值为 .est-body
      <body>
      <div class="header"></div>
      <div class="est-body"></div>
      </body>

      前往 estFiddle 查看

      body {
          .est-layout-fixed-header(80px, ~".header");
      }
      body > .header {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          z-index: 1000;
          height: 80px;
      }
      
      body > .est-body {
          margin-top: 80px;
          *zoom: 1;
      }
      
      body > .est-body:before,
      body > .est-body:after {
          display: table;
          content: "";
      }
      
      body > .est-body:after {
          clear: both;
      }
      

      如果不自定义选择器,则需要与 est-headerest-body 两个类名配合使用。页头的默认 z-index@header-z-index

  • .est-layout-fixed-footer()

    定高、相对视口固定页脚布局。

    • .est-layout-fixed-footer(@height, @body-selector, @footer-selector)

      @height
      页脚高度。
      @body-selector
      页面主体要应用的选择器。可选,默认值为 .est-body
      @footer-selector
      页脚要应用的选择器。可选,默认值为 .est-footer
      <body>
      <div class="body"></div>
      <div class="est-footer"></div>
      </body>

      前往 estFiddle 查看

      body {
          .est-layout-fixed-footer(80px, ~".body");
      }
      body > .body {
          margin-bottom: 80px;
          *zoom: 1;
      }
      
      body > .body:before,
      body > .body:after {
          display: table;
          content: "";
      }
      
      body > .body:after {
          clear: both;
      }
      
      body > .est-footer {
          position: fixed;
          bottom: 0;
          left: 0;
          width: 100%;
          z-index: 1000;
          height: 80px;
      }
      

      如果不自定义选择器,则需要与 est-footerest-body 两个类名配合使用。页脚的默认 z-index@footer-z-index

  • .est-layout-sticky-footer()

    当内容高度小于容器时也有显示在底部的固定高度页脚,内容高于容器后页脚会被挤压到视口外。

    • .est-layout-sticky-footer(@height, @body-selector, @footer-selector, @footer-placeholder-selector)

      @height
      页脚高度。
      @body-selector
      页面主体要应用的选择器。可选,默认值为 .est-body
      @footer-selector
      页脚要应用的选择器。可选,默认值为 .est-footer
      @footer-placeholder-selector
      页脚占位元素要应用的选择器(如不需要支持 IE7- 则无需考虑)。可选,默认值为 .est-footer-placeholder
      <body>
      <div class="body">
          <div>Content</div>
      
          <!-- need when @support-ie-version < 8 -->
          <div class="est-footer-placeholder"></div>
      </div>
      <div class="est-footer"></div>
      </body>

      前往 estFiddle 查看

      html,
      body {
      height: 100%;
      }
      
      body {
          .est-layout-sticky-footer(100px, ~".body");
      }
      html,
      body {
          height: 100%;
      }
      
      body > .body {
          min-height: 100%;
          margin-bottom: -100px;
          *zoom: 1;
      }
      
      body > .body:before,
      body > .body:after {
          display: table;
          content: "";
      }
      
      body > .body:after {
          clear: both;
      }
      
      body > .body .est-footer-placeholder {
          display: block;
          height: 100px;
      }
      
      body > .est-footer {
          height: 100px;
      }
      

      如果不自定义选择器,则需要与 est-footerest-body 两个类名配合使用,且须要保证外层所有 DOM 元素的高度为 100%。不支持与其他布局混用。

  • .est-layout-page()

    定宽居中页面布局。

  • .est-layout-sidebar()

    支持左右两侧各最多一个定宽(单位可以是 px / em / %)侧边栏,主内容区域填充剩余宽度。

    • .est-layout-sidebar(@position, @width, @main-selector, @sidebar-selector)

      单侧边栏布局。

      @position
      边栏位置,可用值为 left / right
      @width
      边栏宽度。
      @main-selector
      主区域应用的选择器。可选,默认值为 .est-main
      @sidebar-selector
      侧边栏应用的选择器。可选,默认值为 .est-sidebar
      <body>
      <div class="main"></div>
      <div class="est-sidebar"></div>
      </body>

      前往 estFiddle 查看

      body {
          .est-layout-sidebar(left, 200px, ~".main");
      }
      body {
          position: relative;
      }
      
      body > .main {
          overflow: hidden;
          margin-left: 200px;
      }
      
      body > .est-sidebar {
          position: absolute;
          top: 0;
          left: 0;
          width: 200px;
      }
      

      如果不自定义选择器,则需要与 est-mainest-sidebar 两个类名配合使用。

    • .est-layout-sidebar(@primary-width, @secondary-width, @main-selector, @sidebar-primary-selector, @sidebar-secondary-selector)

      单侧边栏布局。

      @primary-width
      主侧边栏(左侧)宽度。
      @secondary-width
      次侧边栏(右侧)宽度。
      @main-selector
      主区域应用的选择器。可选,默认值为 .est-main
      @sidebar-primary-selector
      主侧边栏应用的选择器。可选,默认值为 .est-primary
      @sidebar-secondary-selector
      次侧边栏应用的选择器。可选,默认值为 .est-secondary
      <body>
      <div class="main"></div>
      <div class="est-sidebar-primary"></div>
      <div class="est-sidebar-secondary"></div>
      </body>

      前往 estFiddle 查看

      body {
          .est-layout-sidebar(200px, 160px, ~".main");
      }
      body {
          position: relative;
      }
      
      body > .main {
          overflow: hidden;
          margin-right: 160px;
          margin-left: 200px;
      }
      
      body > .est-sidebar-primary {
          position: absolute;
          top: 0;
          left: 0;
          width: 200px;
      }
      
      body > .est-sidebar-secondary {
          position: absolute;
          top: 0;
          right: 0;
          width: 160px;
      }
      

      如果不自定义选择器,则需要与 est-mainest-sidebar-primaryest-sidebar-secondary 三个类名配合使用。

  • .est-layout-popup()

    弹出层布局。

    • est-layout-popup(@position, @overlay-opacity, @popup-selector, @valign-ghost-selector)

      @position
      弹出层的位置。可取值为 top / right / bottom / left / center,分别对应在视口顶部居中 / 右侧居中 / 底部居中 / 左侧居中 / 绝对居中。
      @overlay-opacity
      遮罩层的不透明度。可取 0100。如果为 0 则遮罩不显示,可以与弹出层周围的页面内容进行交互,否则则无法交互。可选,默认值:0
      @popup-selector
      弹出层应用的选择器。可选,默认值为 .est-popup
      @valign-ghost-selector
      用于垂直居中的站伪元素应用的选择器(如不需要支持 IE7- 则无需考虑)。可选,默认值为 .est-valign-ghost
      <body>
      <div>Content</div>
      <div class="overlay">
      
          <!-- need when @support-ie-version < 8 -->
          <div class="est-valign-ghost"></div>
      
          <div class="popup">Popup Content</div>
      </div>
      </body>

      前往 estFiddle 查看

      .overlay {
          .est-layout-popup(center, 80, ~"popup");
      }
      .overlay {
          position: fixed;
          z-index: 1050;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          letter-spacing: -0.5em;
          text-align: center;
          background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) repeat\0;
          filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc000000,endColorstr=#cc000000)\0;
          zoom: 1\0;
          background: rgba(0, 0, 0, 0.8);
      }
      
      .overlay .est-valign-ghost {
          display: inline-block;
          height: 100%;
          vertical-align: middle;
      }
      
      .overlay > popup {
          display: inline-block;
          vertical-align: middle;
      }
      
      :root .overlay {
          filter: none\9;
      }
      

      必须与类名 est-popup 配合使用。弹出层的默认 z-index@modal-z-index

  • .est-layout-horizontal-list()

    用于把列表变成水平,在做菜单样式或是卡片样式时有用。

    • est-layout-horizontal-list(@gap, @direction)

      @gap
      平方向上列表项之间的间隔长度(任意单位)。
      @direction
      水平浮动的方向。可用值为 right / left。可选,默认值:left
      <div class="users">
      <ul>
          <li>Tony Stark</li>
          <li>Steve Rogers</li>
          <li>Hulk</li>
          <li>Thor</li>
          <li>Loki</li>
      </ul>
      </div>

      前往 estFiddle 查看

      .users {
          .est-layout-horizontal-list(10px, left);
      }
      .users {
          *zoom: 1;
          overflow: hidden;
      }
      
      .users:before,
      .users:after {
          display: table;
          content: "";
      }
      
      .users:after {
          clear: both;
      }
      
      .users ul,
      .users ol {
          list-style: none;
          float: left;
          margin-left: -10px;
      }
      
      .users ul li,
      .users ol li {
          float: left;
          margin-left: 10px;
      }
      
  • .est-layout-fluid-fixed-ratio()

    在自适应宽度情况下,确保视频、Flash、图片、iframe 等内容的元素高宽比固定。

    • est-layout-fluid-fixed-ratio(@width, @height, @extra-height, @target-selector)

      @width
      内容宽度。
      @height
      内容高度。
      @extra-height
      除宽度比外,额外的固定高度,这部分高度不会随宽度的变化而变化。可选,默认值:0
      @target-selector
      目标元素需要应用的选择器。可选,默认值:.est-fixed-ratio
      <div class="fluid-wrap">
      <img src="http://placehold.it/800x600" alt="" />
      </div>

      前往 estFiddle 查看

      .fluid-wrap {
          .est-layout-fluid-fixed-ratio(800, 600);
      }
      .fluid-wrap {
          position: relative;
          padding-bottom: 75%;
          padding-top: 0;
          height: 0;
      }
      
      .fluid-wrap object,
      .fluid-wrap embed,
      .fluid-wrap iframe,
      .fluid-wrap img,
      .fluid-wrap .est-fixed-ratio {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
      }
      

      会生效的元素类型包括 <object> / <embed> / <iframe> / <img> 以及符合选择器 @target-selector 的元素。@width@height 参数的单位需要统一。Demo 见此。可参考 Rundown of Handling Flexible Media

effects

提供预设视觉效果。

依赖于:
  • .embossed-text()

    文字浮凸效果。

    • .embossed-text(@bg-color, @fg-color)

      @bg-color
      文字所在区域的背景色。
      @fg-color
      文字前景色。可选,不填写则根据 @bg-color 生成(即“blind emboss”)。

      前往 estFiddle 查看

      .blind-embossed {
          .embossed-text(lightblue);
      }
      
      .embossed {
          .embossed-text(lightblue, #6699CC);
      }
      .blind-embossed {
          color: #b9deea;
          text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5), 0 -1px 0 rgba(255, 255, 255, 0.5);
      }
      
      .embossed {
          color: #6699cc;
          text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5), 0 -1px 0 rgba(255, 255, 255, 0.5);
      }
      
  • .debossed-text()

    文字凹陷效果。

    • .debossed-text(@bg-color, @fg-color)

      @bg-color
      文字所在区域的背景色。
      @fg-color
      文字前景色。可选,不填写则根据 @bg-color 生成(即“blind deboss”)。

      前往 estFiddle 查看

      .blind-debossed {
          .debossed-text(lightblue);
      }
      
      .debossed {
          .debossed-text(lightblue, #6699CC);
      }
      .blind-debossed {
          color: rgba(161, 210, 226, 0.8);
          text-shadow: 0 1px 1px lightblue, 0 0 0 #000000, 0 1px 0 rgba(255, 255, 255, 0.8);
      }
      
      .debossed {
          color: rgba(91, 145, 200, 0.8);
          text-shadow: 0 1px 1px lightblue, 0 0 0 #000000, 0 1px 0 rgba(255, 255, 255, 0.8);
      }
      
  • .3d-text()

    3D文字效果。

    • .3d-text(@color)

      @color
      文字颜色。

      前往 estFiddle 查看

      .three-d {
          .3d-text(lightblue);
      }
      .three-d {
          color: lightblue;
          text-shadow: 0 1px 0 #86b1bf,
                       0 2px 0 #7da8b6,
                       0 3px 0 #749fad,
                       0 4px 0 #6b96a4,
                       0 5px 0 #527d8b,
                       0 6px 1px rgba(0, 0, 0, 0.1),
                       0 0 5px rgba(0, 0, 0, 0.1),
                       1px 1px 3px rgba(0, 0, 0, 0.3),
                       3px 3px 5px rgba(0, 0, 0, 0.2),
                       5px 5px 10px rgba(0, 0, 0, 0.25),
                       0 10px 10px rgba(0, 0, 0, 0.2),
                       0 20px 20px rgba(0, 0, 0, 0.15);
      }
      
  • .glow-text()

    文字发光效果。

  • .blurry-text()

    文字模糊效果。

    • .blurry-text(@color, @radius)

      @color
      文字颜色。
      @radius
      模糊半径。可选,默认值:0.15em

      前往 estFiddle 查看

      .blurry {
          .blurry-text(#FFFFFF);
      }
      .blurry {
          color: transparent;
          text-shadow: 0 0 0.15em #ffffff;
          text-shadow: 0 0 0.15em 0.1px #ffffff;
      }
      

shapes

提供绘制基本形状的功能。

依赖于:
  • .triangle()

    绘制等腰直角三角形。

    • .triangle(@direction, @size, @color, @origin)

      @direction
      三角形的直角指向的方向。可用值有垂直方向上的 top / bottom 与水平方向上的 right / left,或用两个方向上的组合表达斜 45° 角方向,如 top left
      @size
      直角边长度。
      @color
      三角形背景色。
      @origin
      直角顶点所处的位置,详见图。可取值为 corner / side。可选,默认值 corner
      directionorigin 的不同组合效果见下图:
      direction + origin

      前往 estFiddle 查看

      .comment:after {
          .triangle(top left, #ccc, 10px, corner);
      }
      .comment:after {
          position: absolute;
          width: 0;
          height: 0;
          border: #666666 solid 10px;
          border-bottom-color: transparent;
          border-right-color: transparent;
      }
      

    Demo 见此

  • .circle()

    绘制圆形。

    • .circle(@size)

      @size
      所绘圆形的直径。支持绝对长度或百分比。

      前往 estFiddle 查看

      .ball {
          .circle(30%);
      }
      .ball {
          width: 30%;
          padding-top: 30%;
          -webkit-border-radius: 50%;
             -moz-border-radius: 50%;
                  border-radius: 50%;
      }
      
    • .circle(@size, @bg)

      @size
      所绘圆形的直径。支持绝对长度或百分比。
      @bg
      圆形背景,可以为颜色或其他合法的 background 属性值。

      前往 estFiddle 查看

      .ball {
          .circle(30%, url(img/texture.png) lightgreen no-repeat center center);
      }
      .ball {
          width: 30%;
          padding-top: 30%;
          -webkit-border-radius: 50%;
             -moz-border-radius: 50%;
                  border-radius: 50%;
          background: url(img/texture.png) lightgreen no-repeat center center;
      }
      

clockhand

提供顺时针简写的功能。

  • .absolute()

    将元素设置为绝对定位且快速指定元素的位置。

    • .absolute(@offset...)

      @offset
      元素在 top / right / bottom / left 方向上的偏移量。写法参考 CSS margin 属性的值。可以使用 _ 作为占位符,表明此方向上的值无需覆盖。

      前往 estFiddle 查看

      .box-1 {
          .absolute(0, _, _, 0); // position: absolute; top: 0; left: 0;
      }
      
      .box-2 {
          .absolute(0, 10px, 5px); // position: absolute; top: 0; right: 10px; bottom: 5px; left: 10px;
      }
      .box-1 {
          position: absolute;
          top: 0;
          left: 0;
      }
      
      .box-2 {
          position: absolute;
          top: 0;
          right: 10px;
          bottom: 5px;
          left: 10px;
      }
      
  • .relative()

    将元素设置为相对定位且快速指定元素的偏移量。

    • .relative(@offset...)

      @offset
      元素在 top / right / bottom / left 方向上的偏移量。

      偏移量说明请参考 .absolute()

      前往 estFiddle 查看

      .box {
          .relative(0, _, _, 0); // position: relative; top: 0; left: 0;
      }
      .box {
          position: relative;
          top: 0;
          left: 0;
      }
      
  • .fixed()

    将元素设置为固定定位且快速指定元素的偏移量。

    • .fixed(@offset...)

      @offset
      元素在 top / right / bottom / left 方向上的偏移量。

      偏移量说明请参考 .absolute()

      前往 estFiddle 查看

      .box {
          .fixed(0, _, _, 0); // position: fixed; top: 0; left: 0;
      }
      .box {
          position: fixed;
          top: 0;
          left: 0;
      }
      
  • .margin()

    快速指定元素的外边距。

    • .margin(@margin...)

      @margin
      元素在 top / right / bottom / left 方向上的外边距。写法参考 CSS margin 属性的值。可以使用 _ 作为占位符,表明此方向上的值无需覆盖。

      前往 estFiddle 查看

      .box {
          .margin(10px, 5px, _, 0); // margin-top: 10px; margin-right: 5px; margin-left: 0;
      }
      .box {
          margin-top: 10px;
          margin-right: 5px;
          margin-left: 0;
      }
      
  • .padding()

    快速指定元素的内边距。

    • .padding(@padding...)

      @padding
      元素在 top / right / bottom / left 方向上的内边距。

      边距参数说明请参考 .margin()

      前往 estFiddle 查看

      .box {
          .padding(10px, _); // padding-top: 10px; padding-bottom: 10px;
      }
      .box {
          padding-top: 10px;
          padding-bottom: 10px;
      }
      
  • .border-color()

    快速指定元素在四个方向上的边框颜色。

    • .border-color(@color...)

      @color
      元素在 top / right / bottom / left 方向上的边框颜色。

      参数说明请参考 .margin()

      前往 estFiddle 查看

      .box {
          .border-color(red, _, _, blue); // border-top-color: #ff0000; border-left-color: #0000ff;
      }
      .box {
          border-top-color: red;
          border-left-color: blue;
      }
      
  • .border-style()

    快速指定元素在四个方向上的边框风格。

  • .border-width()

    快速指定元素在四个方向上的边框宽度。