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;
[...]

所以，元素为或.button永远不会有$ radius为真因为mixin在没有任何参数的情况下被调用，因此默认false被设置。是否有一种我不知道的聪明方式，也许是在SASS，以实现全球化的方式？

Answer 1

将此添加到您的app.scss：

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

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

Answer 2

在SASS中，您可以覆盖默认参数。因此，要为按钮启用border-radius，您应该这样做：

@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);
[...]

按钮的默认border-radius设置为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); }
}
[...]

如果你想改变这个边界半径，基金会建议在_settings.scss文件中取消这些行，并将3px改为所需的值：

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

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

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

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

为按钮设置border-radius的另一种方法是

@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
[...]

我个人推荐第一种保留有组织结构的方法

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

2 个答案: