Используя sass, как вы стилизуете "# div1 img, # div2 img {height: 80px}"? - PullRequest
Новая
       29

Используя sass, как вы стилизуете "# div1 img, # div2 img {height: 80px}"?

0 голосов
/ 12 июня 2010

Как использовать стиль sass 

#box1 img, #anotherbox img { height: 80px }

? Является ли использование mixins единственным способом?

1 Ответ

3 голосов
/ 20 июня 2010

Один из способов - перечислить ваши селекторы так же, как вы делали это в CSS: но это не нахальный способ сделать это, поскольку эти элементы не обязательно связаны друг с другом, так почему они должны принадлежать друг другу?Они просто имеют общие стили.Перечислять их вместе, как это работает, прекрасно, но немного сложнее поддерживать порядок, когда вы добавляете больше: 

#box1 img, #anotherbox img
  height: 80px

Вы, конечно, можете использовать миксин для этого, если хотите обобщить его: 

=shorty
  height: 80px

#box1 img, #anotherbox img
  +shorty

Но это одно и то же: # box1 и #anotherbox хотят быть в разных частях файла.Вам нужно, чтобы они разделяли некоторые общие стили, но имеет больше смысла сохранять их организованными с группой правил ящиков, к которой они принадлежат, так что вы разделяете их: 

=shorty
  height: 80px

#box1
  img
    +shorty

#anotherbox
  img
    +shorty

Так как это вызывает mixin дважды,он создает дублирование в выходных данных: 

#box1 img { height: 80px }
#anotherbox img { height: 80px }

Это вполне приемлемо, когда в миксине просто есть несколько правил или когда он используется в ограниченном количестве мест.(Миксины действительно вступают в свои права, когда миксин генерирует различные правила стиля на основе параметров.)

Хорошо, так что это обход блока с миксинами.

Вот как вы можете избежать этого дублирования, используя @ extend :

Идея @extend была первоначально предложена Николь Салливан в ее списке пожеланий CSS в блоге.Это казалось настолько хорошей идеей, что была разработана реализация в текущем простом CSS, и вскоре после этого она была добавлена ​​в Sass.

Если ваши правила стиля описывают шаблон, который предназначен для использования в качестве общегокласс или базовый стиль для ряда других элементов, вы должны рассмотреть @ extended.

Чтобы понять разницу, мы знаем, что миксин будет выводить стили при каждом вызове, но вместо этого будет создаватьсписок всех селекторов, в которых используется этот стиль, и затем присоединить их к одному блоку стилей: 

.thumb-size
  height: 80px

#box1
  img
    @extend .thumb-size

#anotherbox
  img
    @extend .thumb-size

Производит: 

.thumb-size, #box1 img, #anotherbox img { height: 80px }

Будет напечатан базовый класс стиля (.thumb-size) в выводе, даже если он вам абсолютно не нужен ни для чего другого.Но я думаю, что в любом случае это предпочтительнее, так как он определяет назначение этого списка селекторов, когда он находится перед ними.

...