CODEWITHSUNDEEP
csssass
micobg
micobg

Reputation: 1342

Dynamicly generated css classes with SASS?

I have following mixin:

@mixin background-fixed($xPosition: "center", $yPosition: "33%")
background-position: unquote($xPosition) unquote($yPosition)
...

And it's usage:

.photo-background
  @include background-fixed("center", "60%")
  ...

Is there any way to define $yPosition in HTML by the classname, for example .photo-background-60 (or other way)? I want this value to be passed dynamically, not just to define 100 identical classes with all possible values.

Upvotes: 0

Views: 46

Answers (1)

Jacob G
Jacob G

Reputation: 14172

No, it isn't currently possible with Sass.

And it's likely that it never will.

Sass is a CSS pre-processor, so it is compiled to CSS before the browser can use it. The functionality required to fetch the attribute, parse it to find the number, then convert the string to an integer will probably never be implemented, because CSS is a styling language.

While CSS does provide selectors to select an class that partially matches, like:

[class*="photo-background-"]{}

Which would match any element with a class that started with photo-background-. However, you wouldn't be able to dynamically set the background position from the class name.

Just use Javascript instead.

Upvotes: 1

Related Questions