Question

我正在努力找到变量，以便如何改变基础提供的空心按钮的颜色。

目前我必须通过以下方式覆盖样式：

&.hollow {
   border: 1px solid $clr-primary;
   color: $clr-primary;
}

我喜欢在基础设置文件中进行大部分样式更改，而不是采用这种方法，因此我不必编写超出我需要的CSS。

我是否缺少一个可以在基础设置中应用这些样式的变量？

Answer 1

根据基金会维基，你可以在这里找到变量：

所有Foundation项目都包含一个名为_settings.scss的设置文件。如果您使用CLI创建Foundation for Sites项目，则可以在scss /（基本模板）或src / assets / scss /（ZURB模板）下找到设置文件。如果您使用Bower或npm安装独立框架，那么这些软件包中包含一个设置文件，您可以将其移动到您自己的Sass文件中进行操作。 - http://foundation.zurb.com/sites/docs/sass.html

更改调色板：http://foundation.zurb.com/sites/docs/global.html#changing-the-color-palette

Answer 2

简单阅读ZURB基金会 SCSS Button MIXINS ，详见this page here >>

以下是一些SCSS示例：

div.pagenumber a.pagelink {
	@include button($expand:false, $background:$primary-color, $background-hover:auto, $color:auto, $style:solid);
	font-size: inherit;
	padding: 0.5em;
	margin: 0;
	border-radius: $global-radius;
}

div.pagenumber a.pagelink:hover {
	@include button($expand:false, $background:$primary-color, $background-hover:auto, $color:auto, $style:hollow);
	text-decoration: none;
	font-size: inherit;
	padding: 0.5em;
	margin: 0;
	border-radius: $global-radius;
}

input.cancel {
	@include breakpoint(small) {
		@include button($expand:false, $background:$darkred, $background-hover:$crimson, $color:$white, $style:solid);
		font-size: 0.85rem;
	}
	@include breakpoint(medium) {font-size: 0.95rem;}
	@include breakpoint(large) {font-size: 1rem;}
}

基础 - 更改空心按钮的颜色

2 个答案: