Add Prefixes to CSS Class Names Using Less or SASS

CSS : Auto prefixing css selectors declaration with an additional class name for all css selectors in a file

If you are using Sass. Then you could try its nesting.

.prefixclass{
    .someclass1{ }
    .someclass2{ }
}

this will render as follows in your css file.

.prefixclass .someclass1{}
.prefixclass. .someclass2{}

I hope this works for you. If you need to add a prefix using Sass then look into its nesting property.
Cheers!!

Is there a CSS selector by class prefix?

It's not doable with CSS2.1, but it is possible with CSS3 attribute substring-matching selectors (which are supported in IE7+):

div[class^="status-"], div[class*=" status-"]

Notice the space character in the second attribute selector. This picks up div elements whose class attribute meets either of these conditions:

• [class^="status-"] — starts with "status-"

• [class*=" status-"] — contains the substring "status-" occurring directly after a space character. Class names are separated by whitespace per the HTML spec, hence the significant space character. This checks any other classes after the first if multiple classes are specified, and adds a bonus of checking the first class in case the attribute value is space-padded (which can happen with some applications that output class attributes dynamically).

Naturally, this also works in jQuery, as demonstrated here.

The reason you need to combine two attribute selectors as described above is because an attribute selector such as [class*="status-"] will match the following element, which may be undesirable:

<div id='D' class='foo-class foo-status-bar bar-class'></div>

If you can ensure that such a scenario will never happen, then you are free to use such a selector for the sake of simplicity. However, the combination above is much more robust.

If you have control over the HTML source or the application generating the markup, it may be simpler to just make the status- prefix its own status class instead as Gumbo suggests.

How can I use a loop in LESS to create specific class names for typography?

An example from documentation for further modification;)
for more complicated code, it is better to use scss than less

.for(@list, @code) {
  & {
    .loop(@i: 1) when (@i =< length(@list)) {
      @value: extract(@list, @i);
      @code();
      .loop(@i + 1);
    }
    .loop();
  }
}

@elements: small, caption, body, subheader, title, headline;

.for(@elements, {
  @remfont: @i+1;
  @remline: ((@i+1) * 1.5 / 3);
  .@{value} {
    font-size: ~"@{remfont}rem";
    line-height: ~"@{remline}rem";
  }
});

Is there some tool to automatically convert css classes to custom prefixed ones?

this could be done using Regular Expressions.

Linux command line :

sed 's/class="\([^"]*\)"/class="my_\1"/g' old.html >new.html
sed 's/\.\([a-zA-Z0-9_\-]\+\)/.my_\1/g' old.css >new.css

or in any number of good text editors (Geany, Notepad++, ...) :

replace

class="([^"]*)" with class="my_\1"

and

\.([a-zA-Z0-9_\-]+) with .my_\1

Creating CSS Rules Using Class Prefixes

You can use :

[class^=col] {margin:0.2%;}

div {

  height: 50px;

  margin: 10px;

}

[class^=col] {

  background: red;

}

<div class="col-md-1"></div>

<div></div>

<div class="col-md-2"></div>

---

Related Topics