css - Bootstrap，scss，在scss代码中使用一些类名，而不是写在html文件中

Question

在 Bootstrap 4 中，我可以将text-truncate其用作元素中的类。例如：

<span class="text-truncate">Any very long text</span>

我现在需要的是text-truncate在一个 scss 文件中为许多对象使用这个类，而不是直接在 .html 文件中编写它。

如何？

我可以使用类似的东西：

@import "text-truncate" from "bootstrap.scss";

.myBeautifulDiv {
  use text-truncate;
}

这会很棒！可能吗？

Answer 1

完全有可能。去这里（https://getbootstrap.com/docs/4.1/getting-started/download/），点击“下载源代码”，你要找的可能在_scss文件夹中。

Answer 2

你可以在 scss 中创建占位符类，

占位符类名称以%. 它们本身不会包含在输出的 css 文件中。

但它们可以导入其他类。检查下面的示例。

请记住首先加载您的引导 css。

 /*In bootstrap file*/
    .text-truncate{
      text-overflow:ellipsis;
      ...
      ...
    }

---

 /*In your scss file*/

%truncatedtext {  /*This is placeholder class*/
 @extend .text-truncate;  /*This will include/pull the actual bootstrap code*/
}

.class-a {
  @extend %truncatedtext;
  color: #000000;
}

.class-b {
  @extend %truncatedtext;
  color: red;
}

---

它的输出将是

.text-truncate, .class-a, .class-b {
  /*trucate css code*/
}

.class-a {
  color: #000000;
}

.class-b {
  color: red;
}