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

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

Переменные (variables)

Мы можем назначать выражения переменным и использовать их в нашей таблице стилей:

font-size = 14px

 body
   font font-size Arial, sans-serif

Скомпилируется в:

body {
   font: 14px Arial, sans-serif;
 }

Переменные могут состоять из списка выражений:

font-size = 14px
font = font-size "Lucida Grande", Arial

body
  font font sans-serif

Скомпилируется в:

body {
  font: 14px "Lucida Grande", Arial sans-serif;
}

Идентификаторы (имена переменных, функции и т.д) могут начинатся с символа $. Для примера:

$font-size = 14px
body {
  font: $font-size sans-serif;
}

Поиск свойства

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

#logo
   position: absolute
   top: 50%
   left: 50%
   width: w = 150px
   height: h = 80px
   margin-left: -(w / 2)
   margin-top: -(h / 2)

Вместо назначения переменных w и h, мы можем просто приписать символ @ к имени свойства для доступа к значению:

#logo
   position: absolute
   top: 50%
   left: 50%
   width: 150px
   height: 80px
   margin-left: -(@width / 2)
   margin-top: -(@height / 2)

Другой вариант использования — определение свойств в примеси на основе существования других свойств. В следующем примере мы устанавливаем z-index по умолчанию равным 1, только в том случае если он не был установлен ранее:

position()
    position: arguments
    z-index: 1 unless @z-index

#logo
    z-index: 20
    position: absolute

#logo2
    position: absolute

Поиск свойства будет «всплывать» вверх по стеку до того как будет найдено или вернет null если оно найдено не будет. В следующем примере @color будет установлено как blue:

body
    color: red
    ul
      li
        color: blue
        a
          background-color: @color

Еще по теме

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