Создание групп переменных в Sass

Question

На сайте, над которым я работаю, мы использовали Scaffold, который представляет собой основанную на PHP систему, похожую на Sass. Он также может обрабатывать функции Sass \ files. К сожалению, эта система теперь отказывается от программного обеспечения, и мы смотрим на способ полностью перейти к Sass. Есть одна большая особенность с Scaffold, хотя я не нахожу способ передать Sass, группы переменных.

Переменная в Лесах может быть организована группами и использована с разметкой, разделенной точкой. Например, я бы определил их как:

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

И в дальнейшем использовать код, как, например.

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

Это помогает развитию много, так как вы можете сгруппировать вместе переменные из системы и чтения CSS файлы, которые вы можете легко узнать, что ссылки. Я не нашел ничего подобного в документации Sass, кто-нибудь знает, возможно ли это? Или, если так или иначе использовать Mixins?

Thanks

Answer 1

В Сассе нет эквивалента. Но я могу думать в двух обходных решениях:

1)Sass lists и связанные с ним list functions.

Ваш код может выглядеть следующим образом:

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

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

Это не то же самое, потому что список индексы не могут быть строками, так что у вас не так, как назвать переменные.

2) Определите пользовательскую функцию. Посмотрите на Директив функций раздела в Sass ссылка

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

Этим способ является менее интуитивным и уродливее, но вы можете «назвать переменные».

Answer 2

Вы можете использовать SASS перечисляет это функции, связанные с аналогично тому, что:

// 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); 
} 

Таким образом, называя что-то вроде:

getVar($Header,left) 

Если вернуть значение левой собственности для список Header, но изменение его на getVar($Footer,top) вернет значение для верхнего свойства «Footer Group» (Нижний список значений).

Это работает на время использования значений, но это определение, вы должны следовать точному порядку и не можете оставить пустое значение, ближайшее к пустому значению, которое я нашел, это #{''}, что означает «Пустая строка без quotes ", пустое значение, но добавляется в CSS.

Answer 3

Я наткнулся на this somewhat clunky solution (см. Ответ Криса Эпштейна), используя zip и index. По-видимому, поддерживающий SASS добавил эти встроенные функции в ответ на аналогичный вопрос.

Цитирую его ответ:

$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); 
    } 
} 

генерировать бы:

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

"именования переменных" происходит из списка "-names" в верхней части; вы затем используете index требуемого имени переменной из этого списка переменных, чтобы получить n-е значение из других списков переменных. zip используется для совместного использования отдельных списков, чтобы вы могли одновременно получать один и тот же индекс из всех списков. Обертка этого поведения в функции облегчает получение набора.