2011-11-23 15 views
5

I love Sass's indented syntax (in contrapposizione a SCSS, che è agnostico di spazi vuoti e usa parentesi e punti e virgola). Penso che sia molto più pulito.Sintassi rientrata SASS su più righe?

C'è un problema che ho con esso. Se ho una linea molto lunga, non c'è modo di dividerla in più righe (per esempio, rispettare il limite di 80 caratteri)

Prendi questo esempio di una dichiarazione di mixin molto lunga, scritta per la prima volta in 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; 
} 

Sono in grado di dividere una dichiarazione lunga in più righe. Con la sintassi indentata, non penso ci sia un modo. Devo mettere la dichiarazione su una riga, che è molto meno leggibile.

@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 

C'è qualche modo io non conosco? :(

+0

http://stackoverflow.com/questions/2389797/is-there-a-multiline-in-sass è contrassegnato come duplicato, ma ha una risposta migliore. Riassumendo: non c'è una multilinea in Sass, c'è però una multilinea in SCSS. Vedi anche https://github.com/sass/sass/issues/216. Gli utenti di –

risposta

3

multilinea non è supportata dal sass Leggendo il documento, v'è una sola eccezione, quando si tratta di più selettori CSS come in questo esempio:.

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

Leggi il documento qui: http://sass-lang.com/docs/yardoc/file.INDENTED_SYNTAX.html#multiline_selectors

così, purtroppo: non c'è possibilità di ottenere il supporto multi-linea per una lista di argomenti a sass

+0

provenienti da [stylus] (http://stylus-lang.com/) si guardano bene: a differenza dello stilo, la riga 1 ha bisogno di una virgola finale, altrimenti si ottiene un errore silenzioso (ovvero una linea inutile) –

0

primo:. non creare mixins con tanti argomenti Dividerlo a molte piccole mixins o inserire alcuni argomenti simili a quelli. un rrays (Sass ha mappe dei dati per questo).

Secondo: è possibile utilizzare variabili temporanee solo per la leggibilità del codice di grandi dimensioni.

Ad esempio:

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

Questo ti porterà MixIn con tutti i tuoi $v# stringhe uniti ad una $var.

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

Se qualcuno conosce il modo migliore per unire molte stringhe in una sola nella sintassi frastagliata Sass, sarò felice di sapere. Perché scrivo gradienti complessi e SVG generato in linea con questo.

Problemi correlati