Scss чем отличается от css

Уроки SASS / SCSS

Препроцессор SASS / Урок #1 — Что такое SASS, SCSS. Установка

SASS или же SCSS это препроцессор, который служит для быстрого написания CSS стилей. Благодаря SASS вы можете добавить переменные, функции, наследование и многое другое к обычному документу CSS.

Видеоурок

Полезные ссылки:

1. Курс по языку CSS ;
2. Официальный сайт SASS ;
3. Редактор Atom .

Что такое SASS?

SASS — это препроцессор, позволяющий писать код для стилей CSS, используя всевозможные: переменные, циклы, миксины, функции и многое другое.

Прежде чем изучать SASS стоит изучить CSS, так как без знаний второго вы не сможете ощутить полезность данной технологии. Курс по изучению CSS вы можете посмотреть здесь .

Препроцессор построен на языке Ruby , поэтому для его работы необходимо скачать Ruby и далее использовать терминал или командную строку для превращения SASS в CSS. Сам язык Ruby при этом знать не обязательно, но если вы хотите его изучить, то это можно сделать здесь .

Браузеры не воспринимают файлы, написанные на SASS, они не могут прочитать код внутри них и не могут понять что необходимо сделать. Из-за этого, весь SASS необходимо конвертировать в привычные CSS файлы.

В чём отличия между SASS и SCSS?

Многие слышали про SASS и SCSS и думают что это разные технологии. На самом деле, обе технологии являются один и тем же и отличаются лишь синтаксисом написания.

На официальном сайте SASS приведен пример с использованием обеих препроцессоров.

Ниже приведён пример кода на SASS:

$font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color

Ниже пример кода на SСSS:

$font-stack: Helvetica, sans-serif; $primary-color: #333; body

Как видите, оба препроцессора отличаются лишь синтаксисом. В SASS все вложенные свойства выделяются отступами, при чем очень важно соблюдать отступы и их количество. SCSS более приближен к обычному CSS и все вложенные стили записываются через фигурные скобки — <> .

В ходе курса мы будем использовать SCSS, так как синтаксис с фигурными скобками более привычен. В случае если вы хотите использовать SASS, то все возможности будут такими же, измениться лишь синтаксис написания кода.

Онлайн редактор кода

Большое задание по курсу

Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца

Чем лучше scss от css?

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

Основные преимущества SCSS: вложенные классы и свойства, миксины и вагон преимуществ поменьше.

Ответ написан более трёх лет назад
Комментировать
Нравится 4 Комментировать

Андрей @AndrewHaze
Умею гуглить яндексом
Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать

Егор Живагин @Krasnodar_etc
avito front
Импорты? Миксины? Удобная вложенность?
Ответ написан более трёх лет назад
Нравится 1 1 комментарий

+ функции, циклы, условия, плагины
Ответы на вопрос 1

Scss для css — как es6 для ванильного js.
CSS сейчас начинает развиваться семимильными шагами и инклюдит, в первую очередь, функционал препроцессоров и фреймворков, зарекомендовавший себя как best practices(возрадуемся CSS GRID и похороним наконец Bootstrap). Те же переменные в CSS появились совсем недавно.
Ну а пока функционал хоть и хорош, но недостаточно обширен(те же импорты и миксины, как писали выше) — царем горы будет scss(в моем случае — postCSS).

Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

• JavaScript
• +3 ещё

Как сделать ограничитель поля символов?

• 1 подписчик
• 2 часа назад
• 34 просмотра

Важные отличия между Sass и SCSS

Ранее была опубликована статья «С чего начать изучение и использование SASS/SCSS?» и назрел вопрос вполне логичный вопрос: «В чем разница между SASS и SCSS?». Тема интересная, поэтому давайте разбираться.

Когда речь идет о Sass , как правило, мы подразумеваем препроцессор и язык в целом.

Тем не менее, используя Sass (препроцессор) мы можем использовать два различных синтаксиса:

• Sass (отступы) ;
• SCSS ( CSS-подобный синтаксис).

Немного истории

Первоначально Sass являлся частью другого препроцессора — Haml, который придумали и написали разработчики из Ruby.

Поэтому стили Sass использовали Ruby-подобный синтаксис, без скобок, без точек с запятой и строгих отступов, например:

// Переменная !primary-color= hotpink // Примесь =border-radius(!radius) -webkit-border-radius= !radius -moz-border-radius= !radius border-radius= !radius .my-element color= !primary-color width= 100% overflow= hidden .my-other-element +border-radius(5px)

По сравнению с синтаксисом CSS есть ощутимая разница.

Переменная задается через ! , а не $ , символ присвоения значения = , а не :.

Но так Sass выглядел до версии 3.0, выпущенной в мае 2010 года, в которой был представлен совершенно новый синтаксис под названием SCSS или Sassy CSS .

Его целью было приблизить синтаксис Sass к CSS , сделав его более совместимым с CSS :

// Переменная $primary-color: hotpink; // Примесь @mixin border-radius($radius) < -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; > .my-element < color: $primary-color; width: 100%; overflow: hidden; > .my-other-element < @include border-radius(5px); >

SCSS определенно более близок к CSS , чем Sass . Разработчики Sass потрудились над тем, чтобы сделать оба синтаксиса ближе друг к другу, заменив ! (знак переменной) и = (знак присвоения) на $ и : из CSS .

Поэтому при запуске нового проекта вы можете задуматься, какой синтаксис использовать. Позвольте мне помочь принять Вам решение.

Плюсы синтаксиса Sass с отступами

Хотя этот синтаксис может казаться вам немного странным, но у него есть несколько интересных моментов. Прежде всего, он короче и его легче набирать. В нем нет скобок и точек с запятой, они не нужны.

В нем не нужны @mixin или @include , когда достаточно простого символа: = и + .

Также в Sass присутствуют чистые стандарты кодирования из-за использования отступов. Так как неправильный отступ может сломать всю таблицу стилей .sass , здесь в первую очередь обеспечивается, чтобы код был чистым и надлежащим образом отформатированным.

Существует только один метод составления кодов Sass : составлять их правильно.

Не забывайте, что отступы имеют логическое значение в Sass . Когда применяется отступ блока селектора, это означает, что это вложенный селектор.

.element-a color: hotpink .element-b float: left . выводит следующий код CSS: .element-a < color: hotpink; > .element-a .element-b < float: left; >

Простой факт смещения .element-b на один уровень вправо означает, что он является дочерним элементом от .element-a , что приводит к изменению результативного CSS -кода. Так что, будьте осторожны с отступами!

Полагаю, что синтаксис на основе отступов больше понравится команде, работающей в основном с Ruby/Python , нежели команде PHP/Java программистов (но это не точно).

Плюсы SCSS синтаксиса

Во-первых, он полностью совместим с CSS . Это означает, что вы можете переименовать файл CSS в .scss , и он будет работать, как ни в чем не бывало.

Создание SCSS , полностью совместимого с CSS , всегда было приоритетом для поддержки Sass с самого момента релиза SCSS , и, на мой взгляд, это серьезный аргумент.

Кроме того, они стараются следить, за тем, что может стать валидным синтаксисом CSS в будущем, и реализовать это (отсюда @directives ).

Так как SCSS совместим с CSS , он практически не требует дополнительного обучения. Синтаксис почти тот же: в конце концов, это просто CSS с некоторыми дополнениями.

Это важно для начинающих разработчиков: они смогут быстро начать составлять код, почти ничего не зная о Sass .

Кроме того, он более читаем, так как конкретные конструкции уже имеют смысл. Когда вы видите @mixin , вы знаете, что это объявление примеси; когда вы видите @include , вы знаете, что это вызов примеси.

Нет никаких привязок, и все имеет смысл без интерпретации.

Также почти все существующие инструменты, плагины и демо-презентации для Sass разрабатываются с помощью синтаксиса SCSS . Этот синтаксис становится все более ориентированным на профессионалов и выбирается ими по умолчанию (если не является единственно возможным).

В основном в силу указанных выше причин. Например, становится все труднее найти подсветку чистого синтаксиса Sass с отступами; как правило, доступны только варианты подсветки SCSS .

Заключение

Выбор в любом случае остается за Вами, но если у вас нет действительно веских причин использовать синтаксис с отступами, я бы настоятельно рекомендовал использовать SCSS , а не Sass . Это не только более просто, но и более удобно. Если Вы совсем новичок, то SCSS — это то, что нужно. Сходство с CSS не отпугнет Вас от изучения верстки на препроцессорах. Но после уже можно рассмотреть вариант использования Sass в своих проектах. Главное не бояться использовать новое технологии в своей работе!

P.S. Обратите внимание, Sass никогда не обозначается аббревиатурой из прописных букв, независимо синтаксис ли это или язык программирования. В то время как SCSS всегда обозначается большими буквами.

Sass

Sass — это метаязык (язык для описания другого языка), который упрощает и ускоряет написание CSS-кода. Его часто называют препроцессором CSS — это означает, что Sass имеет свой синтаксис, из которого генерирует CSS-код, понятный любому браузеру.

Освойте профессию «Frontend-разработчик»

Для чего используют Sass

Препроцессор Sass помогает:

• сделать CSS-код понятнее и проще. Его легче масштабировать, обновлять и поддерживать;
• расширить функциональность. С помощью Sass можно использовать CSS-константы, встроенные функции, вложенные правила, примеси (смешанные стили), наследование и так далее;
• избежать многократного повторения одинаковых фрагментов кода. Это экономит время разработчика, уменьшает объем файлов стилей и ускоряет обработку страниц.

Профессия / 9 месяцев
Frontend-разработчик

Создавайте интерфейсы сервисов, которыми пользуются все

Разберем использование Sass на примере. В цветовой палитре сайта преобладают три цвета:

Без использования препроцессора разработчику нужно вручную вводить HEX-значения каждого из этих оттенков несколько раз. Sass решает проблему просто:

/* определяем переменные для основных цветов */

$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;

/* используем переменные в стилях*/

.main-header background-color: $primary_1;
>
.menu-left
background-color: $primary_2;
>
.menu-right background-color: $primary_3;
>

Если дизайнер (или разработчик) решит изменить цвет какого-либо элемента, достаточно поменять значение один раз — у переменной.

Как работает Sass

Отличительная особенность Sass — наличие двух синтаксисов.

1. SASS не использует фигурные скобки, характерные для стилей CSS. Вместо них применяются отступы. Расширение файла — .sass.

&:disabled
color: $mdc-button-disabled-ink-color
cursor: default
pointer-events: none

2. SCSS использует фигурные скобки. Расширение файла — .scss.

При этом оба диалекта поддерживают не только стандартные CSS-комментарии, но и построчные примечания, отделяемые от кода двойным слэшем //:

/* это пример обычного CSS-комментария */

.main-header background-color: $primary_1; // это пример построчного комментария
>

Браузеры не понимают код Sass — они распознают и отображают только стили CSS. Для преобразования используется специальное приложение — препроцессор, который переводит конструкции в понятный браузеру формат. В готовый CSS-код не включаются построчные комментарии. В ходе компиляции в CSS передаются только стандартные примечания, отделяемые от кода символами /* */.

Станьте Frontend-разработчиком
и создавайте интерфейсы сервисов, которыми пользуются все

Установка Sass

Sass написан на языке Ruby и отличается минимальными системными требованиями:

• не зависит от конкретной программной платформы — пакет можно установить на компьютер с любой операционной системой;
• код CSS, полученный в результате работы препроцессора, обрабатывается любыми браузерами.

Для установки с помощью менеджера пакетов NPM достаточно выполнить команду:

npm install -g sass

Команда для установки в случае использования менеджера пакетов Homebrew выглядит так:

brew install sass/sass/sass

При использовании менеджера Chocolatey в среде Windows нужно выполнить команду:

choco install sass

Хороший бесплатный инструмент для работы с Sass — приложение Scout-App, которое работает на Windows, Linux и MacOS.

Переменные в Sass

Переменные применяются для хранения данных и значений для повторного использования. Sass поддерживает несколько типов переменных:

• строки;
• списки;
• числовые значения;
• пустые значения null;
• цвета;
• логические (булевы) значения.

Проиллюстрируем использование переменных на примере. На скриншотах видно, как содержимое файла .scss определяет код CSS и HTML. Используются переменные:

• myFont — задает шрифт Helvetica;
• myColor — устанавливает красный цвет;
• myFontSize — определяет размер шрифта, 18 кегль;
• myWidth — задает ширину контейнера, 680 пикселей.

Слева — переменные в файле .scss, справа — представление в браузере.

Слева — скомпилированный CSS-код, понятный браузеру.

Слева — HTML-код, в котором есть ссылка на скомпилированный файл стиля CSS.

Область видимости переменных Sass ограничивается вложенными элементами — это позволяет предотвратить влияние стилей друг на друга. Зададим различные цвета для основного цвета и для заголовка:

Может показаться, что переменная $myColor передаст зеленый цвет основному тексту. Однако Sass четко разделяет стили элементов — цвет параграфа будет красным, поскольку стили CSS в результате компиляции выглядят так:

Область видимости переменных в Sass ограничена вложенными элементами.

Использование !global

По умолчанию область видимости всех переменных в Sass ограничена, но у разработчика есть возможность переопределения области видимости отдельных переменных — с локальной на глобальную. Это возможно с помощью метода !global. Добавление переключателя !global станет указанием на то, что переменная должна быть видна на всех уровнях.

Для иллюстрации воспользуемся кодом из предыдущего примера: добавим к переменной $myColor элемента h1 переключатель !global:

$myColor: red;
h1 $myColor: green !global;
color: $myColor;
>
p color: $myColor;
>

Теперь и заголовок, и текст параграфа имеют один цвет — зеленый, поскольку переменная в CSS-коде стала глобальной:

Глобальные переменные нужно определять отдельно от локальных переменных, в файле под названием _globals.scss. Он включается в основной код с помощью функции @include.

Frontend-разработчик

Научитесь создавать удобные и эффектные сайты, сервисы и приложения, которые нужны всем. Сегодня профессия на пике актуальности: в России 9000+ вакансий, где требуется знание JavaScript.

Статьи по теме: