使用LESS分解CSS规则（例如font-size：20px;）

Question

如何定义CSS样式（例如font-size: 20px），并在多个地方重复使用LESS？

根据LESS文档，我可以使用键（例如字体大小），标识符（例如.myClass）和值（例如20px）的变量。但是，我没有看到像这样做一般规则的能力。在SCSS

实施例：

定义一个混合

@mixin large-text { 
    font-size: 20px; 
} 

使用它别处

.MyAwesomeTitle { 
    color: red; 
    @include large-text; 
} 

结果：

.MyAwesomeTitle { 
    color: red; 
    font-size: 20px; 
} 

Answer 1

1. 定义mixin。虽然领先的.使它看起来像一个类选择器，但它只是如何命名mixins在LESS中工作。

   .large-text() { 
       font-size: 20px; 
   } 
   

2. 您只需编写mixin的名称即可包含mixin。在这种情况下，它是.large-text。

   .MyAwesomeTitle { 
       color: red; 
       .large-text 
   } 
   

该文档给下一个例子"parametric mixins"

输入：

.wrap() { 
    text-wrap: wrap; 
    white-space: -moz-pre-wrap; 
    white-space: pre-wrap; 
    word-wrap: break-word; 
} 

pre { .wrap } 

输出：

pre { 
    text-wrap: wrap; 
    white-space: -moz-pre-wrap; 
    white-space: pre-wrap; 
    word-wrap: break-word; 
}