В вашем вопросе вы не учли самый главный нюанс, все зависть от дизайна приложения, если все делать по канонам, то есть сначала сделать ui guide всех элементов что нарисовал дизайнер, смотря на гайд можно сразу понимать все отступы и все размеры кнопок и сразу разметить нужные модификаторы для кнопок, а потом только использовать по мере надобности!
Смотря с какой стороны посмотреть, конечно лучше сразу учесть отступы и размеры кнопок задавать с помощью модификаторов, также я рекомендую забыть про px а использовать глобально rem и если надо локально то em!
Вот смотри с одного из проектов:
.button {
&--sm {
height: $btn-size-sm;
padding: 0 rem(20);
font-size: $btn-size-sm-fn;
line-height: $btn-size-sm - rem(2);
}
&--xs {
height: $btn-size-xs;
padding: 0 rem(20);
font-size: $btn-size-xs-fn;
line-height: $btn-size-xs - rem(2);
}
&--full {
width: 100% !important;
}
&--s150 {
min-width: rem(150) !important;
}
&--s220 {
width: rem(220) !important;
}
Почему rem или em, потому что они еще позволяют легко менять пропорции если это надо к примеру на маленьких экранах не все влезло:
html {
font-family: $font-family-primary;
font-size: 16px;
font-weight: normal;
text-align: left;
line-height: normal;
letter-spacing: normal;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
@media (max-width: 992px) {
font-size: 15px;
}
@media (max-width: 760px) {
font-size: 14px;
}
@media (max-width: 380px) {
font-size: 13px;
}
}
Простой
