基础 5：全局启用按钮半径（半径）

Question

buttons 组件有这个 mixin，@mixin button-style($bg:$primary-color, $radius:false, $disabled:false) 被这样引用：

@include exports("button") {
  @if $include-html-button-classes {

    // Default styles applied outside of media query
    button, .button {
      @include button-base;
      @include button-size;
      @include button-style;
[...]

所以，元素是 or .button 永远不会有 $radius true 因为 mixin 是在没有任何参数的情况下调用的，因此设置了默认的false。 是否有一种我不知道的智能方法（也许在 SASS 中）可以在全球范围内启用它？

Answer 1

在 SASS 中，您可以覆盖默认参数。所以要为按钮启用边框半径，你应该这样做：

@include exports("button") {
  @if $include-html-button-classes {

    // Default styles applied outside of media query
    button, .button {
      @include button-base;
      @include button-size;
      @include button-style($radius: true);
[...]

按钮的默认边框半径设置为 3px

//_buttons.scss

[...]
// We can control how much button radius us used.
@if $radius == true { @include radius($button-radius); }  //$button-radius = $global-radius = 3px
@else if $radius { @include radius($radius); }
}
[...]

如果您想更改此边框半径，Foundation 建议取消注释 _settings.scss 文件中的这些行并将 3px 更改为所需的值：

// Line 61
// $global-radius: 3px;

// Line 236
// $button-radius: $global-radius;

或者，如果您想为 $button-radius 设置一个不同于 $global-radius 的值（例如 5px），您只需更改 _settings.scss 这个：

// Line 236
// $button-radius: 5px

另一种设置按钮边框半径的方法是

@include exports("button") {
  @if $include-html-button-classes {

    // Default styles applied outside of media query
    button, .button {
      @include button-base;
      @include button-size;
      @include button-style($radius: 5px); // Replace 5px by the size that you want
[...]

我个人推荐第一种方法来维持有组织的结构

Answer 2

将此添加到您的app.scss：

button, .button {
    @include button($radius:true);
}

它将使用_button.scss的mixin修改按钮输入和类。