SASS，調用mixin的正確方法是什麼？

我剛開始使用SASS，我試圖找出如何創建一個盒子陰影混入......SASS，調用mixin的正確方法是什麼？

我複製從另一個堆棧溢出後該混入..

@mixin box-shadow($top, $left, $blur, $color, $inset:"") { 

     -webkit-box-shadow:$top $left $blur $color #{$inset}; 
     -moz-box-shadow:$top $left $blur $color #{$inset}; 
     box-shadow:$top $left $blur $color #{$inset}; 
    }

不過我我不知道到底如何格式化我@include

這是我迄今爲止我@include

@include box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);

這是我的輸出錯誤...

error(Line 1003: Invalid CSS after "...lude box-shadow": expected "}", was ": inset 0 1px 1...")

來源

2012-05-03 Kris Hollenbeck

語法錯誤。

使用@include box-shadow(0, 1px, 1px, rgba(0, 0, 0, 0.075), inset);

（2014年編輯，包括更改Sass的語法在過去的幾年中取得）

來源

2012-05-03 16:14:48

剛剛測試過。這對我有用。 –

感謝您的幫助..工作。 –

嘗試了這個例子，它似乎並沒有工作，加上列表中的選項失序。 –

我是新來的無禮和接受的答案沒有工作給我;值的順序看起來不正確，並且每個值之後的值也需要逗號。我用下面的：

@include box-shadow(0, 1px, 1px, rgba(0, 0, 0, 0.075), inset);

來源

2013-07-28 04:48:36 Silverback

謝謝，現在它工作！ – user2952265

這隻會讓你只使用一個陰影。接受的答案允許多個。 – wintercounter

你能舉一個你正在描述的例子嗎？如果您在使用與問題的混入接受的答案給出了支持的語法我收到一個錯誤：密新的box-shadow缺少參數$左右。 – Silverback

-1

對於 'Silverback的' 一個例子將是：

@include box-shadow(inset 0, 1px, 1px, rgba(0, 0, 0, 0.075));

它包括被遺忘的逗號那像素67'的評論。

來源

2014-05-08 20:28:02

我想在技術上你可以使用這個，但我認爲，如果你是按照給定的混入變量順序，你將不得不把「插圖」末（不是說這句法屬於那裏）;它看起來像你可以在4點輸入任何你想要的，它會吐出來，無論： '@include的box-shadow（狗，貓，青蛙，蚊蚋）;' 但你說得對，這是逗號正在使它工作。 – Silverback

我明白你在說什麼，我對SASS也很新鮮，並且真正遵循你的榜樣。另一種在不處理逗號的情況下實現這一點的方式是傳遞不同的觀點。 '@mixin的box-shadow（$影子...）{ -webkit-箱陰影：$影子; -moz-box-shadow：$ shadow; box-shadow：$ shadow; }' '@include箱陰影（0 0 20像素RGBA（$黑，0.8））;' -OR- '@include箱陰影（0像素1像素4像素RGBA（$黑，0.3），0像素0像素40像素RGBA（$黑0.1）插圖）;' 最終就像其他任何一噸的方式做同樣的事情。 –

我想你應該有一些默認設置：

.your-selector { 
    @include box-shadow(); 
}

我：

@mixin box-shadow($left:0, $top:2px, $blur:2px, $color:#000, $inset:"") { 
     -webkit-box-shadow:$left $top $blur $color #{$inset}; 
     -moz-box-shadow:$left $top $blur $color #{$inset}; 
     box-shadow:$left $top $blur $color #{$inset}; 
}

這樣的話，如果你想使用相同的代碼，你不需要每次都設置選項也糾正了選項的順序：水平通常出現在垂直之前。

來源

2014-09-29 11:45:32 nickgeorgiou

在2016年，看起來事情從接受的答案再次改變。 Referecing指南針文檔和examples here，下面將在SCSS文件工作：

@include box-shadow(rgba(0, 0, 0, 0.075)0 0 3px 1px inset);

那個影子是非常微弱的，所以我實際使用：

@include box-shadow(rgba(0, 0, 0, 0.75)0 0 3px 1px inset);

對於多重陰影： 用逗號分隔每個陰影。

@include box-shadow(rgba(0, 0, 0, 0.75)0 0 3px 1px inset, rgba(blue, 0.4) 0 0 5px 5px);

來源

2016-03-16 20:59:01 gabelloyd

沒有人問關於指南針。問題是在嘗試使用混合寫入OP時特別詢問語法錯誤。 – cimmanon

SASS，調用mixin的正確方法是什麼？

回答

相關問題