Tworzenie grup zmiennych w Sass

Question

Na stronie, nad którą pracuję używaliśmy Scaffold, który jest systemem opartym na PHP podobnym do Sass. Może również przetwarzać funkcje Sass \ files. Niestety ten system jest teraz abandonware i szukamy sposobu, aby całkowicie przejść do Sass. Jest jedna ważna cecha z Rusztowaniem, ale nie znajduję sposobu na przeniesienie do Sass, grupy zmiennych.

Zmienna w rusztowaniu może być zorganizowana w grupy i używana z znacznikiem rozdzielonym punktowo. Na przykład zdefiniowałbym je jako:

@variables vargroup1{ 
    variable1: ####; 
    variable2: ####; 
    variable3: ####; 
    variable4: ####; 
} 

Później używam na przykład kodu.

body{ width: vargroup1.variable1; margin: vargroup1.variable2 + 10;} 

To pomaga rozwojowi dużo, ponieważ można grupować zmienne z systemu i odczyt plików CSS można łatwo wiedzieć, czego się odwoływać. Nie znalazłem czegoś takiego w dokumentacji Sassa, czy ktoś wie, czy to możliwe? A może tak jest, używając Mixins?

Dzięki

Answer 1

Nie ma odpowiednika w Sass. Ale mogę myśleć w dwóch obejściach:

1)Sass lists i związanych z nim list functions.

Twój kod mógłby wyglądać następująco:

$variables = 40px 30px 20px 10px; 

body {width: nth($variables, 1); margin: nth($variables, 2) + 10;} 

To nie to samo, ponieważ indeksy lista nie może być struny, więc nie ma żadnego sposobu, aby wymienić swoje zmienne.

2) Definiowanie niestandardowej funkcji. Spójrz na dyrektywy funkcjonują sekcja w Sass odwoływać

@function variables($variable_name) { 
    @if ($variable_name == 'variable1') { 
    @return 40px; 
    } @else if ($variable_name == 'variable2') { 
    @return 30px; 
    } 
} 

body {width: variables('variable_1'); margin: variables('variable_2') + 10;} 

ten sposób jest mniej intuicyjne i brzydsze ale można "wymienić zmienne.

Answer 2

Można użyć SASS wymienia to podobne funkcje w sposób podobny do tego:

// List order: top, bottom, left, right, width, height, ... 
$Header: 10px,auto,10px,auto,100%,50px; 
$Footer: auto,0px,0px,auto,100%,20px; 

@function getVar($variable,$name:top){ 
    $var_index:1; 
    @if $name==bottom { 
     $var_index:2; 
    } @else if $name==left { 
     $var_index:3; 
    } 
    // Continue de if else for each property you want. 
    return nth($variable,$var_index); 
} 

ten sposób nazywając coś takiego:

getVar($Header,left) 

powinna zwracać wartość właściwości wyjechał do lista Header, ale zmiana go na getVar($Footer,top) zwróci wartość najwyższej właściwości "grupy stopki" (stopka listy wartości).

To działa na czas użycia wartości, ale jest to definicja, należy przestrzegać dokładnej kolejności i nie można pozostawić pustej wartości, najbliższą pustej wartości, którą znalazłem jest #{''} co oznacza "Pusty ciąg bez quotes ", pusta wartość, ale jest dodawana do CSS.

Answer 3

Natknąłem się na this somewhat clunky solution (patrz odpowiedź Chrisa Eppsteina) przy użyciu zip i index. Najwyraźniej opiekun SASS dodał te wbudowane funkcje w odpowiedzi na podobne pytanie.

Cytując jego odpowiedź:

$border-names: a, b, c; 
$border-widths: 1px, 1px, 2px; 
$border-styles: solid, dashed, solid; 
$border-colors: red, green, blue; 
$borders: zip($border-widths, $border-styles, $border-colors); 

@function border-for($name) { 
    @return nth($borders, index($border-names, $name)) 
} 

@each $name in $border-names { 
    .border-#{$name} { 
    border: border-for($name); 
    } 
} 

wygeneruje:

.border-a { border: 1px solid red; } 
.border-b { border: 1px dashed green; } 
.border-c { border: 2px solid blue; } 

W "nazywania zmiennych" pochodzi z listy "-names" na górze; następnie użyj index żądanej nazwy zmiennej z listy zmiennych, aby uzyskać n-tą wartość z innych list zmiennych. zip służy do scalania oddzielnych list razem, tak aby można było pobrać ten sam indeks ze wszystkich list w tym samym czasie. Zawijanie tego zachowania w funkcji ułatwia odzyskiwanie zestawu.