Создайте scss multiple css class *

У меня есть следующие вспомогательные классы css. Итак, мой вопрос: есть ли лучший способ сделать это? или я могу создать такие классы в scss, чтобы сделать его чище и лучше.Создайте scss multiple css class *

Спасибо.

.m-1 { margin: 1px !important; } 
.m-2 { margin: 2px !important } 
.m-3 { margin: 3px !important } 
.m-4 { margin: 4px !important } 
.m-5 { margin: 5px !important } 
.m-6 { margin: 6px !important } 
.m-7 { margin: 7px !important } 
.m-8 { margin: 8px !important } 
.m-9 { margin: 9px !important } 
.m-10 { margin: 10px !important }

источник

2014-02-07 Mahmoud

Хотя это не имеет ничего общего с вопросом: вы должны проверить, если это действительно необходимо использовать 'important'!. Иногда нет простого способа избежать этого, но сначала вы должны попытаться найти способ не использовать его, потому что во многих случаях это вызовет больше проблем, которые он решит, особенно с таким вспомогательным классом. –

Вы что-то пробовали? – cimmanon

@ t.niese23, что не было ответом на мой вопрос. Но все равно спасибо. – Mahmoud

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

@for $i from 1 through 10 { 
    .m-#{$i} { margin: 1px * $i !important; } 
}

источник

2014-02-07 12:52:44

ценят ваше время, вот что я искал. Спасибо – Mahmoud

yep есть возможность увеличить 5 значений во время цикла. вместо того, чтобы увеличивать шаги в 1 шаг 5 5 15 15, как это –

@Vikranth Вы можете использовать математику для цикла, например '@ for $ I от 0 до 3' и умножить на 5, когда это необходимо. Или вы можете использовать '$ I = 0; @while $ I <20 {$ I = $ I + 5; } ' –

Создайте scss multiple css class *

ответ

Смежные вопросы