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.

Answer 1

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>