1.2 KiB
1.2 KiB
title | localeTitle |
---|---|
Create Reusable CSS with Mixins | 使用Mixins创建可重用的CSS |
使用Mixins创建可重用的CSS
Mixin
是开发人员使用SASS
而不是纯CSS
的强大功能之一,因为它允许您在样式表中使用Function
!
要创建mixin,您应该遵循以下方案:
@mixin custom-mixin-name($param1, $param2, ....) {
// CSS Properties Here...
}
要在元素中使用它,您应该使用@include
后跟您的Mixin
名称,如下所示:
element {
@include custom-mixin-name(value1, value2, ....);
}
[示例]在SASS
写入Text Shadow
**目标:**将自定义Text Shadow
应用于h4
元素
HTML
<h4>This text needs a Shadow!</h4>
SASS (用SCSS语法编写)
@mixin custom-text-shadow($offsetX, $offsetY, $blurRadius, $color) {
-webkit-text-shadow: $offsetX, $offsetY, $blurRadius, $color;
-moz-text-shadow: $offsetX, $offsetY, $blurRadius, $color;
-ms-text-shadow: $offsetX, $offsetY, $blurRadius, $color;
text-shadow: $offsetX, $offsetY, $blurRadius, $color;
}
h2 {
@include custom-text-shadow(1px, 3px, 5px, #999999)
}