выход Странный SASS при использовании расширяет

Question

У меня есть следующие файлы SASS

_android.scss:

$width: 111px; 
@import 'child'; 

.android .child { 
    @extend %child; 
} 

_ios.scss:

$width: 999px; 
@import 'child'; 

.ios .child { 
    @extend %child; 
} 

_child.scss:

%child { 
    width: $width; 
} 

app.scss:

@import 'ios'; 
@import 'android'; 

Теперь, когда я бегу дерзость я получаю:

$> sass app.scss 
.ios .child, .android .child { 
    width: 999px; } 

.ios .child, .android .child { 
    width: 111px; } 

Не совсем то, что я ожидал, что

.ios .child { 
    width: 999px; 
} 

.android .child { 
    width: 111px; 
} 

Что это то, что я делаю неправильно здесь?

Answer 1

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

Давайте пошагово, что происходит:

1. ios.sass загружен, это устанавливает $width и включает в себя %child
2. дерзость встречает заполнитель из-за включает в себя, поэтому он просматривает код, получить годов все экземпляры этого заполнителя, группируют селекторы и используют текущее значение ширины.
3. загружен следующий android.sass, $width установлен на новое значение и включен %child.
4. sass повторяет шаг 2. Каждый раз, когда встречается @extends, все экземпляры его группируются и выводятся со значениями в заполнителе.

Вот почему, когда вы смотрите на выход, вы видите сгруппированные обе селекторы, и эта группа повторяется дважды с каждым из определенных значений $width.

Что нужно сделать, чтобы исправить это

Mixin лучше здесь. Когда встречается миксин, он оценивается на месте, и полученный набор свойств вводится в селектор.

@mixin width($width-in: 1000px) { 
    width: $width-in; 
} 

.ios .child { 
    @include width(111px); 
} 

.android .child { 
    @include width(999px); 
} 

Теперь давайте пошагово подмешать например

1. Mixin загружен, дерзость знает об этом, но ничего не делать с ним - думать об этом как функция ждет, чтобы называться
2. ios.sass загружается и задается селектор
3. sass видит вызов mixin с параметром, поэтому он принимает параметр, использует mixin и вводит возвращаемое значение ширины в селектор
4. загружен android.sass ..
5. sass видит еще один вызов mixin и повторяет процесс, вводя новое значение ширины в новый селектор.

PS в моем определении подмешать я использую значение по умолчанию 1000px, который будет использоваться, если @include width(); называется.