CODEWITHSUNDEEP
cssfunctionif-statementsass
NeedH8
NeedH8

Reputation: 482

Setting SASS vars according to class

I need to set vars according to a class which are .withtable and .notable and the positioning of elements is different. See the image or check the code example: 

body.withtable {
 $logo_width: 130px;
 $logo_height: 80px;
}
body.notable {
 $logo_width: 200px;
 $logo_height: 100px;
}

How to solve this thing? Any ideas?

Upvotes: 0

Views: 37

Answers (1)

duvigneau
duvigneau

Reputation: 201

You can't pass the variables that way. You might want to approach this the following way however:

.logo {
    body.withtable & {
        $logo_width: 130px;
        $logo_height: 80px;
        width: $logo_width;
        height: $logo_height;
    }
    body.notable & {
        $logo_width: 200px;
        $logo_height: 100px;
        width: $logo_width;
        height: $logo_height;
    }
}

This keeps the code readable and manageable as you keep your logo properties in one place. Placing the & character at the end checks if this is a parent instead of a child of .logo.

This compiles into:

body.withtable .logo {
  width: 130px;
  height: 80px; }

body.notable .logo {
  width: 200px;
  height: 100px; }
}

Upvotes: 1

Related Questions