来自 Alex King,您可以使用变量来表示选择器
$a-tags: 'a, a:active, a:hover, a:visited';
$a-tags-hover: 'a:active, a:hover';
#{$a-tags} {
color: red;
text-decoration: none;
}
#{$a-tags-hover} {
color: blue;
}
您甚至可以像这样嵌套,这使得它更加有用
.module {
#{$a-tags} {
color: blue;
text-decoration: none;
}
}
来自 Reggie Dawson,您也可以创建一个 @mixin 来构建您的内容。请注意,这些链接伪样式通常非常适合嵌套。
@mixin linx ($link, $visit, $hover, $active) {
a {
color: $link;
&:visited {
color: $visit;
}
&:hover {
color: $hover;
}
&:active {
color: $active;
}
}
}
Compass 附加组件 提供 一个 mixin
@include link-colors(#00c, #0cc, #c0c, #ccc, #cc0);
太棒了,谢谢。
它变得越来越好。我马上把它添加到我的 Bootstrap Sass 脚本中。
很棒的东西!
谢谢!我将在我的自由职业者客户 WordPress 网站上使用这种技术来设置锚点标签的样式。这似乎是最简单的方法。
对于感兴趣的人,我使用的是 WP-SCSS WordPress 插件 (https://wordpress.org/plugins/wp-scss/) 将我的 SCSS 文件转换为 CSS,而无需使用 Ruby SASS gem。
我也使用类似的东西。我在每个颜色中添加了默认值,因为在大多数情况下它将是相同的颜色。我想找到一种方法来在混合中切换文本装饰的开闭,但我不是 Sass 专家…… 还没有!我希望我能找到一种方法来提供两种默认颜色选择,这样我就可以切换是否是在深色或浅色背景上。
你可以!
https://robots.thoughtbot.com/controlling-color-with-sass-color-functions
您可以设置在颜色阈值之上/之下使用新的文本颜色!
https://robots.thoughtbot.com/controlling-color-with-sass-color-functions
可能需要添加“a:link”。
应该注意的是,第一个解决方案应该嵌套。如果您使用类似这样的选择器
.nav #{$a-tags}
结果选择器将是
.nav a, a:active, a:hover, a:visited {
}
这可能不是用户想要的结果。将选择器嵌套起来,如下所示
.nav{
#{$a-tags} {
}
}
结果将是以下 CSS
.nav a, .nav a:active, .nav a:hover, .nav a:visited{
}
熟悉 SCSS 的人可能会理解这些细微差别,但这篇文章是为了帮助新的 SCSS 用户。