Почему я должен использовать ДЕРЗОСТЬ, смешивающуюся?

Я знаю, что могу использовать mixins, чтобы расширить классы дерзости с некоторыми общими используемыми стилями. С другой стороны я могу просто сделать это с классом и установить его для соответствующего элемента HTML.

  • Итак, почему я должен использовать его?
  • , В каких случаях вы рекомендовали бы использовать его?
  • Это имеет преимущество?
  • это рассматривают как стандарт?
3
nl ja de
FWIW я думаю, что это - полезный тип вопроса спросить & надеть другие точки зрения. Я когда-то спросил подобный (stackoverflow.com/questions/708040/…) и действительно ценивший вдумчивые ответы я добрался. & я приехал, сюда ища информацию о "почему ДЕРЗОСТЬ использования"...
добавлено автор ElBel, источник

3 ответы

Вы используете смешивание, когда вы не всегда хотите, чтобы те же самые ценности были применены к отборщику.

Например, если бы вы хотите сделать что-то со скругленными углами, вы создали бы смешивание, которое принимает параметр "радиуса":

=borderRadius($value)
  border-radius: $value
  -webkit-border-radius: $value
  -moz-border-radius: $value
  -o-border-radius: $value

Тогда где-то в другом месте вы могли сделать:

.selector1
  +borderRadius(5px)

.selector2
  +borderRadius(10px)

Это В ОСНОВНОМ СУХО. Ti делает код более ремонтируемым и как только вы не должны поддерживать Opera, например, вы просто удалили бы -o-border-radius в одном месте вместо того, чтобы искать все ваши файлы и удалить его из многократных мест.

3
добавлено

Используя mixins имеет несколько преимуществ:

1) Чтобы использовать класс, на самом деле необходимо отметить все элементы HTML таким классом (=creating ненужный верхний), смешивание может быть расширением существующего класса, а также создать дополнительные классы при необходимости.

2) Mixins может взять параметры, делая их очень динамичными и resusable. Вам только нужно параметризованное смешивание того, где вам были нужны несколько классов. (boderradii, цвета, диапозитивы, fontsizes и так далее):

@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}

$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}

<глоток> * Пример от Доктора Дерзости

3) У классов должны быть семантические значения. Mixins должен больше быть похожим на codesnippets, который в состоянии к тому, чтобы быть используемым во многих различных местах.

Хорошим и более сложным примером всех этих пунктов, которые я упомянул выше, является смешивание pduersteler.

1
добавлено

Как пример для mixins; Скажем, у вас есть эльф с символами в сетке с фиксированным шагом. Символы составляют 32x32 пкс каждый, и вы хотите произвести символы на основе того эльфа и для 32x32 пкс и для 16x16 пкс. Это - то, где смешивание может быть довольно удобным.

@mixin icon($name, $left, $top)
{
  &.#{$name}-16:not(.raw)
  {
    &:before
    {
        float: left;
        content: "";
        width: 16px;
        height: 16px;
        margin-right: 8px;

        background-size: 300px 300px;
        background-image: image_url('icons/sprite_gray.png');
        background-position: -#{$left * 16}px -#{$top * 16}px;
    }

    &:hover:before { background-position: -#{$left * 16}px -#{$top * 16 + 16 * 1}px; }
    &.active:before { background-position: -#{$left * 16}px -#{$top * 16 + 16 * 2}px; }
    &.active.contrast:before { background-position: -#{$left * 16}px -#{$top * 16 + 16 * 3}px; }
  }

  &.#{$name}-16.raw
  {
    width: 16px;
    height: 16px;

    background-size: 300px 300px;
    background-image: image_url('icons/sprite_gray.png');
    background-position: -#{$left * 16}px -#{$top * 16}px;
  }

  &.#{$name}-32:not(.raw)
  {
    &:before
    {
        content: "";
        width: 32px;
        height: 32px;

        background-size: 600px 600px;
        background-image: image_url('icons/sprite_gray.png');
        background-position: -#{$left * 32}px -#{$top * 32}px;
    }

    &:hover:before { background-position: -#{$left * 32}px -#{$top * 32 + 32 * 1}px; }
    &.active:before { background-position: -#{$left * 32}px -#{$top * 32 + 32 * 2}px; }
    &.active.contrast:before { background-position: -#{$left * 32}px -#{$top * 32 + 32 * 3}px; }
  }

  &.#{$name}-32.raw
  {
    display: inline-block;
    width: 32px;
    height: 32px;

    background-size: 600px 600px;
    background-image: image_url('icons/sprite_gray.png');
    background-position: -#{$left * 32}px -#{$top * 32}px;
  }

}

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

.icon { 
    @include icon(user, 1, 1);
    @include icon(role, 5, 1);
}

который дает мне пользователь 16, пользователь 32, роль 16, роль 32 классы, чтобы осуществить символы.

(В этом примере они приложены как : прежде содержание, если вы не используете .raw ),

0
добавлено