less混合

Posted 2023-04-17

参考技术A

混合就是一种或者一系列属性从一种规则集引入（混合）到另一种规则集的方法

1. 普通混合
一个普通的css样式

我们发现 h1,h2的样式中有很多重复的，而解决方式如下，将重复的放在一个类中：

定义一个.font_h类，在html文件对应的元素山添加class="font_h"属性
less可以不这么写，less写法如下：

将定义好的类混入css样式中，这样就不用在HTML的元素中写类了
编译后的css，和下面不带输出的混合做对比

2. 不带输出的混合

编译后的css文件，从中发现.font_h不见了

3. 带选择器的混合

编译之后的css文件

其中， .my-hover-mixin():hover == &:hover

4. 带参数的混合

编译后的css文件

5. 带参数并且有默认值

编译后的css文件

调用后如果 .border_have(); 不带参数，就用默认的参数；如果传递了参数，就用传入的参数。而上边带参数但没有默认值时，如果调用时不传入参数就会报错。

6. 带多个参数的混合

编译后的css文件

less文件（定义具有多个相同名称和参数数量的混合）

编译后的css文件

less文件

编译后的css文件

如果使用mixin的时候只带一个参数，比如.mixin(red)，这个属性会导致所有的mixin都会强制使用这个明确的参数

7. 命名参数

编译后的css文件

8. @arguments变量

编译后的css文件

less文件

编译后的css文件

这里的solid是默认值，但也必须写上，否则会报错。

9. 匹配模式

编译后的css文件

注意：中间用逗号分割开

10. 得到混合中变量的返回值

编译后的css文件

LESS 混合变量类名

【中文标题】LESS 混合变量类名

【英文标题】：LESS mixin a variable class name

【发布时间】：2013-11-05 08:05:49

【问题描述】：

我正在使用 Font Awesome 4.0.0，并且想在 LESS 中做这样的事情：

.btn-github 
  .btn;
  .btn-primary;
  margin-left: 3em;

  i 
    .@fa-css-prefix;
    .@fa-css-prefix-github;
    .@fa-css-prefix-lg;
    margin-right: 1em;
  

编译时出错：

ParseError: Unrecognised input in - on line ...

有可能做到这一点吗？这对我来说肯定会是一个漂亮的按钮。

【参考方案1】：

您尝试执行的操作至少存在 2 个问题（对于 LESS >=1.6，请参阅下面的更新）：

1) 不幸的是，无法使用选择器调用 mixin 插值。

使用选择器插值，LESS 期望构造为 以下格式：

.@selector-string  property:value; 

（插值选择器也可以有一些静态字符串 pre 或 发布插值）

所以

.@selector-string;

被LESS 编译器识别。在这里查看更多： How can I call a mixin by reference in LESS?

2) 带有插值选择器的规则集被直接打印到 CSS 输出中，并且不作为可以在 LESS 运行中重用的 mixin 存在

例如：

@foo: test;

.@foo 
  length: 20px;


.bar 
  .test;

将返回：

    Name error: .test is undefined
    .bar   .test;

在此处查看更多信息：LESS CSS: Reuse generated .@name class as a mixin

您的问题的可能解决方案是将字体真棒规则重新定义为某种可重用的混合（不使用插值）。像这样的：

@fa-var-github: "\f09b";

.fa-mixin() 
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

.fa-mixin-lg() 
  font-size: (4em / 3);
  line-height: (3em / 4);
  vertical-align: -15%;

.fa-mixin-icon(@icon)
  @var: "fa-var-@icon";
  &:before  content: @@var; 

i 
  .fa-mixin;
  .fa-mixin-lg;
  .fa-mixin-icon(github);

如果您真的不需要变量并且只想包含规则，最好的方法就是导入已编译的 CSS 版本的 FontAwesome（请参阅答案 here）：

@import (less) 'font-awesome.css';

然后你就可以使用 CSS 规则，比如 LESS 混合，或者在你认为合适的时候扩展它们的选择器，它应该可以完美地工作。

---

更新：

从 LESS >= 1.6 开始，带有插值选择器的规则可以作为 mixins 访问...所以上面的 #2 限制形式不再适用（但您仍然不能使用动态调用 mixin插值）。因此，您可以简单地从导入的 font-awesome.less 文件中调用 LESS 混合和变量，如下所示：

i 
  .fa;
  .fa-lg;
  &:before
    content: @fa-var-github;
  

【讨论】：

+1 太棒了...非常好的解释，值得投票。干杯！

谢谢！唯一不这样做的原因是我在很多地方都有相同的按钮，并且想要集中样式。再次感谢！

需要 mixin 的一个原因（也是我们需要它的原因）是，有时您正在处理在您的控制之外生成的 html；例如通过 JS 插件。在这些情况下，您需要能够通过纯 CSS 应用它们。