Zlerp Zlerp - 1 month ago 6
Sass (Sass) Question

Is there anyway to style html elements through html classes with variables?

I'm just curious to know if it is possible to have specific stylings based on the name of of a class.

For example, Bootstrap 4 has a helper class for margins and padding like:

<div class="m-t-1 p-a-0"></div>


This gives the div 1em of margin to the top, and removes padding from all sides.

I am sure they have pre-styled this class in their CSS to achieve this.
But I am curious if there is a way to use the class as a variable.

for example:

<div class="fs-x"></div>


where
x
can be any number, this class would then give the styling the
font-size: x
to the div.

Is this possible to do?

Thanks.

Answer

You can use a CSS pre-processor such as SASS or LESS to achieve this however it generates static classes within a specified range below is an example from the SASS documentation:

$class-slug: for !default

@for $i from 1 through 4
  .#{$class-slug}-#{$i}
    width: 60px + $i

Which emits this CSS:

.for-1 {
  width: 61px;
}

.for-2 {
  width: 62px;
}

.for-3 {
  width: 63px;
}

.for-4 {
  width: 64px;
}
Comments