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

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确实支持这个用例.

你需要的是扩展.

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'};
}

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

谢谢