Line-height смешает текст в кнопке, почему?

Код самой примитивной кнопки из моей постоянной практики:

$button-sizes: (
    normal: (
        font-size: 14px,
        height: 32px,
    ),
    medium: (
        font-size: 14px,
        height: 44px,
    ),
    large: (
        font-size: 15px,
        height: 56px,
    ),
);

@function getButtonSize($property, $size) {
  @if map_has_key($button-sizes, $size) {
    $button-size: map_get($button-sizes, $size);
    @if map_has_key($button-size, $property) {
      @return map_get($button-size, $property);
    } @else {
      @warn "Undefined size property: #{$property}";
    }
  } @else {
    @warn "Undefined size: #{$size}";
  }
}

@mixin button-size($size: normal) {
  $font-size: getButtonSize(font-size, $size);
  $height: getButtonSize(height, $size);
  $lines: lines-for-font-size($font-size);
  @include adjust-font-size-to($font-size);
  height: $height;
  $vertical-padding: ($height - $base-line-height - 2) / 2;
  padding-top: $vertical-padding;
  padding-bottom: $vertical-padding;
}

%button {
  background: $brand-dark;
  border: 1px solid $brand-dark;
  color: #ffffff;
  display: inline-block;
  font-family: $font-family-sans-serif;
  font-size: rem(14px);
  font-weight: 400;
  height: 32px;
  line-height: 30px;
  padding: 0 1.5em;
  vertical-align: middle;
  user-select: none;
  border-radius: 2px;
}

.btn {
  @extend %button;
  @include button-size(normal);
}

Если вы думаете, что верстка кнопок - это просто, то вы ошибаетесь =)

Не вводится текст в input="text"?

3. Проблема в формулировке вопросов..

Как комфортно разрабатывать в Windows?

Например, приходится юзать для сборки фронтенда Webpack/Browserify/Gulp.

неудачный пример. фронтэнд прекрасно собирается этими утилитами под виндой

Как в Bootstrap 4 alpha 6 отключить flexbox?

так что юзайте bs3 =D

Как в Bootstrap 4 alpha 6 отключить flexbox?

какие переменные вы искали? миксины-то гляньте - флоат-сетка выпилена совсем.
https://github.com/twbs/bootstrap/blob/v4-dev/scss...

Как убрать отступ между серой плашкой и блоком с фоткой?

кажется настало время узнать какие средства отладки встроены в браузер. Нажмите F12 в хроме, вы удивитесь, сколько там полезной для разработчика информации.

Стоит ли использовать HTML препроцессоры?

стоит. хотя бы попробовать. это прекрасно.

Как установить пакеты с помощью npm (есть ошибки)?

npm ERR! network This is most likely not a problem with npm itself
npm ERR! network and is related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.

Черным по белому написано - проблема не в npm, а с сетью.

Может файрвол не пускает, или прокси, или другие сетевые проблемы.

Почему символы xml заменились тегами в phpstorm?

Happymalina: Шторм ведет историю изменений файлов

Посмотрите, откатитесь.

Есть ли смысл придумывать сложные пароли?

Смысла нет. Везде использую 1234567 и еще никто не взломал.

Как лучше задавать классы/селекторы тегам/стилям?

Alexander: В том смысле, что эту кнопку нужно было переместить и продублировать еще в паре мест.
И все стили тупо перестали работать. Потому что они привязаны длинной цепочкой.

Как менять масштаб страницы на определенном диапозоне ширины?

Вы всё еще верстаете в пикселях? Ну так сам себе злобный буратино =)

Как лучше задавать классы/селекторы тегам/стилям?

Человече, когда тебе на поддержку или доработку достанется код с селекторами типа (а это реальный случай из недавней практики)
.Header .TopArea .MainBox > .Search > .Button {}
ты взвоешь.

Куда исчезли мониторы 5:4?

Adamos: Значит вы не те окошки пооткрывали. Оптимизируйте свое рабочее пространство.

Куда исчезли мониторы 5:4?

Ведь они просто ужасны во всём, кроме просмотра видео

Позвольте не согласиться. широкоформатник крайне удобен для кодинга, когда на нем открыта IDE с кучей боковых панелей и кодовым окном в центре.

Вертикальное позиционирование дочернего элемента с position:relative;top:(some)%, почему не работает?

работают так: берут % от величины контейнера.

так и работают. но величина-то не задана. height - auto

Вертикальное позиционирование дочернего элемента с position:relative;top:(some)%, почему не работает?

Если у элемента не задана высота, то процент от чего брать? =)
Не работают проценты высоты, без явного ее указания родителю.

Не хочу чтобы мне попадалась информация на определённую тему (в новостях, постах, комментариях). Есть какое-то средство?

sim3x: отгораживать себя от реальности - это как-то по-детски

Не хочу чтобы мне попадалась информация на определённую тему (в новостях, постах, комментариях). Есть какое-то средство?

А еще чтоб на улицах было спокойно, гопники не дай бог не попались, или кошелек не стащили, или террористы, или, не дай бог, свидетели иеговы.... =)

Какое-то наивное, я бы даже сказал, инфантильное желание.

Есть ли что-то типа WYSIWYG фреймворка?

https://github.com/tinymce/tinymce
открытый исходный код, поддержка плагинов.
Хочешь исходники перепили, хочешь плагин забабахай.