¿Sintaxis con sangría SASS en líneas múltiples?

Question

Me encanta indented syntax de Sass (a diferencia de SCSS, que es un agnóstico de espacio en blanco y usa corchetes y punto y coma). Creo que es mucho más limpio.

Hay un problema que tengo con él. Si tengo una línea muy larga, no hay forma de dividirla en varias líneas (por ejemplo, obedeciendo el límite de 80 caracteres)

Tome este ejemplo de una declaración mixin realmente larga, escrita por primera vez en 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; 
} 

Soy capaz de dividir una larga declaración en varias líneas. Con la sintaxis indentada, no creo que haya una manera. Tengo que poner la declaración en una línea, que es mucho menos legible.

@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 

¿Hay alguna forma que yo no sepa? :(

Answer 1

Multilínea no es compatible con Sass Leyendo el documento, hay una excepción, cuando se trata de múltiples selectores CSS como en este ejemplo:.

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

Leer el documento aquí: http://sass-lang.com/docs/yardoc/file.INDENTED_SYNTAX.html#multiline_selectors

Así que, por desgracia: no hay posibilidad de obtener soporte multilínea para una lista de argumentos en sass.

Answer 2

Primero: no cree mixins con tantos argumentos. Divídalo en muchas mixins pequeñas o inserte algunos argumentos similares como un rrays (Sass tiene mapas de datos para ello).

Segundo: se pueden utilizar variables temporales sólo para legibilidad del código grande.

Por ejemplo:

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

Esto le dará MixIn con todos sus $v# cadenas unidas entre $var.

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

Si alguien conoce mejor manera de unirse a muchas cadenas en una en la sintaxis Sass sangría, voy a estar feliz de saber. Porque escribo degradados complejos y SVG generado en línea con esto.