Using Scss variables with multiple styles?

Question

I'm getting into scss and have been trying to apply most of my styles through variables.

There is certain variables that I want with multiple styles. For example something related to fonts.

I want all 12px size fonts to be red.

I declared a variable like

$font-12: (font-size: 12x, color: red)

Obviously I can't apply this variable like normal ones since it includes multiple styles.

Is this the correct way to declare a variable like this?

Can I even apply this variable like this?

If not, what is the correct way to apply related styles using scss?

Thanks.

I believe you are looking for mixins - check those out: sass-lang.com/documentation/at-rules/mixin — cclark413
– cclark413, Commented Aug 16, 2019 at 18:29

alex067 · Accepted Answer · 2019-08-16 18:29:51Z

2

You can do this via mixins.

@mixin font-12(){
  font-size: 12px;
  color: red;
}

Documentation: https://sass-lang.com/guide

However you can also do this in native CSS.

Simply create a utility class (this is a normal css class, I call it a utility class because it's reusable):

.font-12 { 
   font-size: 12px;
   color: red;
}

And apply this class to any elements you want IE:

<div class="card font-12"> ..some card... </div>
<h3 class="card-title font-12"> .. some card title.. </h3>

answered Aug 16, 2019 at 18:29

alex067

3,3211 gold badge14 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user6078346 · Accepted Answer · 2022-07-12 21:33:43Z

I'm sorry, I would have liked to comment alex067's answer but as I'm not very active here my reputation would not suffice to comment therefore I have to post it as an answer:

Using a mixin is exactly the correct answer.

BUT: I strongly advise against the second proposed option! While is is technically correct, doing it that way defeats the whole purposes of using CSS in the first instance. We could more or less go back to using old-style font-color tags etc. if we would go about it this way.

CSS is made to abstract content/semantics from design for a host of very good reasons. If you want to go the pure CSS way (no SASS) at least name your style something like 'unimportant' or 'by-line' so that it could make sense when you redefine it for different screens, high-contrast schemes, screen-reader output etc.

[With Bootstap and all those other bloody frameworks out there it seems that nobody cares about clear accessible structure and using stuff the right way; and my struggle for doing things the intended way may be futile - still I feel the need to fight for it.]

user22435767 · Accepted Answer · 2024-05-16 01:24:30Z

0

This is what I'm trying! I wont know until tomorrow night if it works but heres a breakdown if you get to it before I do:

_variables.scss file: // mobile header styles:
$pageHeader-sectionHeader-styles: ( 'font-size': 24px, 'line-height': 32px, 'font-weight': 700, );
_styles.scss file: .header {
  font-size: map-get($pageHeader-sectionHeader-styles, 'font-size');
  font-weight: map-get($pageHeader-sectionHeader-styles, 'font-weight');
  line-height: map-get($pageHeader-sectionHeader-styles, 'line-height');
}

answered May 16, 2024 at 1:24

user22435767

Collectives™ on Stack Overflow

Using Scss variables with multiple styles?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related