Адаптивный шрифт css

Question

Нашел интересную статью https://habr.com/ru/post/501392/

Никогда не сталкивался с scss и не понимаю как им пользоваться Необходимо создать файл style.scss и подключить его как обычные стили?

К примеру, прописываю в scss

$maxWidth: 1280;
@mixin adaptiv-font($pcSize, $mobSize) {
    $addSize: $pcSize - $mobSize;
    $maxWidth: $maxWidth - 320;
    font-size: calc(#{$mobSize + px} + #{$addSize} * ((100vw - 320px) / #{$maxWidth}));
}

Как я могу обратиться к ней из css файла и в целом, если такое отличие. Что лучше css или scss?

Возможно я ошибаюсь, что не так это мое предположение, все время работал с css...

Answer 1

scss - это надстройка над css, позволяющая в какой-то степени программировать стиля, а не просто задавать их. Использовать переменные, оптимизировать синтаксис, и все такое.
подключать .scss файл напрямую как стиля нельзя. scss с помощью программы-препроцессора компилируется в css - либо локально на компьютере, либо "на лету" на сервере. но и в том и в этом случаях браузер получает скомпилированный css.
скомпилированный css не обязательно будет оптимальнее самописного. к тому же добавляется трудность при отладке - порой непросто бывает понять, в каком месте scss нужно править, глядя на css-свойство в веб-инспекторе.
грубо говоря, scss - это исходник для css.
а есть и другие препроцессоры, например, less...

и вообще, все давно отвечено https://stackoverflow.com/questions/5654447/whats-the-difference-between-scss-and-sass/51423768#51423768 =)

БЛОГ НА HUSL

Адаптивный шрифт css

Ответы (1 шт):