Что лучше sass или sass
SASS или LESS что лучше начать учить
В этой статье я бы хотел разобрать, что лучше начать учить в 2020 году, SASS или LESS, надеюсь статья для вас будет полезна, и вы найдёте здесь ответ на свой вопрос.
Что такое SASS и LESS:
Для начала хочу рассказать что такое SASS и LESS, для тех кто не знает.
Тут всё просто, это препроцессоры CSS, которые должны упростить работу со стилями, но об этом может в другой статьи.
Сравнение SASS и LESS:
Теперь перейдём к самому сравнению этих двух технологий.
Подробнее о каждом:
SASS (Syntactically Awesome Stylesheets) — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS кода и упрощения файлов каскадных таблиц стилей.
Был создан в 2006 году, не большой командой разработчиков, но главный автор этого языка Хамптон Катлин (англ. Hampton Catlin).
Также стоит упомянуть, что у SASS есть два синтаксиса, что может показаться на первый взгляд удобно, но об этом ниже
Этот язык был создан в 2009 году, силами человека по имени Алексис Селье (англ. Alexis Sellier).
Также надо сказать, что сейчас его разработка прикрашена, ещё в 2016 году, но зато он перерос практически в отдельную JavaScript библиотеку, что усложнит его использование не подготовленному человеку, то есть не знающего JS.
Синтаксис:
Как говорилось выше у SASS есть два синтаксиса, первый это стандартный который был изначально, но он на мой взгляд не удобный и не понятный сразу, поэтому буду использовать второй, который был создан под влиянием LESS, называется SCSS.
Для LESS всё стандартно, покажу как использовать именно в обычно LESS, без JavaScript.
Попытаемся сделать эту картинку.
Сначала посмотрите как сделать это на SASS со синтаксисом SCSS.
Препроцессор SASS. Изучаем SASS для быстрой верстки. CSS компилятор для быстрой верстки шаблонов и макетов сайта.
Что такое SASS и SCSS? Обзор препроцессора SASS. Разница между SASS и SCSS
Привет, посетитель сайта ZametkiNaPolyah.ru! Продолжим рубрику Верстка сайтов, в которой этой записью я открою новый раздел Препроцессор SASS и SCSS. Хочу обратить твое внимание, что на моем блоге есть раздел Препроцессор LESS, вести этих две ветки я буду параллельно, чтобы ты мог в итоге выбрать, какой из CSS препроцессоров тебе больше по душе и чем ты будешь пользоваться для создания своего сайта. Замечу, что эти CSS препроцессоры похожи друг на друга и изучив один, ты с легкостью освоишь другой, но отличаются они синтаксисом и некоторыми особенностями реализации, а так же у них немного разные возможности.
Что такое SASS и SCSS? Обзор препроцессора SASS. Разница между SASS и SCSS
А теперь давай я напишу о том, что ты узнаешь из этой публикации: 1) ты узнаешь о том, что такое CSS препроцессор SASS и SCSS; 2) поймешь в чем разница между SASS и SCSS; 2) прочитаешь о том, как SASS и SCSS расширяют возможности CSS и как они помогут тебе ускорить процесс верстки макета; 3) получишь полную, но краткую информацию о возможностях рассматриваемого CSS препроцессора; 4) узнаешь о плюсах и минусах использования SASS и SCSS на своём сайте и в своих проектах.
Что такое препроцессор SASS и чем отличается SASS от SCSS?
SASS – это препроцессор CSS, основной задачей которого является расширение возможностей написания CSS кода, препроцессор SASS в разы ускоряет написание кода CSS и в разы облегчает его обслуживание. SASS представляет собой язык, похожий на язык программирования, который облегчает и ускоряет разработку CSS. SASS является компилируемым язык и в чистом виде браузер его не обрабатывает. Когда говорят о препроцессоре SASS, часто упоминают SCSS.
Давайте сразу определимся, чем отличается SASS от SCSS и в чем между ними разница. На самом деле разница между SASS и SCSS только в синтаксисе: разные правила написания кода, но функционал SASS и SCSS полностью одинаков.
Раз CSS препроцессор SASS – это компилируемый язык, то у этого языка должен быть компилятор, который бы преобразовывал код, написанный на SASS или SCSS в чистый CSS код, компилятор SASS и SCSS написан на языке Ruby, поэтому всем владельцам платформ Windows прежде чем использовать SASS или SCSS рекомендуется установить Ruby.
Обратите внимание: SASS и SCSS генерируют чистый, кросс-браузерный и валидный код, но, чтобы CSS код был чистым: 1) вы должны знать CSS; 2) вы должны знать принцип работы SASS или SCSS, в противном случае на компилятор нечего пенять.
В препроцессоре SASS и SCSS реализовано очень много фишек, которые в разы ускорят разработку кода CSS. В процессе изучения SASS мы будем параллельно изучать и SCSS: все что я буду писать для SASS, будет работать так же и на SCSS, примеры будут как для SASS, так и для SCSS.
Функционал SASS, расширяем возможности CSS с SASS и SCSS
Давайте поговорим о функционале SASS и SCSS, заодно и поймем: почему SASS и SCSS в разы ускоряет разработку HTML макетов и облегчает обслуживание сайтов. Сам по себе процесс CSS верстки сайта довольно интересное занятие, но иногда оно превращается в нудное и кропотливое, тогда вам на помощь приходит CSS препроцессор SASS и SCSS, который сделает вашу работу не такой нудной. Сейчас вы убедитесь в том, что SASS и SCSS действительно вам помогут, я просто перечислю функции этого CSS препроцессора.
Я сделал лишь краткий, но полный обзор возможностей препроцессора SASS и SCSS. Надеюсь, что он вам помог решить: стоит или нет тратить время на изучение данного CSS препроцессора, но в одном вы можете быть уверены точно: CSS разработка с SASS в разы быстрее, но только в том случае, когда вы уже знаете CSS и изучите SASS. На первых парах использование SASS может внести некоторые затруднения, которые в дальнейшем окупятся.
Недостатки и преимущества SASS и SCSS
Давайте рассмотрим недостатки и преимущества препроцессора SASS и SCSS. Начнем мы, конечно же, с преимуществ препроцессора SASS и SCSS:
Препроцессор SASS и SCSS имеет и недостатки, давайте на них посмотрим:
Мы познакомились с SASS и SCSS, узнали в чем разница между SASS и SCSS, разобрались с недостатками и преимуществами SASS и SCSS, но главное, сделали для себя вывод, что SASS и SCSS действительно помогают ускорить работу по верстке HTML.
Типичный верстальщик
Важные отличия между Sass и SCSS
Ранее была опубликована статья «С чего начать изучение и использование SASS/SCSS?» и назрел вопрос вполне логичный вопрос: «В чем разница между SASS и SCSS?». Тема интересная, поэтому давайте разбираться.
Тем не менее, используя Sass (препроцессор) мы можем использовать два различных синтаксиса:
Немного истории
Первоначально Sass являлся частью другого препроцессора — Haml, который придумали и написали разработчики из Ruby.
Поэтому стили Sass использовали Ruby-подобный синтаксис, без скобок, без точек с запятой и строгих отступов, например:
По сравнению с синтаксисом CSS есть ощутимая разница.
Поэтому при запуске нового проекта вы можете задуматься, какой синтаксис использовать. Позвольте мне помочь принять Вам решение.
Плюсы синтаксиса Sass с отступами
Хотя этот синтаксис может казаться вам немного странным, но у него есть несколько интересных моментов. Прежде всего, он короче и его легче набирать. В нем нет скобок и точек с запятой, они не нужны.
Существует только один метод составления кодов Sass : составлять их правильно.
Плюсы SCSS синтаксиса
Кроме того, они стараются следить, за тем, что может стать валидным синтаксисом CSS в будущем, и реализовать это (отсюда @directives ).
Нет никаких привязок, и все имеет смысл без интерпретации.
Заключение
В чем разница между SCSS и Sass?
Какая разница с SCSS? Это должен быть один и тот же язык? Аналогичный? Другой?
Переменные CSS поддерживаются и могут использоваться, но не так, как переменные препроцессора.
Для различия между SCSS и Sass, этот текст на странице документации Sass должен ответить на вопрос:
Однако все это работает только с прекомпилятором Sass, который в итоге создает CSS. Это не расширение самого стандарта CSS.
Я один из разработчиков, который помог создать Sass.
Разница в интерфейсе. Под текстовой внешностью они идентичны. Вот почему файлы sass и scss могут импортировать друг друга. На самом деле, Sass имеет четыре синтаксических парсера: scss, sass, CSS и другие. Все они преобразуют другой синтаксис в абстрактное синтаксическое дерево, которое затем обрабатывается в выводе CSS или даже в одном из других форматов с помощью инструмента sass-convert.
Используйте синтаксис, который вам нравится больше всего, оба полностью поддерживаются, и вы можете переключаться между ними позже, если передумаете.
Sass ( Syntaxically Awesome StyleSheets ) имеет два синтаксиса:
Таким образом, они оба являются частью препроцессора Sass с двумя различными синтаксисами.
Самое важное отличие SCSS от оригинального Sass :
Оригинальный Sass :
Конверсии с помощью sass-convert :
Его синтаксис отличается, и это главное за (или против, в зависимости от вашей точки зрения).
Я постараюсь не повторять многое из того, что говорили другие, вы можете легко это погуглить, но вместо этого я хотел бы сказать пару вещей из моего опыта использования обоих, иногда даже в одном и том же проекте.
SASS pro
SASS минусы
Полный гайд по SCSS/SASS
Apr 10, 2019 · 9 min read
Далее я убуду использовать названия Sassy, Sass и SCSS, поэтому давайте определимся, так как концептуально разница не велика, будем считать, что это одно и тоже. Вы поймёте различия по мере изучения темы. Отмечу, что SCSS сейчас наиболее популярна, вероятно потому, что является наиболее поздней версией оригинального Sass синтаксиса (некоторые считают её лучшей).
Чтобы по-настоящему почувствовать преимущества Sass, вам нужно понять ключевые идеи этого метаязыка. Об этом мы и поговорим.
Весь Sass/SCSS код компилируетс я обратно в стандартный CSS, поэтому браузер понимает его и корректно выводит результат. Текущие версии браузеров не поддерживают Sass/SCSS непосредственно (как и другие препроцессоры), а стандартная спецификация CSS не предлагает нам альтернатив (пока).
Приступим!
Пока вы хотя бы раз не попробуете сгенерировать значения для свойств с помощью цикла, вы не познаете настоящую мощь Sassy CSS. Но мы начнём с основ SCSS и постепенно доберёмся до самого интересного.
Что такого есть в Sass/SCSS, чего нет в стандартном CSS?
Препроцессор Sass
Sass не динамичный язык. Он не позволяет генерировать или изменять CSS свойства и значения в реальном времени. Но вы можете генерировать их более эффективным способом и внедрять в стандартные свойства (например, для CSS анимации).
Новый синтаксис
SCSS на самом деле не добавляет ничего нового в сам язык CSS. Это просто новый синтаксис, который в большинстве случаев сокращает время написания стилей.
Несколько фактов для начала
CSS препроцессоры добавляют новый синтаксис в CSS.
Существует 5 CSS препроцессоров: Sass, SCSS, Less, Stylus и PostCSS.
На данный момент ни один браузер не поддерживает CSS препроцессоры напрямую. Вы можете свободно экспериментировать с любым из 5 препроцессоров на сервисе codepen.io. Кроме того, используя препроцессор, вы должны будете установить его к себе на веб-сервер.
Эта статья о SCSS, но другие препроцессоры имеют схожие функции, хотя синтаксис может отличаться.
Superset
Sassy CSS в любом своём проявлении является «расширением» языка CSS, а значит, всё что работает в CSS, работает и в Sass/SCSS.
Переменные
Вложенные правила
В стандартном CSS, вложенность достигается путём расстановки пробелов.
С помощью Sassy CSS этот код можно записать так:
Конечно, в итоге это всё скомпилируется в обычный CSS. Это просто синтаксис, но как видите, он выглядит чище и с меньшими повторениями.
В частности, это помогает работать со сложными макетами. Выравнивание, в котором вложенные свойства записаны в коде, точно соответствует структуре макета приложения.
Тем временем под капотом, препроцессор компилирует всё в стандартный код CSS (как в первом примере), чтобы браузер смог его отобразить. Мы лишь изменили способ написания CSS.
Оператор &
В Sassy CSS можно использовать оператор & (И), давайте посмотрим, как это работает.
В 5 строке мы видим &:hover, после компиляции, вместо символа &, подставляется имя родительского элемента, т.е. a:hover. В результате у нас получится такой код:
Миксины
Для объявления миксина используйте директиву @mixin (ещё это называют mixin rule).
Давайте создадим миксин, который определяет поведение элемента как Flex:
Вы можете передавать аргументы в @mixin, как если бы это была функция, а затем присваивать их свойствам CSS. Рассмотрим это в следующей части.
Кросс-браузерность. Пример
Некоторые экспериментальные фичи работают только в определённых браузерах.
С помощью миксин удобно определять CSS свойства, индивидуальные для каждого браузера, в одном классе.
Теперь нужно подключить ( @include) этот миксин в CSS класс:
Арифметические операции
Как и в стандартном CSS, вам доступны операции сложения, вычитания, умножения и деления, но в отличии от классического CSS синтаксиса, вам необязательно использовать функцию calc().
Есть несколько неочевидных особенностей, которые следует учитывать, чтобы избегать ошибок.
Сложение
Убедитесь, что оба значения соответствуют одному формату.
Вычитание
Этот оператор работает так же, как и предыдущий.
Умножение
Для умножения используется звёздочка, как и в стандартном CSS calc(a * b).
Деление
Так как в стандартном CSS символ деления зарезервирован для других целей, есть некоторые особенности его использования. Например, font: 24/32px определяет размер шрифта 25px и line-height 32px. Т.е. символ деления используется для сокращённой записи свойств шрифта. Посмотрим, как работает SCSS, сохраняя совместимость со стандартным CSS.