Сменить бутстрап SASS border-radius (и другие миксины) - Rails

Question

Я использую рельсы gem Bootstrap SASS и задавался вопросом, как я могу перезаписать некоторые из миксинов. В частности, радиус границы и тому подобное.

Я думал, что я мог бы просто переписать это нравится:

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

    @mixin border-radius($radius: 1px) { 
     -webkit-border-radius: $radius; 
     -moz-border-radius: $radius; 
       border-radius: $radius; 
    } 

Но это, кажется, не делают приземистый! Есть идеи?

Bootstrap SASS - Mixins

Answer 1

То есть на самом деле Mixin с аргументом, SASS называет это «Mixin», но это действительно параметрический или динамический Mixin. Но чтобы прояснить ваш вопрос, вы хотите изменить значение по умолчанию радиуса радиуса радиуса границы, или вы хотите сделать это «на лету» по классу? Если вы хотите изменить значение по умолчанию, вы должны сделать это непосредственно в файле Bootstrap mixin.scss.

Но если вы хотите последний, вы просто добавляете mixin в любой класс так же, как вы добавляете свойство, такое как размер шрифта, но затем вы передаете значение, которое вы хотите объявить, каждый раз, когда вы используете 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); 
} 

В LESS это будет выглядеть следующим образом:

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

Answer 2

Если вы хотите перезаписать переменные Bootstrap, вы должны сделать это до импорта. Например.

$baseFontFamily: $serifFontFamily; // Use serif fonts instead of sans-serifs 
@import "bootstrap"; 
@import "bootstrap-responsive"; 

Answer 3

Проверьте сайт Customize and Download на сайте Bootstrap. Список LESS-переменных приведен на странице.

Обычно переменные SASS являются одинаковыми, но с '$' вместо '@'. Для настройки начальной загрузки без необходимости повторно загружать все после изменения одного или двух переменных, которые вы можете вместо этого сделать это в вашем .scss файле:

$border-radius-base: 0; 
@import "bootstrap";