CSS препроцессоры - Sass против LESS

1. Что такое препроцессор CSS?
2. Sass Vs LESS
3. Установка и настройка
4. пререкаться
5. МЕНЬШЕ
6. Редактор кода - Подсветка синтаксиса
7. переменные
8. Пример Sass Font
9. CSS-вывод
10. Пример цвета LESS
11. CSS-вывод
12. Примеси
13. Пример Sass Border Radius
14. CSS-вывод
15. Пример свойства LESS Border
16. CSS-вывод
17. гнездование
18. пререкаться
19. CSS-вывод
20. МЕНЬШЕ
21. CSS-вывод
22. Импортировать
23. пререкаться
24. МЕНЬШЕ
25. простираться
26. пререкаться
27. CSS-вывод
28. МЕНЬШЕ
29. CSS-вывод
30. операции
31. Пример расчета Sass Grid
32. CSS-вывод
33. Пример LESS Square Root
34. CSS-вывод
35. Активное развитие
36. Резюме

Брайан Джексон

Обновлено 6 июня 2017 г.

Сегодня на рынке есть три основных CSS-препроцессора: пререкаться , МЕНЬШЕ , а также стилус , В этом посте мы будем сравнивать два препроцессора, которые наиболее широко используются разработчиками, Sass и LESS . Переключение на препроцессор может помочь упростить процесс разработки.

Что такое препроцессор CSS?

Написание CSS может стать довольно повторяющимся, и небольшие задачи, такие как поиск значений шестнадцатеричного цвета, закрытие тегов и т. Д., Могут занять много времени. И вот где препроцессор вступает в игру. Препроцессор CSS - это в основном язык сценариев, который расширяет CSS, а затем компилирует его в обычный CSS .

Эшли Нолан опросила разработчиков в недавнем тематическом исследовании, чтобы узнать, какие препроцессоры они предпочитают. За Sass проголосовало 689 человек, в то время как LESS получил 140 голосов.

Источник: Опрос 2015 года от ashleynolan.co.uk Отказ от ответственности: это всего лишь ответы от небольшой части разработчиков.

И если мы посмотрим на Google Trends для «Sass» (язык программирования) и «LESS» (язык программирования), то окажется, что с Sass намного больше активности.

Источник: Google Trends

Как только вы освоите CSS, у препроцессора будет много преимуществ. Один из самых больших, вероятно, не нужно повторяться. Другими словами, это делает ваш CSS Dry ,

Вот некоторые другие преимущества.

1. Более чистый код с повторно используемыми частями и переменными
2. Экономит ваше время
3. Проще поддерживать код с помощью фрагментов и библиотек
4. Расчеты и логика
5. Более организованный и простой в настройке

Sass Vs LESS

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

Установка и настройка

Существует несколько способов установки и запуска с препроцессором. Вы можете использовать стороннее приложение или установить его из командной строки.

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

Источник: Prepros

Возможно, вам удобнее с CLI, так что вот как установить Sass и LESS.

пререкаться

Чтобы запустить Sass, вам нужно установить Ruby . В более новых версиях Linux и OSX Ruby уже поставляется с предустановленной версией. Вы можете установить Sass с помощью следующей команды. sudo gem установить sass

Есть и другие библиотеки, такие как libSass которые теперь приносят Sass в NodeJS, без необходимости в Ruby.

На Windows вам нужно будет сначала установить Ruby , Если вы работаете на Mac, Ruby уже поставляется с предустановленной версией.

1. Откройте свой терминал или командную строку
2. Установить Sass sudo gem установить sass

МЕНЬШЕ

LESS написан на JavaScript, поэтому вам понадобится NodeJS для его запуска.

1. В Linux и Mac вы можете установить его с помощью следующей команды. npm установить -g меньше
2. Затем вы можете использовать эту команду для компиляции в CSS. lessc styles.less styles.css

В Windows вам нужно будет установить Установщик NodeJS ,

1. Откройте вашу командную строку
2. Запустите npm install less
3. Затем вы можете использовать эту команду для компиляции в CSS. lessc styles.less styles.css

Редактор кода - Подсветка синтаксиса

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

Источник: GitHub

Есть также другие популярные сторонние фреймворки, которые вы можете использовать вместе с препроцессорами, такие как Компас а также бурбон ,

переменные

С препроцессорами у вас есть преимущество перед традиционным CSS, потому что вы можете использовать переменные. Вы можете хранить такие вещи, как цвета, шрифты или почти любые значения, которые вы хотите использовать позже. Смотрите примеры ниже.

Пример Sass Font

$ font-stack: Helvetica, без засечек; $ основной цвет: # 333; body {font: 100% $ font-stack; цвет: $ основной цвет; }

CSS-вывод

body {font: 100% Helvetica, без засечек; цвет: # 333; }

Пример цвета LESS

@ красиво-синий: # 5B83AD; @ светло-синий: @ красиво-синий + # 111; #header {color: @ light-blue; }

CSS-вывод

#header {color: # 6c94be; }

Примеси

Миксины используются для объединения нескольких свойств или групповых объявлений.

Пример Sass Border Radius

В Sass вы используете @mixin

@mixin border-radius ($ radius) {-webkit-border-radius: $ радиус; -moz-border-radius: $ радиус; -ms-border-radius: $ радиус; border-radius: $ радиус; } .box {@include border-radius (10px); }

CSS-вывод

.box {-webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; радиус границы: 10 пикселей; }

Пример свойства LESS Border

.bordered {border-top: пунктирный 1px черный; граница снизу: сплошная 2px черная; } # menu a {color: # 111; .bordered; } .post a {color: red; .bordered; }

CSS-вывод

# menu a {color: # 111; граница сверху: пунктирная 1px черная; граница снизу: сплошная 2px черная; } .post a {color: red; граница сверху: пунктирная 1px черная; граница снизу: сплошная 2px черная; }

гнездование

Вложенность является огромным преимуществом по сравнению с CSS, поскольку она создает визуальную иерархию, аналогичную той, которая используется в HTML. В примерах вы можете видеть, как требуется меньшее количество повторений классов или элементов div, поскольку в настоящее время используется каскадный подход.

пререкаться

nav {ul {margin: 0; отступы: 0; стиль списка: нет; } li {display: inline-block; } {display: block; обивка: 6px 12px; текстовое оформление: нет; }}

CSS-вывод

nav ul {margin: 0; отступы: 0; стиль списка: нет; } nav li {display: inline-block; } перейти к {display: block; обивка: 6px 12px; текстовое оформление: нет; }

МЕНЬШЕ

#header {color: black; .navigation {font-size: 12px; } .logo {ширина: 300 пикселей; }}

CSS-вывод

#header {color: black; } #header .navigation {font-size: 12px; } #header .logo {width: 300px; }

Импортировать

Стандартный CSS @import позволяет разбивать на несколько файлов. Проблема в том, что он создает дополнительные HTTP-запросы. Sass and Less работают немного по-другому. Вместо создания другого HTTP-запроса они объединяют файлы в один. Похоже на конкатенацию.

пререкаться

Пусть говорит, что у вас есть файл с именем _sheet1.scss. В вашем base.scss вы можете включить его в начало, используя следующее: @import 'sheet1'; Там нет необходимости иметь расширение.

МЕНЬШЕ

// Переменные @themes: "../../src/themes"; // Использование @import "@ {themes} /tidal-wave.less";

простираться

Это еще одна мощная функция. Это позволяет вам делиться свойствами от одного селектора к другому.

пререкаться

В Sass вы используете @extend

.message {border: 1px solid #ccc; отступы: 10 пикселей; цвет: # 333; } .success {@extend .message; цвет границы: зеленый; } .error {@extend .message; цвет рамки: красный; } .warning {@extend .message; цвет бордюра: желтый; }

CSS-вывод

.message, .success, .error, .warning {border: 1px solid #cccccc; отступы: 10 пикселей; цвет: # 333; } .success {border-color: green; } .error {border-color: red; } .warning {border-color: yellow; }

МЕНЬШЕ

В LESS вы используете: расширить

nav ul {&: extend (.inline); фон: синий; } .inline {цвет: красный; }

CSS-вывод

nav ul {фон: синий; } .inline, nav ul {цвет: красный; }

операции

В отличие от CSS, вы можете выполнять все виды операций как в Sass, так и в LESS.

Пример расчета Sass Grid

.container {ширина: 100%; } article [role = "main"] {float: left; ширина: 600px / 960px * 100%; } aside [role = "бесплатно"] {float: right; ширина: 300px / 960px * 100%; }

CSS-вывод

.container {ширина: 100%; } article [role = "main"] {float: left; ширина: 62,5%; } aside [role = "бесплатно"] {float: right; ширина: 31,25%; }

Пример LESS Square Root

SQRT (18,6%)

CSS-вывод

4,312771730569565%;

Это лишь некоторые из преимуществ, которые вы получаете от использования препроцессора. Примечание: большинство приведенных выше примеров были взяты из официального пререкаться а также МЕНЬШЕ документация.

Активное развитие

И Sass, и LESS довольно активны на GitHub, вы можете увидеть некоторые из недавних действий ниже.

GitHub активность Sass Less # открытых вопросов 138 208 Количество ожидающих запросов 11 8 Количество коммитов за последние 30 дней 29 12

Резюме

Как вы можете видеть, препроцессоры CSS очень мощные и могут помочь упростить процесс разработки, особенно если вы пришли из опыта программирования. Хотя кажется, что Sass более широко используется, на самом деле нет препроцессора, который лучше, чем другие. Обычно дело доходит до разработчика и того, что им удобно использовать. Оба имеют расширенные функциональные возможности, которые могут помочь сделать ваш CSS более удобным, тематическим и расширяемым.

Какой CSS препроцессор вы предпочитаете? Дайте нам знать ниже в комментариях.

Похожие

Комментарии