Следить за новостями:

Категории
Свежие записи
BrainFБлог

Селекторы (selectors)

Отступы

Синтаксис Stylus основан на отступах

body
    color white

Будет скомпилирован в:

body {
    color: #fff;
}

При желании вы можете использовать двоеточие для того чтобы отделить значения от свойств

body
    color: white

Свод правил

Stylus, как и CSS, позволяет определять свойства сразу для нескольких селекторов.
Разделяя селекторы запятыми

textarea, input
    border 1px solid #eee

Или же переносами строк

textarea
input
    border 1px solid #eee

Оба примера будут скомпилированы в:

textarea,
input {
    border: 1px solid #eee;
 }

Исключением из правила являются селекторы, которые выглядят как свойства. foo bar baz в приведенном примере могут выступать как свойством так и селектором:

foo bar baz > input
    border 1px solid

Поэтому имеет смысл воспользоватся запятой:

foo bar baz,
form input,
> a
    border 1px solid

Ссылка на родителя

Символ & ссылается на родительский селектор(ы). В примере, оба селектора (textarea и input) будут менять цвет с помощью псевдокласса :hover

textarea
input
    color #A7A7A7
    &:hover
    color #000

Будет скомпилировано в:

textarea,
input {
    color: #a7a7a7;
}
textarea:hover,
    input:hover {
    color: #000;
 }

Ниже приведен пример добавляющий границу в 2px для Internet Exploder, используя ссылку на родителя внутри примеси

box-shadow()
    -webkit-box-shadow arguments
    -moz-box-shadow arguments
    box-shadow arguments
    html.ie8 &,
    html.ie7 &,
    html.ie6 &
    border 2px solid arguments[length(arguments) - 1]
body
    #login
    box-shadow 1px 1px 3px #eee

На выходе:

body #login {
    -webkit-box-shadow: 1px 1px 3px #eee;
    -moz-box-shadow: 1px 1px 3px #eee;
    box-shadow: 1px 1px 3px #eee;
}
html.ie8 body #login,
html.ie7 body #login,
html.ie6 body #login {
    border: 2px solid #eee;
}

Если вам необходимо использовать амперсанд как символ & (не ссылаясь с его помощью на родителя), то вам достаточно просто экранировать его:

.foo[title*='\&']
// => .foo[title*='&']

Корневая ссылка

Символ / в начале селектора является корневой ссылкой. Он ссылается на корневой контекст и это означает что к нему не будет придварен родительский селектор (если вы не будете использовать его с &). Это может оказатся полезным в случае если вам необходимо описать несколько стилей в некторой вложенности к другому селектору, и стилей без этой вложенности

textarea
input
    color #A7A7A7
    &:hover,
    /.is-hovered
        color #000

Будет скомпилировано в:

textarea,
input {
    color: #a7a7a7;
}
textarea:hover,
input:hover,
.is-hovered {
    color: #000;
}

биф selector()

Спомощью встроенного бифа selector() вы можете использовать текущий скомпилированный селектор. Можно использовать внутри миксинов для проверок и других умных вещей.

.foo
selector()
// => '.foo'
.foo
&:hover
    selector()
// '.foo:hover'

Биф selector() также может принимать необязательный строковый параметр. В таком случае он вернет селектор скомпилированный из этого параметра. Обратите внимание что селектор текущей области не будет предварен без использования символа &

.foo
    selector('.bar')
// => '.bar'
.foo
    selector('&:hover')
 // '.foo:hover'

Неоднозначности

Такие выражения как padding — n могуть истолкованы как операция вычитания, либо как отрицательное значение свойства. Для устранения неоднозначности, оберните выражение в скобки:

pad(n)
padding (- n)
body
    pad(5px)

Будет скомпилировано в:

body {
    padding: -5px;
}

Однако это верно только для функций (поскольку функции выступают либо в качестве миксинов либо в качестве вызовов возвращающих значение)
Нижеследующий пример прекрасно работает и дает на выходе такой же результат как и предыдущий пример:

body
    padding -5px

Имеются странные значения свойств, которые Stylus не может обработать? unquote() поможет выйти из положения

filter unquote('progid:DXImageTransform.Microsoft.BasicImage(rotation=1)')

Результат:

filter progid:DXImageTransform.Microsoft.BasicImage(rotation=1)

Еще по теме

2 комментария к записи “Селекторы (selectors)

  1. Александр
    30.09.2015 23:10:36 Ответить

    Очень классный блог. Не останавливайтесь! Web-программирование в таком стиле, в каком Вы рассказываете — это очень доходчиво и круто.

    1. parmactep
      30.09.2015 23:15:38 Ответить

      Спасибо. Вдохновляюще.

Ваш комментарий
выберите имя