SASS çoklu satırlarda sözdizimsel sözdizimi?

Question

Sass'ın indented syntax'unu (boş alan algılaması olan ve parantez ve noktalı virgüller kullanan SCSS'nin aksine) seviyorum. Bence daha temiz.

İçinde bir sorun var. Çok uzun bir satırım varsa, onu birden çok satıra ayırmanın bir yolu yoktur (örneğin, 80 karakter sınırına uymak)

Bu, SCSS'de ilk kez yazılmış çok uzun bir karışım bildirimi örneğini alın.

@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; 
} 

Uzun bir bildirimi birden çok satıra bölebiliyorum. Girintili sözdizimi ile, bir yolu olduğunu sanmıyorum. Bildirimi bir satır üzerine koymam gerekiyor, bu da daha az okunabilir.

@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 

Bilmememin bir yolu var mı? :(

Answer 1

satırlı sass tarafından desteklenmeyen doc okuma, bir istisna vardır, bu örnekte olduğu gibi birden css seçicileri gelince:. http://sass-lang.com/docs/yardoc/file.INDENTED_SYNTAX.html#multiline_selectors

:

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

burada doc Oku

Yani, ne yazık ki: sass bir argüman listesi için çok hatlı destek almak için ihtimali yoktur

Answer 2

İlk:.. birçok küçük Mixins onu bölün kadar çok argümanlarla katmalar oluşturmak veya bazı benzer argümanları sokmayın bir röntgenler (Sass bunun için veri haritalarına sahiptir).

İkincisi: Yalnızca büyük kodunuzun okunabilirliği için geçici değişkenleri kullanabilirsiniz. Örneğin

:

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

Bu, tüm $v# dizeleri ile mixin alacak birine $var katıldı. Birisi girintili Sass sözdiziminde içine birçok dizeleri katılmak için iyi bir yol bilen varsa

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

, bilmek mutlu olacak. Çünkü karmaşık gradyanlar yazdım ve bu satır içi satır içi SVG oluşturdum.