如何将多个类组合成一个语义命名的类？

Question

我一直在阅读Block-Element-Modifier命名约定，语义命名的样式规则等等。我想用一个单一的语义类名替换我的html中的多个类名。但是，似乎无法实现。例如：

我想替换我的Bootstrap导航栏

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

带

<nav class="header__navbar" role="navigation">

我知道我可以使用jQuery在程序上执行此操作，但我不想这样做。我尝试了几种使用变量名称，＃{}插值语法，mixins和@extend等的方法，但只是得到语法错误或无效结果。

这不是Sass的目的吗？

Answer 1

  

这不是Sass的目的吗？

Sass支持此用例。

您需要的是extending。

1. 定义navbar，navbar-default和navbar-fixed-top类，就像使用非语义方法一样：

    .navbar { display: table; }
    .navbar-default { background-color: deeppink; }
    .navbar-fixed-top { position: fixed; top: 0; left: 0; width: 100%; }
   

2. 在下面，使用以下内容扩展您的header__navbar课程：

   .header__navbar {
     @extend .navbar;
     @extend .navbar-default;
     @extend .navbar-fixed-top;
   }
   

3. 完全删除HTML标记中的非语义类后，您的CSS中就不再需要它们了。所以把它们变成占位符选择器，也就是静音选择器。为此，请在定义它们的规则和使用它们的.指令中将%替换为@extend。 E. g。：

    %navbar { display: table; }
    %navbar-default { background-color: deeppink; }
    %navbar-fixed-top { position: fixed; top: 0; left: 0; width: 100%; }
   
   .header__navbar {
     @extend %navbar;
     @extend %navbar-default;
     @extend %navbar-fixed-top;
   }
   

Answer 2

另一种方法是您可以在一行中扩展多个类，例如：

正常方式

.header__navbar {
  @extend .navbar;
  @extend .navbar-default;
  @extend .navbar-fixed-top;
}

在一行中扩展多个类

.header__navbar {
  @extend #{'.navbar','.navbar-default','.navbar-fixed-top'};
}

此扩展示例与第一个示例相同。

谢谢