SCSS轉換屬性覆蓋

Question

我使用@mixin爲元素添加不同的轉換屬性。比方說，我有這個在我的.scss：

@mixin transition($prop, $sec){ 
    -webkit-transition: $prop $sec; 
    -moz-transition: $prop $sec; 
    -ms-transition: $prop $sec; 
    -o-transition: $prop $sec; 
    transition: $prop $sec; 
} 

然後我打電話：

.sample{ 
    @include transition(background-color, 0.2s); 
    @include transition(margin, 0.3s) 
} 

。樣品也只拿到了保證金的過渡，但我也想背景顏色過渡：有沒有簡單的方法讓它工作？

重要的是，我有不同的呼叫

Answer 1

SASS沒有辦法連接正確領帶，我不知道是否存在一個CSS外部工具來完成這項任務。創建Sass是爲了提高CSS功能，而不是讓程序員開發不好的編程實踐。我不知道創建多個CSS聲明語句的目的，因爲您可以將它們全部保存在一個語句中。將所有轉換保留在一個聲明中可以顯着改善您的結構，工作流程和Sass代碼的性能。

好吧，這就是說，正如你之前提到的「讓可怕的混合物成爲」一樣。

這裏有兩個不同的mixin，一個用於縮寫過渡聲明，另一個用於長表單，它們在處理和加載時間上的差異可以忽略不計，唯一明顯的區別在於代碼的風格。

龍形式混入

@mixin transition($properties, $durations, $timing-function: null, $delay: null) { 
    $declarations: (property, $properties), 
       (duration, $durations), 
       (timing-function, $timing-function), 
       (delay, $delay); 

    @each $declaration in $declarations { 
    @if nth($declaration, 2) { 
     $output:(); 
     @each $val in nth($declaration, 2) { 
      $output: append($output, $val, comma); 
     } 
     @each $prefix in '-webkit-', '-moz-', '-ms-', '-o-', '' { 
     #{$prefix}transition-#{nth($declaration, 1)}: $output; 
     } 
    } 
    } 
} 

它類似於@LeBen混入，但你可以用用逗號分隔的參數包括不帶引號：

@include transition(background-color margin, 0.2s 0.3s); 

---

簡寫形式

@mixin transition($declarations...) { 
    @each $prefix in '-webkit-', '-moz-', '-ms-', '-o-', '' { 
    #{$prefix}transition: $declarations; 
    } 
} 

下面就來實現它在你的代碼

@include transition(background-color 0.2s, margin 0.3s); 

而現在，要解決「不同的呼叫」對付他們的唯一方法您的問題的方式，在我看來，使用append()列表功能。

讓我們來看看例子。我將使用簡寫混合形式，因爲它更容易實現。

試想一下，你有四頁，三個諧音（_variables.scss，_page1.scss，_page2.scss，_page3.scss）和style.scss文件其中進口其他：

_VARIABLES.SCSS

// Here comes the variable declaration 
$transition-list: color 1s; 

_PAGE1。 SCSS

// Using append($list, $val, $separator:auto) list function 
// we can add some items to $transition-list 
$transition-list: append($transition-list, margin 2s, comma); 

_PAGE2.SCSS

// You can add also the output of a function 
@function example(){ 
    @return unquote("background-color 1s") 
} 

$transition-list: append($transition-list, example(), comma); 

STYLE.SCSS

// You can add new values into the same page 
$transition-list: append($transition-list, padding 4s, comma); 

$transition-list: append($transition-list, border 10s, comma); 

// And finally you only need to use the include to generate the final transition 
example { 
    @include transition($transition-list); 
} 

正如我以前說過的，我不建議使用這種方法，這不是一個好實踐。

Answer 2

這裏是混入你可以使用：

@mixin transition($properties, $durations, $timing-function: null, $delay: null) { 
    $props: unquote($properties); 
    $durs: unquote($durations); 

    -webkit-transition-property: $props; 
    -moz-transition-property: $props; 
     -ms-transition-property: $props; 
     -o-transition-property: $props; 
      transition-property: $props; 

    -webkit-transition-duration: $durs; 
    -moz-transition-duration: $durs; 
     -ms-transition-duration: $durs; 
     -o-transition-duration: $durs; 
      transition-duration: $durs; 

    @if ($timing-function) { 
    -webkit-transition-timing-function: $timing-function; 
     -moz-transition-timing-function: $timing-function; 
     -ms-transition-timing-function: $timing-function; 
     -o-transition-timing-function: $timing-function; 
      transition-timing-function: $timing-function; 
    } 

    @if ($delay) { 
    -webkit-transition-delay: $delay; 
     -moz-transition-delay: $delay; 
     -ms-transition-delay: $delay; 
     -o-transition-delay: $delay; 
      transition-delay: $delay; 
    } 
} 

通過以下調用

@include transition("background-color, margin", 0.2s); 

Answer 3

你的mixin是過於僵化，不感覺像自然CSS。就我個人而言，我建議使用mixins provided by Compass，尤其是因爲它也應該處理前綴值。如果你只是想要一個簡單的混入，要使用可變參數，像這樣：

@mixin transition($values...) { 
    -webkit-transition: $values; 
    // other prefixes 
    transition: $values; 
} 

@mixin transition-property($values...) { 
    -webkit-transition-property: $values; 
    // other prefixes 
    transition-property: $values; 
} 
@mixin transition-delay($values...) { 
    -webkit-transition-delay: $values; 
    // other prefixes 
    transition-delay: $values; 
} 

// etc 

.foo { 
    @include transition(background-color, margin); // or transition-property 
    @include transition-delay(0.2s); 
} 

輸出：

.foo { 
    -webkit-transition: background-color, margin; 
    transition: background-color, margin; 
    -webkit-transition-delay: 0.2s; 
    transition-delay: 0.2s; 
} 

替代用法：

.foo { 
    @include transition(background-color 0.2s, margin 0.3s); 
} 

輸出：

.foo { 
    -webkit-transition: background-color 0.2s, margin 0.3s; 
    transition: background-color 0.2s, margin 0.3s; 
}