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

Question

In Bootstrap 4 I can use text-truncate as a class in an element. Eg:

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

What I need now is to use this class text-truncate in a scss file for many objects instead of writing it directly in .html files.

How to?

Can I use something like:

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

.myBeautifulDiv {
  use text-truncate;
}

This would be great! Is it possible?

Use @extend... https://www.codeply.com/go/llhRs09GWa – Carol Skelly May 11 '18 at 20:35 — Carol Skelly, May 11 '18 at 20:35

score 0 · Answer 1 · answered May 11 '18 at 20:08

0

Totally possible. Go here (https://getbootstrap.com/docs/4.1/getting-started/download/), click "Download Source", and what you're looking for is probably in the _scss folder.

answered May 11 '18 at 20:08

tmurphree

79
2
11

Or preferably use a package manager like NPM – Klooven May 12 '18 at 09:03

Gautam Naik · Accepted Answer · 2018-05-11T20:23:16.767

U can create placeholder classes in scss,

Placeholder classe names start with %.They, themselves, will not be included in the the output css files.

But they can be imported into other classes. Check example below.

Just remember to load your bootstrap css first.

 /*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;
}

Its output will be

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

.class-a {
  color: #000000;
}

.class-b {
  color: red;
}

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

2 Answers2