SASS условно для глобального переопределения

Question

Я пытаюсь реализовать идею, где я могу индивидуально установить нижнюю границу для заголовков тегов (h1, h2, h3, h4), но также иметь глобальный переопределяющий переключатель. Что-то вроде этого:

$h1-border: 4px solid #CCCCCC; 
$h2-border: 4px solid #CCCCCC; 
$h3-border: 4px solid #CCCCCC; 
$h4-border: 4px solid #CCCCCC; 

... но если я установить что-то вроде:

$all-heading-borders: 4px solid #CCCCCC; 

тогда было бы переопределение/игнорировать индивидуальные настройки и применить их к h1-h4 тегов в один удар.

Что я буду использовать для этого? Это возможно?

Answer 1

Самым простым решением было бы использовать !default флаг и установить все переменные равными «глобальной» переменной:

// overrides can be done at any point *before* you reference them in your code 
$h1-border: 2px dotted orange; 

// default configuration variables 
$all-heading-borders: 4px solid #CCCCCC !default; 

$h1-border: $all-heading-borders !default; 
$h2-border: $all-heading-borders !default; 
$h3-border: $all-heading-borders !default; 
$h4-border: $all-heading-borders !default; 

// oh look, another override 
$h2-border: 1px solid grey; 

h1 { 
    border: $h1-border; 
    outline: $h3-border; 
} 

h2 { 
    border: $h2-border; 
    outline: $h4-border; 
} 

Выход:

h1 { 
    border: 2px dotted orange; 
    outline: 4px solid #CCCCCC; 
} 

h2 { 
    border: 1px solid grey; 
    outline: 4px solid #CCCCCC; 
}