Bootstrap, scss, 在 scss 代码中使用一些 class 名称而不是写在 html 文件中

Question

In Bootstrap 4 我可以在元素中使用 text-truncate 作为 class。例如：

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

我现在需要的是把这个classtext-truncate用在很多对象的scss文件里，而不是直接写在.html文件里。

怎么办？

我可以使用类似的东西吗：

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

.myBeautifulDiv {
  use text-truncate;
}

这太棒了！可能吗？

Answer 1

完全有可能。到这里(https://getbootstrap.com/docs/4.1/getting-started/download/)，点击"Download Source"，你要找的可能在_scss文件夹里。

Answer 2

U 可以在 scss,

中创建占位符类

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

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

请记住先加载您的 bootstrap 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;
}

Bootstrap, scss, 在 scss 代码中使用一些 class 名称而不是写在 html 文件中

Bootstrap, scss, use some class name in scss code instead of writing it in html files

css

sass

twitter-bootstrap

bootstrap-4

scss-mixins