Переменные SASS и наследование - PullRequest
Новая
       13

Переменные SASS и наследование

2 голосов
/ 05 декабря 2011

Предположим, у меня есть две практически идентичные структуры HTML, но с разными class именами. Они отличаются только несколькими переменными, такими как width и height. Используя переменные SASS / SCSS, я подумал, что могу сделать что-то вроде этого: 

.widget-a {
    $width: 50px;
}

.widget-b {
    $width: 100px;
}

.widget-a,
.widget-b {
    button {
        background: red;
        width: $width;
    }
}

Это позволило бы мне написать один фрагмент вложенного кода SASS для обоих виджетов a и b. Однако переменные видны только во вложенной области видимости, поэтому SASS возвращает ошибки «переменная неопределена». Конечно, я мог бы переписать это, просто сделав что-то вроде: 

.widget-a,
.widget-b {
    button {
        background: red;
    }
}

.widget-a {
    button {
        width: 50px;
    }
}

.widget-b {
    button {
        width: 100px;
    }
}

Но это кажется довольно громоздким. Есть ли другой способ сделать эту работу?

Ответы [ 4 ]

1 голос
/ 04 июня 2012

столкнулся с той же проблемой, вот как я собираюсь попытаться решить ее ... (это работает) 

@mixin foo($type:"default")
  .mClass
    $bg: inherit
    @if $type == "banana"
      $bg: yellow

    background: $bg

.firstClass
  @include foo
.secondClass
  @include foo("banana")
1 голос
/ 07 ноября 2013

Ваша проблема может быть решена с помощью mixin. 

@mixin button($width){
  button{
    background:red;
    width:$width;
  }
}

.widget-a{ @include button(50px);  }

.widget-b{ @include button(100px); }
1 голос
/ 05 декабря 2011

Переменные в SASS ограничены только тем блоком, в котором они появляются. Ваше первое объявление .widget-a и объявление, объявляющее и A, и B, являются двумя отдельными областями. Вам придется сделать что-то вроде этого (при условии, что вам нужно использовать ширину более одного раза): 

$wbackground: red;

.widget-a {
    $wawidth: 50px; /* widget A width */
    button {
        background: $wbackground;
        width: $wawidth;
    }
}

.widget-b {
    $wbwidth: 100px; /* widget B width */
    button {
        background: $wbackground;
        width: $wbwidth;
    }
}
0 голосов
/ 12 ноября 2013

Я не вижу преимущества создания миксина только для этой конкретной ситуации, вряд ли он будет полезен в нескольких случаях, но это только мое мнение.

Во всяком случае, я создал миксин, просто для удовольствия. Я думаю, что это может помочь вам справиться с этой конкретной ситуацией. Вот mixin , и я попытаюсь объяснить, как это работает: 

@include button($selectors, $property, $values, $child: false) {
  // Common properties that are included in all $selectors  
}

Этот миксин принимает четыре параметра:

  • $selectors: список селекторов, в вашем случае, .widget-a и .widget-b, они должны быть заключены в кавычки.

  • $property: здесь вы должны ввести название объекта, в вашем случае width

  • $values: Значения - это, как следует из названия, значения свойства для каждого селектора

  • $child: здесь можно ввести имя ребенка, это необязательно.

  • В скобках {} вы должны написать все свойства, которые вы хотите включить во все $parameters

  • Порядок каждого селектора должен соответствовать порядку их соответствующего значения

Итак, вот пример использования этого миксина для решения вашей проблемы. Это @include: 

@include (".widget-a" ".widget-b", width, 50px 100px, button) {
  background: red;
}

И этот код, который возвращает: 

.widget-a button, .widget-b button {
  background: red; }

.widget-a button {
  width: 50px; }

.widget-b button {
  width: 100px; }

Это еще один способ добиться того же результата: 

@include button(".widget-a .button" ".widget-b .button", width, 50px 100px)  {
  background: red;
}

Скачать миксин здесь

...