Less 中文文檔

概覽

做爲CSS的擴展，Less不只向後兼容CSS，並且它使用現有的CSS語法添加額外特性。這使得學習變得容易，若是有疑惑，您能夠回到普通的CSS

變量

控制在多個地方使用同一個值

基本使用

// 變量
@link-color:        #428bca; // 海藍
@link-color-hover:  darken(@link-color, 10%);

// Usage
a,
.link {
    color: @link-color;
}
a:hover {
    color: @link-color-hover;
}
.widget {
    color: #fff;
    background: @link-color;
}

=>

a,
.link {
    color: #428bca;
}
a:hover {
    color: #3071a9;
}
.widget {
    color: #fff;
    background: #428bca;
}

注意，變量其實是「常量」，由於它們只能定義一次

插值

// Variables
@my-selector: banner;

@images: "../img";

@themes: "../../src/themes";

@fnord:  "I am fnord.";
@var:    "fnord";

@import "@{themes}/tidal-wave.less";

.@{my-selector} {
    font-weight: bold;
    line-height: 40px;
    margin: 0 auto;
}
body {
    color: #444;
    background: url("@{images}/white-sand.png");
}

img::after {
    content: @@var;  
}

=>

@import "../../src/themes/tidal-wave.less";

.banner {
    font-weight: bold;
    line-height: 40px;
    margin: 0 auto;
}
body {
    color: #444;
    background: url("../img/white-sand.png");
}
img::after {
    content: "I am fnord.";  
}

擴展

extend屬於 less 的僞類, 它擴展匹配傳入的選擇器的樣式, 區別於混合 mixin

nav ul {
    &:extend(.inline);
    background: blue;
}
.inline {
    color: red;
}

=>

nav ul {
    background: blue;
}

.inline,
nav ul {
    color: red;
}

擴展語法

.a:extend(.b) {}

// 等同於 

.a {
    &:extend(.b);
}

.c:extend(.d all) {
  // 擴展包括 .d 的全部實例, eg. .d x 和 x .d
}
.c:extend(.d) {
  // 僅擴展 .d
}

// 擴展多個
.e:extend(.f) {}
.e:extend(.g) {}

// 等同於

.e:extend(.f, .g) {}

Extend沒法將選擇器與變量匹配。若是selector包含變量，則extend將忽略它

@variable: .bucket;
@{variable} { 
    color: blue;
}
.some-class:extend(.bucket) {} // 匹配失敗

沒有重複檢測

.alert-info,
.widget {

}

.alert:extend(.alert-info, .widget) {

}

=>

.alert-info,
.widget,
.alert,
.alert {

}

經典用例

避免添加基類

// 一個動物樣式
.animal {
  background-color: black;
  color: white;
}

但願擁有一個覆蓋背景顏色的動物子類型

一種方法更改HTML

<a class="animal bear">Bear</a>

.animal {
  background-color: black;
  color: white;
}
.bear {
  background-color: brown;
}

一種方法經過擴展簡化html
<a class="bear">Bear</a>

.animal {
    background-color: black;
    color: white;
}
.bear {
    &:extend(.animal);
    background-color: brown;
}

=>

.animal,
.bear {
    background-color: black;
    color: white;
}
.bear {
    background-color: brown;
}

減小CSS大小

Mixins將全部屬性複製到選擇器中，這可能致使沒必要要的重複。
所以，可使用extends將選擇器移動到但願使用的屬性，從而減小生成的css

// mixin 示例
.my-inline-block() {
    display: inline-block;
    font-size: 0;
}
.thing1 {
    .my-inline-block;
}
.thing2 {
    .my-inline-block;
}

=>

.thing1 {
  display: inline-block;
  font-size: 0;
}
.thing2 {
  display: inline-block;
  font-size: 0;
}

// extend 示例
.my-inline-block {
    display: inline-block;
    font-size: 0;
}
.thing1 {
    &:extend(.my-inline-block);
}
.thing2 {
    &:extend(.my-inline-block);
}

=>

.my-inline-block,
.thing1,
.thing2 {
    display: inline-block;
    font-size: 0;
}

混合 Mixin

.a, #b {
    color: red;
}
.mixin-class {
    .a();
}
.mixin-id {
    #b(); // 括號無關緊要
}

=>

.a, #b {
    color: red;
}
.mixin-class {
    color: red;
}
.mixin-id {
    color: red;
}

不輸出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;
}

Mixins中的選擇器

.my-hover-mixin() {
    &:hover {
        border: 1px solid red;
    }
}
button {
    .my-hover-mixin();
}

=>

button:hover {
    border: 1px solid red;
}

命名空間

#outer {
    .inner {
        color: red;
    }
}

.c {
    #outer > .inner;
    // #outer .inner;
    // #outer > .inner();
    // #outer.inner;
    // #outer.inner();
    // 等效
}

=>

#outer .inner {
    color: red;
}

.c {
    color: red;
}

受保護的命名空間

// 僅在保護條件返回true時才使用由其定義的mixins
#namespace when (@mode=huge) {
    .mixin() { /* */ }
}
// ==
#namespace {
    .mixin() when (@mode=huge) { /* */ }
}

!important關鍵字

!important在mixin調用以後使用關鍵字將其繼承的全部屬性標記爲!important

.foo (@bg: #f5f5f5, @color: #900) {
    background: @bg;
    color: @color;
}
.unimportant {
    .foo();
}
.important {
    .foo() !important;
}

=>

.unimportant {
    background: #f5f5f5;
    color: #900;
}
.important {
    background: #f5f5f5 !important;
    color: #900 !important;
}

Mixin參數

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

#header {
    .border-radius(4px);
}
.button {
    .border-radius(6px);
}

=>

#header {
     border-radius: 4px;
}
.button {
     border-radius: 6px;
}

多個參數

// 單個參數
.mixin(@color) {
    color-1: @color;
}
// 分號分隔參數, 也能夠是逗號, @padding 默認值爲2
.mixin(@color; @padding: 2) {
    color-2: @color;
    padding-2: @padding;
}
.mixin(@color; @padding; @margin: 2) {
    color-3: @color;
    padding-3: @padding;
    margin: @margin @margin @margin @margin;
}
.some .selector div {
    .mixin(#008000);
}

=>

.some .selector div {
    color-1: #008000;
    color-2: #008000;
    padding-2: 2;
}

命名參數

.mixin(@color: black; @margin: 10px; @padding: 20px) {
    color: @color;
    margin: @margin;
    padding: @padding;
}
.class1 {
    // 能夠指定傳入的參數, 沒有則按形參順序,  命名參數無關順序
    .mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
    .mixin(#efca44; @padding: 40px);
}

=>

.class1 {
    color: #33acfe;
    margin: 20px;
    padding: 20px;
}
.class2 {
    color: #efca44;
    margin: 10px;
    padding: 40px;
}

@arguments

.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
    box-shadow: @arguments; // 參數按順序以空格爲分隔符連接在一塊兒
}
.big-block {
    .box-shadow(2px; 5px);
}

=>

.big-block {
    box-shadow: 2px 5px 1px #000;
}

Mixins做爲函數

.mixin() {
    @width:  100%;
    @height: 200px;
}

.average(@x, @y) {
    @average: ((@x + @y) / 2);
}

div {
    .average(16px, 50px); 
    padding: @average;  
}

.caller {
    .mixin();
    width:  @width;
    height: @height;
}

=>

.caller {
    width:  100%;
    height: 200px;
}

div {
    padding: 33px;
}

父選擇器

a {
    color: blue;
    &:hover {
        color: green;
    }
}

.button {
    &-ok {
        background-image: url("ok.png");
    }
    &-cancel {
        background-image: url("cancel.png");
    }
    
    &-custom {
        background-image: url("custom.png");
    }
}

.link {
    & + & {
        color: red;
    }
    
    & & {
        color: green;
    }
    
    && {
        color: blue;
    }
    
    &, &ish {
        color: cyan;
    }
}

p, a, ul, li {
    border-top: 2px dotted #366;
    & + & {
        border-top: 0;
    }
}

=>

a {
    color: blue;
}

a:hover {
    color: green;
}

.button-ok {
    background-image: url("ok.png");
}
.button-cancel {
    background-image: url("cancel.png");
}
.button-custom {
    background-image: url("custom.png");
}

.link + .link {
    color: red;
}
.link .link {
    color: green;
}
.link.link {
    color: blue;
}
.link, .linkish {
    color: cyan;
}

p,
a,
ul,
li {
    border-top: 2px dotted #366;
}
p + p,
p + a,
p + ul,
p + li,
a + p,
a + a,
a + ul,
a + li,
ul + p,
ul + a,
ul + ul,
ul + li,
li + p,
li + a,
li + ul,
li + li {
    border-top: 0;
}

請注意，&表明全部父選擇器（不單單是最近的祖先)