LESS中可變停止次數的線性漸變？ （或Sass）

Question

下面是我想用Less來抽象的CSS。在這種情況下，有4站。但我還有另一班有10站的班。我怎樣才能使用可變數量的參數？

我在文檔中看到@arguments，但正如您可以注意到的那樣，語法有所不同：有些規則使用一行中的所有參數，其他規則使用成對的方式對其進行分組：color-stop(x%, #y)。

如果你知道Sass的解決方案，建議它，我可以切換到它。

.action { 
    background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* Opera11.10+ */ 
    background: -ms-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* IE10+ */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0); /* IE6-9 */ 
    background: linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* W3C */background: linear-gradient(top, #1e5799 0%,#2989d8 14%,#207cca 84%,#7db9e8 100%); /* W3C */ 
} 

Answer 1

我自己的解決方案，使用改良的file從bourbon項目：

_linear-gradient.scss

@mixin linear-gradient($pos, $G1, $G2: false, 
         $G3: false, $G4: false, 
         $G5: false, $G6: false, 
         $G7: false, $G8: false, 
         $G9: false, $G10: false) { 
    // Detect what type of value exists in $pos 
    $pos-type: type-of(nth($pos, 1)); 

    // If $pos is missing from mixin, reassign vars and add default position 
    @if ($pos-type == color) or (nth($pos, 1) == "transparent") { 
     $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5; 
     $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos; 
     $pos: top; // Default position 
    } 

    $usual:($G1); 
    $webkit: color-stop($G1); 
    @each $g in $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10 { 
     @if $g != false { 
      $usual: $usual + ',' + $g; 
      $webkit: $webkit + ',' + color-stop($g); 
     } 
    } 
    $usual: unquote($usual); 
    $webkit: unquote($webkit); 

    background-color: nth($G1, 1); 
    background: deprecated-webkit-gradient(linear, $usual); // Safari <= 5.0 
    background: -webkit-gradient(linear, $pos, $webkit); // Safari 5.1+, Chrome 
    background: -webkit-linear-gradient($pos, $usual); // Safari 5.1+, Chrome 
    background: -moz-linear-gradient($pos, $usual); 
    background: -ms-linear-gradient($pos, $usual); 
    background: -o-linear-gradient($pos, $usual); 
    background: linear-gradient($pos, $usual); 
} 

使用（screen.sass）：

@import linear-gradient 
button.action 
    +linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%) 

如何配置薩斯與django-compressor：

STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder', 
    'django.contrib.staticfiles.finders.AppDirectoriesFinder', 
# 'django.contrib.staticfiles.finders.DefaultStorageFinder', 
    'compressor.finders.CompressorFinder', 
) 

INSTALLED_APPS = (
    ... 
    'compressor', 
) 

COMPRESS = True 
COMPRESS_PRECOMPILERS = (
    ('text/sass', 'sass {infile} {outfile}'), 
) 
COMPILER_FORMATS = { 
    '.sass': { 
     'binary_path': 'sass', 
     'arguments': '*.sass *.css'}, 
} 

模板：

{% load compress %} 
{% compress css %} 
<link href="{{ STATIC_URL }}css/screen.sass" rel="stylesheet" type="text/sass" media="screen,projection"/> 
{% endcompress %}