SASS с отступом синтаксиса на нескольких строках?

Question

Мне нравится синтаксис Sass с отступом (в отличие от SCSS, который не зависит от пробелов и использует скобки и точки с запятой). Я думаю, что это намного чище.

У меня есть одна проблема. Если у меня действительно длинная строка, я не могу разбить ее на несколько строк (например, соблюдая ограничение в 80 символов)

Возьмите этот пример действительно длинного объявления mixin, впервые написанного на SCSS.

@mixin col($cols, $mleft: 0, $mright: 0, $include-margin: false, $border: 0,
           $pleft: 0, $pright: 0, $include-padding: true, $extra: 0, 
           $clear: false, $lead: true, $container: false) {
    color: red;
    display: block;
}

Я могу разбить одно длинное объявление на несколько строк. С отступным синтаксисом я не думаю, что есть выход. Я должен поместить объявление в одну строку, которая менее читаема.

@mixin col($cols, $mleft: 0, $mright: 0, $include-margin: false, $border: 0, $pleft: 0, $pright: 0, $include-padding: true, $extra: 0, $clear: false, $lead: true, $container: false)
    color: red
    display: block

Есть какой-то способ, о котором я не знаю? (

Answer 1

Multiline не поддерживается sass. Читая документ, есть одно исключение, когда дело доходит до нескольких селекторов CSS, как в этом примере:

.users #userTab,
.posts #postTab
  width: 100px
  height: 30px

Прочитайте документ здесь: http://sass -lang.com / docs / yardoc / file.INDENTED_SYNTAX.html # multiline_selectors

Итак, к сожалению: нет возможности получить многострочную поддержку списка аргументов в sass.

Answer 2

Первое: не создавайте миксины с таким количеством аргументов. Разделите его на множество небольших миксинов или вставьте несколько похожих аргументов в виде массивов (для Sass имеются карты данных).

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

Например:

=mixin($argument)
    body::before
        content: $argument
$v1: 'foo-'
$v2: 'bar-'
$v3: 'baz.'
$var: $v1+$v2+$v3
+mixin($var)

Это позволит вам смешать все ваши строки $v#, соединенные в одну $var.

body::before {
    content: 'foo-bar-baz';
}

Если кто-то знает лучший способ объединить множество строк в одну с отступным синтаксисом Sass, я буду рад узнать. Потому что я пишу сложные градиенты и встроенный SVG с этим.