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

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

Наследование (@extend) — Stylus

Директива @extend заимствована (и работает так же) из SASS, лишь с некоторыми отличиями. Эта функция значительно упрощает поддержку семантических правил, которые наследуются от других семантических правил.

«Наследование» с помощью миксинов

Использование mixin для достижение подобного эффекта, чревато дублированием CCS. Типичная ситуация, чтобы определит несколько классов, как показано ниже, а затем объединить их в элемент типа «предупреждающее сообщение».

Такой метод трудно поддерживать, хоть и работает он отлично.

.message,
.warning {
  padding: 10px;
  border: 1px solid #eee;
}

.warning {
  color: #E2E21E;
}

Использование @extend

Для достижения такого же результата, с помощью @extend, просто передайте ему нужный селектор (обратите внимание что @extend и @extends равнозначны, один является алиасом другого). Stylus в последствии добавит селектор .warning к существующему набору правил .message, а класс .warning наследует свойства от .message

.message {
  padding: 10px;
  border: 1px solid #eee;
}

.warning {
  @extend .message;
  color: #E2E21E;
}

Вот более сложный пример демонстрирующий каскад наследования @extend

red = #E33E1E
yellow = #E2E21E

.message
  padding: 10px
  font: 14px Helvetica
  border: 1px solid #eee

.warning
  @extends .message
  border-color: yellow
  background: yellow + 70%

.error
  @extends .message
  border-color: red
  background: red + 70%

.fatal
  @extends .error
  font-weight: bold
  color: red

Получим следующий CSS:

.message,
.warning,
.error,
.fatal {
  padding: 10px;
  font: 14px Helvetica;
  border: 1px solid #eee;
}
.warning {
  border-color: #e2e21e;
  background: #f6f6bc;
}
.error,
.fatal {
  border-color: #e33e1e;
  background: #f7c5bc;
}
.fatal {
  font-weight: bold;
  color: #e33e1e;
}

В настоящее время, отличие Stylus от SASS в том что SASS не допускает @extend для вложенных селекторов

form
  button
    padding: 10px

a.button
  @extend form button
Syntax error: Can't extend form button: can't extend nested selectors
        on line 6 of standard input
  Use --trace for backtrace.

Пока селекторы совпадают, в Stylus это работает.

form
  input[type=text]
    padding: 5px
    border: 1px solid #eee
    color: #ddd

textarea
  @extends form input[type=text]
  padding: 10px

На выходе:

form input[type=text],
form textarea {
  padding: 5px;
  border: 1px solid #eee;
  color: #ddd;
}
textarea {
  padding: 10px;
}

Наследование нескольких селекторов

Stylus позволяет расширить несколько селекторов одновременно, просто напишите их через запятую:

.a
  color: red

.b
  width: 100px

.c
  @extend .a, .b
  height: 200px

Результат:

.a,
.c {
  color: #f00;
}
.b,
.c {
  width: 100px;
}
.c {
  height: 200px;
}

Наследование селектров-плейсхолдеров

Аналогично SASS, в Stylus присутствует функция — селекторов-плейсхолдеров.

Эти селекторы должны начинатся с символа $ (например $foo), и не образовывать в результате CSS. Но вы все равно можете их наследовать:

$foo
  color: #FFF

$foo2
  color: red

.bar
  background: #000
  @extends $foo

.baz
  @extends $foo

В результате:

.bar,
.baz {
  color: #fff;
}
.bar {
  background: #000;
}

Заметим, что если селектор не наследуется — то он будет отсутствовать в итоговом CSS. Это мощный способ создания библиотеки расширяемого кода. Хоть вы и можете вставить код посредством миксинов, они будут добавлять код каждый раз, когда вы используете их, в то время как наследование плейсхолдеров даст вам компактный вывод.

Опциональное наследование

Иногда может быть полезно наследовать нечто, что существует в зависимости от контекста. Для достижения этой цели, вы можете использовать использовать суффикс !optional для любого селектора:

$specialDesign
  color: #FFF

.btn
  @extend .design !optional, $specialDesign !optional

Результат:

.btn {
  color: #fff;
}

Еще по теме

2 комментария к записи “Наследование (@extend) — Stylus

  1. sors
    12.12.2016 13:34:18 Ответить

    «Stylus в последствии добавит серектор .warning к существующему набору правил»

    1. parmactep
      12.12.2016 15:29:19 Ответить

      Спасибо. Исправил.

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