Как создать SASS, чтобы классы с одинаковым CSS объявлялись вместе с запятыми?

Рассмотрим SASS ниже.

@for $i from 1 through 5 {
.col-#{$i} {
position: relative;
}
}

Он компилируется в следующий CSS.

.col-1 {
  position: relative;
}

.col-2 {
  position: relative;
}

.col-3 {
  position: relative;
}

.col-4 {
  position: relative;
}

.col-5 {
  position: relative;
}

Но хотелось бы, чтобы он так компилировался.

.col-1,
.col-2,
.col-3,
.col-4,
.col-5 {
  position: relative;
}

Как это может быть сделано? Я чувствую, что он должен стать тем, что мне нужно, с немного другим синтаксисом, но я не могу этого понять. Кто-нибудь может помочь?

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
3
0
50
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете использовать @extend, чтобы делать то, что хотите:

%relative {
  position: relative;
}

@for $i from 1 through 5 {
  .col-#{$i} {
    @extend %relative;
  }
}

Ты получишь :

.col-5, .col-4, .col-3, .col-2, .col-1 {
  position: relative;
}

Здесь - это объяснение того, как работает @extend. Символ % предназначен для placeholder selectors, он полезен, если вы не хотите, чтобы расширенный селектор (здесь %relative) отображался в вашем CSS.

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

happy 25.08.2018 12:08

@happy Нет проблем, я рад, что смог помочь. ^^

Arkellys 25.08.2018 12:13

Другие вопросы по теме