Создание групп переменных в Sass - PullRequest
5 голосов
/ 20 марта 2012

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

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

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

А позже используйте код, как, например.

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

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

Спасибо

Ответы [ 3 ]

5 голосов
/ 21 сентября 2012

Я столкнулся с этим несколько неуклюжим решением (см. Ответ Криса Эппштейна), используя 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 используется для объединения отдельных списков, так что вы можете получить один и тот же индекс из всех списков одновременно. Включение этого поведения в функцию облегчает получение набора.

5 голосов
/ 21 марта 2012

Нет аналога в Sass.Но я могу подумать о двух обходных путях:

1) Списки Sass и связанные с ними функции списка .

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

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

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

0 голосов
/ 28 марта 2012

Вы можете использовать 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" (Список значений нижнего колонтитула).

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...