Используйте псевдоклассы с переменными в Sass

Я не мог понять, как реализовать эту идею, используя псевдоклассы с переменными в Sass.

Мой случай

Я создаю форму, которая имеет несколько полей input[type=text] и поле input[type=email], и для этих полей я хочу создать состояния normal, hover и focus.

Таким образом, скомпилированный CSS будет выглядеть так:

input[type=text],
input[type=email] { background:#eee; }

input[type=text]:hover,
input[type=email]:hover { background:#aaa; }

input[type=text]:focus,
input[type=email]:focus { background:#666; }

Поэтому я создал эту переменную:

$inputs: "input[type=text], input[type=email]";

И для состояния normal у меня есть:

#{$inputs} { background:#eee; }

Итак, в моем наивном уме я думал, что выполнение #{$inputs}:hover { background:#aaa; } сработает... но это, конечно, не так, Sass не может просто так "угадать", чего я хочу :p

Вот почему я здесь.

Вопрос

Любые предложения о том, как я могу использовать псевдоклассы для переменных, как я описал выше?

Будем признательны за любую помощь и руководство.

Спасибо.


css sass pseudo-class
person Ricardo Zea    schedule 31.03.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я бы пошел на это:

input[type=text],
input[type=email]
{
   background:#eee;

   &:hover
   {
       background:#aaa;
   }

   &:focus
   {
       background:#666;
   }

}

Вот демонстрационная скрипта: http://jsfiddle.net/ApxSB/

Как сказал @ricardozea, вы также можете поместить селекторы в переменную следующим образом:

$inputs: "input[type=text], input[type=email]";

#{$inputs}
{
}

Демо здесь: http://jsfiddle.net/NicoO/ApxSB/1/

person Nico O    schedule 31.03.2014
comment
О, чувак, я только что понял это, да, я закончил именно с тем, что ты только что сказал, дох! ржунимагу. Я думаю, что был так отвлечен тем, как примесь Bourbon HTML5 Inputs работает, я думал, что должен был сделать что-то подобное. Спасибо чувак! - person Ricardo Zea; 31.03.2014
comment
Это случается со всеми нами @ricardozea рад, что вы нашли решение - person Nico O; 31.03.2014
comment
Кстати, я думаю, что ваше решение будет использовать #{$inputs} :). Спасибо еще раз!. PS. И спасибо за скрипку. - person Ricardo Zea; 31.03.2014