Question

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

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

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

如何？

我可以使用类似的东西：

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

.myBeautifulDiv {
  use text-truncate;
}

这太好了！有可能吗？

Answer 1

完全可能。转到此处（https://getbootstrap.com/docs/4.1/getting-started/download/），点击＆＃34;下载源代码＆＃34;，以及您正在寻找的内容可能位于_scss文件夹中。

Answer 2

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

占位符classe名称以%开头。它们本身不会包含在输出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代码中使用一些类名，而不是在html文件中编写

2 个答案: