CODEWITHSUNDEEP
csssass
user12394904
user12394904

Reputation:

SCSS pass separate sizes

So I'm learning to use scss more and I'm having some trouble understanding certain things and wanted to see if anyone has some assistance for me.

So I have the following font-family defined:

h1, h2, h3 {
  font-family: 'Quicksand', sans-serif;
}

How can I expand that and define sizes for different headings like have different sizes for h1, h2 and h3? Would I need to start another declaration and use h2 { all over again?

Upvotes: 0

Views: 763

Answers (4)

Dan Mullin
Dan Mullin

Reputation: 4435

This can be accomplished without mixins by using the @extend directive.

Not as powerful as the mixin in the other answer, but nice clean and simple.

%font {
    font-family: sans-serif;
}
h1 {
    @extend %font;
    font-size: 20px;
}
h2 {
    @extend %font;
    font-size: 16px;
}

This will be compiled as:

h1, h2 {
    font-family: sans-serif;
}
h1 {
    font-size: 20px;
}
h2 {
    font-size: 16px;
}

Upvotes: 0

Simplicius
Simplicius

Reputation: 2105

You can even automate that entirely, and even go exponentally, if you'd use a pow() function.

@mixin headings($base) {
  @for $i from 1 through 6 {
    h#{(6 + 1) - $i},
    .h#{(6 + 1) - $i} {
      font-size: #{$base + (($base / 2) * $i)};
    }
  }
}

@include headings(16px);

This will compile to:

h6,
.h6 {
  font-size: 24px;
}

h5,
.h5 {
  font-size: 32px;
}

h4,
.h4 {
  font-size: 40px;
}

h3,
.h3 {
  font-size: 48px;
}

h2,
.h2 {
  font-size: 56px;
}

h1,
.h1 {
  font-size: 64px;
}
<h1>Heading1</h1>
<h2>Heading2</h2>
<h3>Heading3</h3>
<h4>Heading4</h4>
<h5>Heading5</h5>
<h6>Heading6</h6>

Upvotes: 1

Sh.Sabour
Sh.Sabour

Reputation: 11

you need to add new declaration such as h1{} to style.scss, but there is a clever way to add this style quickly. You can use mixin h in the anywhere inside the style.scss. Please follow this:

// _mixin.scss

@mixin h($heading,$font){
  @if($heading==1){
    h1{font-size: $font + px;}
  }@else if($heading==2){
    h2{font-size: $font + px;}
  }@else if($heading==3){
    h3{font-size: $font + px;}
  }@else if($heading==4){
    h4{font-size: $font + px;}
  }@else if($heading==5){
    h5{font-size: $font + px;}
  }@else if($heading==6){
    h6{font-size: $font + px;}
  }
}

// style.scss

body{
  @include h(1,100);
  @include h(2,50);
  @include h(3,40);
  @include h(4,30);
}

// Output

body h1 {
  font-size: 100px; }
body h2 {
  font-size: 50px; }
body h3 {
  font-size: 40px; }
body h4 {
  font-size: 30px; }

Upvotes: 0

Ehsan
Ehsan

Reputation: 819

yes, like this:

h1{
font-size: 24px
}
h2{
font-size: 20px;
}
h3{
font-size: 16px;
}

Upvotes: 0

Related Questions