使用mixins來改變變量值

我通常對sass很陌生，只是想知道是否可以使用mixins來定義一個新的變量值？使用mixins來改變變量值

我認爲這將是很好的使用變量來定義整個網站，我建設的填充大小。我的想法是，我可以使用混合和媒體查詢來定義一個新值。

一個例子可能更有意義：

$site-padding: 40px; 

@include media-over-767 { 
    $site-padding: 20px; 
}

我認爲這將是超級有用的，但不能讓它的工作...有一個可行的方法？

來源

2017-04-03 CharlyAnderson

即使@JinuKurian已經回答了，我想你應該看看範圍的變量在青菜可以把你的另一路徑上解決這些問題的排序。此外，請參閱[本主題]（http://stackoverflow.com/questions/5469931/sass-variable-default-scope）的答案以獲取有關變量如何工作的更多詳細信息（mixins和scoped變量）。 – Fahrenheit

@mixin site-padding{ 
    $site-padding: 20px; 
} 

@include media-over-767 { 
    @include site-padding; 
}

來源

2017-04-03 20:25:40

網站填充如何轉換爲填充？是否有另一個mixin將其分解爲添加'padding：20px'？我還沒有遇到過這個與sass。 – gwally

填充問題與答案無關，但如果您需要一個mixin，您可以使用它來設置填充，在這裏您可以使用。 @mixin padding-all（$ top，$ right，$ bottom，$ left）{ padding-top：$ top; padding-right：$ right; padding-bottom：$ bottom; padding-left：$ left; } –

謝謝您的澄清和示例。 – gwally

您不能在斷點內設置sass變量。

將這一問題 - https://github.com/sass/sass/issues/1227

你可以簡單地做

$site-padding: 40px; 
$site-padding-sm: 20px; 

@include media-over-767 { 
    padding: $site-padding-sm; 
}

請參閱本太 - Using Sass Variables with CSS3 Media Queries

來源

2017-04-04 03:58:30

我不知道這是否是你尋找什麼，但希望它讓你走上正確的道路。聲明混入：

@mixin site-padding($padding:40px) { 
    padding: $padding; 
}

在這個例子中，我設置了混入site-padding與40px的默認值。

你的SASS會是這個樣子：

.element { 
    // Small screens 
    @include site-padding(20px); 

    // Over 767px 
    @media screen and (min-width: 768px) { 
     // Defaults to 40px. 
     @include site-padding(); 
    } 
}

來源

2017-04-04 04:43:43 disinfor

使用mixins來改變變量值

回答

相關問題