CODEWITHSUNDEEP
csssass
Wasiim
Wasiim

Reputation: 146

Using if statement on css selectors - SASS

I am working on a stylesheet for a multisite.

I have to declare a font-size in one variable, and the variable would change depending on the selectors. Eg:

$newfont : 10px;

i am attempting this which of course is not working:

@if ( #header ) {
    $newfont: 30px;
}@ else if ( #footer ) {
    $newfont: 25px;
}

Can someone please point out what i am doing wrong?

Upvotes: 1

Views: 3149

Answers (3)

cimmanon
cimmanon

Reputation: 68319

The simplest solution is to just use more variables. This is how most theming libraries do it.

$header-font-size: 30px !default;
$footer-font-size: 25px !default;

#header{
    font-size: $header-font-size;
}
#footer{
    font-size: $footer-font-size;
}

Upvotes: 0

Charizard_
Charizard_

Reputation: 1245

I am sorry but why don't you use

#header{
    font-size: 30px;
}
#footer{
    font-size:25px;
}

and as pointed out in the comment below you can use a mixin.

Upvotes: 3

Krasimir
Krasimir

Reputation: 13529

I'm not sure what you are trying to achieve, but @if requires a SassScript expression. What you are passing is actually a selector. If you want to apply different font size for different containers I'll suggest to use a function or mixin. For example:

@function get-font-size($type) {
    @if $type == "header" {
        @return 30px;
    } @else if $type == "footer" {
        @return 25px;
    }
}
#header {
    font-size: get-font-size("header");
}
#footer { 
    font-size: get-font-size("footer"); 
}

The code produces:

#header {
  font-size: 30px;
}
#footer {
  font-size: 25px;
}

You may even control the process with a variable as you tried actually:

$newfontsize: 30px;
@mixin update-font-size($size) {
    $newfontsize: $size;
}
@function get-font-size() {
    @return $newfontsize;
}

#header {
    font-size: get-font-size();
}
@include update-font-size(15px);
#footer { 
    font-size: get-font-size(); 
}

Upvotes: 1

Related Questions