SCSS variable class name
This can't be done for arbitrary sizes. The nature of SCSS is that is needs to be flattened down to CSS before it gets applied to the HTML. What you are asking for, however, is essentially to create rules at run-time rather than compile-time.
In other words, SCSS makes it easier to write some of the repetitive parts of CSS, but it doesn't allow you to do anything new that wasn't already possible with plain old CSS.
What you're asking for is also a code smell. It smells like your markup isn't semantic enough. The purpose of a CSS class is to group objects with similar characteristics, but you're using them instead to describe the styles they impart. I would suggest stepping back and reconsidering what it is that you really want.
You obviously have details of certain elements that are context-dependent. For example, maybe you are applying these rules to buttons when you want to make them smaller or larger than usual. You need to identify the scenarios in which the buttons change. Maybe they are 20% smaller if they are in a modal dialog? Then write your normal .button
rules, and also create rules for .modal .button
which make it smaller.
If you're positive that you want to define font-size for each element within the HTML (and sometimes there are good reasons for doing so), just continue using inline styles. The only reason inline styling is frowned upon is because it combines model and view logic in a way that harms reusability; however, what you are requesting does so in exactly the same way. This is what inline styles were made for. Don't re-invent the wheel.
With all of that said, you can use sass loops to automatically generate classes for integers within a range. For example:
/* warning: this is generally a bad idea */
@for $i from 1 through 100 {
.font-#{$i} {
font-size: #{$i}px;
}
}
This is not a good idea. Pragmatically speaking it doesn't offer any advantages over just using inline styles and with large ranges your resulting file will be larger (which affects website load times).
Aside: There is a CSS philosophy (or fad, if you're feeling ungenerous) called Atomic CSS (or sometimes Functional CSS) which defies the classical advice given in this answer. I won't give an opinion on its effectiveness at producing clean, maintainable code, but it does typically require more tooling than SCSS alone if used with the degree of specificity requested in this question.
SASS Customize Class Names with Variables
Yes it is possible with the help of variable interpolation or variable substitution
which uses #{}
for variable substitution in SASS and mixins
which is a block of code just like function.
Interpolation is the process of evaluating an expression or a string containing one or more variables, yielding a result in which the variables are replaced with their corresponding values.
Simple example of interpolation and set values to the css property in SASS:
$number:60;
$n: 20px;
.m-b-#{$number}{
margin-bottom: #{$number}px;
margin-top: $n;
}
To create customize class names, will use mixins:
@mixin margin-class($side, $number) {
$firstLetter: str-slice($side, 0, 1);
.m-#{$firstLetter}-#{$number}{
margin-#{$side}: #{$number}px;
}
}
$margins: (10, 20);
$sides: ("top", "right", "bottom", "left");
@mixin generate-margin(){
@each $margin in $margins{
@each $side in $sides{
@include margin-class($side, $margin);
}
}
}
@include generate-margin();
Here, generate-margin()
will get executed which will call margin-class()
for each $margins
and $sides
, and will generate the below CSS classes:
.m-t-10 {
margin-top: 10px;
}
.m-r-10 {
margin-right: 10px;
}
.m-b-10 {
margin-bottom: 10px;
}
.m-l-10 {
margin-left: 10px;
}
.m-t-20 {
margin-top: 20px;
}
.m-r-20 {
margin-right: 20px;
}
.m-b-20 {
margin-bottom: 20px;
}
.m-l-20 {
margin-left: 20px;
}
That's the one way when you want only for specific values, but if you want to create margin class for 0-20, you can loop thru 0 to 20 as shown below:
@mixin generate-margin(){
@for $margin from 1 through 20{
@each $side in $sides{
@include margin-class($side, $margin);
}
}
}
use css variable to generate class names in scss
is it possible to generate class names by css variables?
Short answer:
No.
Longer answer:
CSS custom properties, also commonly called CSS variables, are known at runtime, while SASS variables are known at compile time. Since browsers can't understand SASS, it first needs to be compiled down to CSS and by that time, the SASS compiler won't know what the value of the CSS variable will be, so it throws a compile error.
Possible solution
Dynamically generate CSS based on your input and add it to the DOM.
How do you pass a variable to SCSS/CSS from HTML's class name?
You can use a mixin to generate modifier classes in SASS:
@mixin add-color($argument) {
$string: unquote($argument);
&--#{$string} {
color: unquote('#' + $argument);
}
}
example:
.custom-color {
@include add-color(404145);
@include add-color(ff0000);
}
output in CSS:
.custom-color--404145 {
color: #404145;
}
.custom-color--ff0000 {
color: #ff0000;
}
Read more about it here:
Generate All Your Utility Classes with Sass Maps
Can i make my classname variable in sass?
Try this way:
$red: #900;
$colorlist:();
$color:();
$colorlist: map-merge(
(
red: $red,
),
$colorlist
);
@mixin background($color){
.backg-#{$color} {
background-color: map-get($colorlist,$color);
}
}
@include background(red);
Your output will be this:
.backg-red {
background-color: #900;
}
Sass mixin with class name as variable and :lang()
@mixin localesRule($class, $cssProp, $value) {
#{$class}:lang(pt), #{$class}:lang(pl), #{$class}:lang(sk), #{$class}:lang(mx), #{$class}:lang(pt-BR) {
#{$cssProp}: $value;
}
}
.foo {
&-button {
@include localesRule('&', padding-right, 0);
}
}
output:
.foo-button:lang(pt), .foo-button:lang(pl), .foo-button:lang(sk), .foo-button:lang(mx), .foo-button:lang(pt-BR) {
padding-right: 0;
}
Dynamically change a variable based on class name
For sure SCSS provide such function but you can also do it with CSS using CSS variables:
.object h1 { font-size: 40px; color: var(--p, blue);}
.object p { font-size: 20px; color: var(--p, blue);}.red { --p:red;}.other-color { --p:rgb(15,185,120);}
<div class="object"><h1>Blue title</h1><p>blue text</p></div><div class="object red"><h1>red title</h1><p>red text</p></div><div class="object other-color"><h1>red title</h1><p>red text</p></div>
Related Topics
Adding CSS Stylesheet to Pages Based on Route in Opencart
Getting the Right Font-Size on Every Mobile Device
CSS Transform: Translate Moves Postion:Fixed Inner Div
When a CSS Property Can Have Multiple Values, Are Those Values Always Separated by Whitespaces
Firefox Support for Alignment-Baseline Property
A:Visited Doesn't Work in Mozilla Firefox
Best Way to Structure a CSS Stylesheet
Last-Child and Last-Of-Type Not Working in SASS
Inline Svg Breaks in Safari and Mobile Safari
Css: Semi-Transparent Background and an Image
Remove the Material Stepper Header