Einstellung SASS vars nach Klasse

Question

Ich muss vars nach einer Klasse, die sind .mit Tabelle und .notable und die Positionierung der Elemente ist unterschiedlich. See the image oder das Codebeispiel überprüfen:

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

Wie dieses Ding zu lösen? Irgendwelche Ideen?

Answer 1

Sie können die Variablen nicht auf diese Weise übergeben. Sie könnten diese die folgende Art und Weise jedoch nähern wollen:

.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; 
    } 
} 

Dies hält den Code lesbar und überschaubar, wie Sie in einem Ort mit Ihrem Logo Eigenschaften behalten. Wenn Sie das Zeichen & am Ende platzieren, wird überprüft, ob es sich um ein übergeordnetes Element anstelle eines untergeordneten Elements .logo handelt. Diese

kompiliert in:

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

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