CODEWITHSUNDEEP
csssassscss-mixins
Luu Hoang Bac
Luu Hoang Bac

Reputation: 442

Declare variable for different classes

I'm using SCSS and I have a variable $arial: 'Arial', serif;

Now I want to do something like that:

.english{
    $arial: 'Arial', serif;
    font-family: $arial;
}
.japan{
    $arial: 'Noto Sans';
    font-family: $arial;
}

Because from the beginning, my customer wants to display $arial as 'Arial', but now they're separating it to 2 pages, (English page and Japanese page).

Upvotes: 0

Views: 99

Answers (2)

Chandra Shekhar
Chandra Shekhar

Reputation: 3749

I suggest you to make use of CSS Vars as above. To accomplish this in sassy way you can make use of sass map

$map:("english":"'Arial',serif","japan":"'Nato Sans'");

@each $key , $value in $map{
  .#{$key}{
    font-family:unquote($value);
  }
}

output

.english {
  font-family: 'Arial',serif;
}

.japan {
  font-family: 'Nato Sans';
}

Upvotes: 0

somethinghere
somethinghere

Reputation: 17330

You could use a newer CSS feature called CSS variables to accomplish this. Simple define what variables need to change in what context, and then import them in the definitions themselves. You can find the docs here: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

Here is an example (using very easily distinguishable fonts):

document.querySelector( 'h1' ).addEventListener( 'click', e => document.body.classList.toggle( 'japanese' ) )
body {
   
  --font: 'Comic Sans MS', monospace;
  
  font-family: var(--font, cursive);
    
}

body.japanese {

  --font: 'Impact';
  
}
<h1>Lorem Ipsum Dolor Sit Amet</h1>

With a simple class toggle, the variable is updated and the definition only needs to be made once.

Upvotes: 2

Related Questions