CODEWITHSUNDEEP
csssass
Zoltan King
Zoltan King

Reputation: 2262

Would it be possible to shorten or rewrite a code like this in SCSS?

I know this may sound silly but it would be possible to shorten or rewrite a code like this in SCSS or should I just leave it as is?

h1,
h2,
h3,
h4 {
  letter-spacing: .02em;
  color: $heading-color;
}

h1 {
  margin: .5em 0;
  font-size: 2.6rem;
}

h2 {
  margin: 1em 0;
  font-size: 2.4rem;
}

h3 {
  margin: 1.2em 0;
  font-size: 1.8rem;
}

h4 {
  margin: 1.6em 0;
  font-size: 1.4rem;
}

Upvotes: 0

Views: 48

Answers (1)

MaksimL
MaksimL

Reputation: 314

I would recommend you, if you want to shorten your scss code, use loops for "h" tags for setting the margin and font-size. here is the example how I use it to calculate font-sizes:

@for $h from 1 through 6 {
    h#{$h} {
        font-size: $base-font-size + $heading-scale * (6 - $h);

      }
  }

Where:

$h: 1;
$base-font-size: 1rem;
$heading-scale: 0.2;
written in variables.

So you can take whatever base size you want and use the scale to increase the size dynamically.

In my example it would be in the output css file:

h1 {
  font-size: 2rem; }

h2 {
  font-size: 1.8rem; }

h3 {
  font-size: 1.6rem; }

h4 {
  font-size: 1.4rem; }

h5 {
  font-size: 1.2rem; }

h6 {
  font-size: 1rem; }

In the same manner you can set margins.

Upvotes: 1

Related Questions