更改Bootstrap SASS border-radius(和其他mixins) - Rails

Gal*_*axy 2 ruby-on-rails sass twitter-bootstrap

我正在使用rails gem Bootstrap SASS,并且想知道如何覆盖一些mixins.具体地说是边界半径等.

我以为我可以简单地覆盖它:

@import "bootstrap";
@import "bootstrap-responsive";

    @mixin border-radius($radius: 1px) {
      -webkit-border-radius: $radius;
         -moz-border-radius: $radius;
              border-radius: $radius;
    }
Run Code Online (Sandbox Code Playgroud)

但这似乎并没有蹲下!有任何想法吗?

Bootstrap SASS - Mixins

jon*_*ert 6

这实际上是一个带有参数的mixin,SASS称之为"mixin",但它实际上是一个参数或动态混合.但是为了澄清你的问题,你想改变边缘半径mixin radius 的默认值,还是想在逐个类的基础上动态地做?如果您要更改默认值,则应直接在Bootstrap mixin.scss文件中进行更改.

但是如果你想要后者,你只需将mixin添加到任何类,就像添加font-size这样的属性一样,但是每次使用mixin时都要传入你想要声明的值.像这样:

.giant-box {  
   width: 400px;
   height: 400px;
   background-color: #900;
   @include border-radius(20px);  
}

.small-box {  
   width: 10px;
   height: 10px;
   background-color: #900;
   @include border-radius(3px);  
}
Run Code Online (Sandbox Code Playgroud)

在LESS中它看起来像这样:

.giant-box {  
   width: 400px;
   height: 400px;
   background-color: #900;
   .border-radius(20px);  
}
Run Code Online (Sandbox Code Playgroud)