Синтаксис Sass: отступы и SCSS

Синтаксис Sass: отступы и SCSS

От автора: в этой главе мы изучим Sass синтаксис. Sass поддерживает два синтаксиса: SCSS и синтаксис отступов.

 

SCSS (Sassy CSS) – это расширение синтаксиса CSS. То есть валидный CSS также является валидным SCSS. SCSS сильно облегчает обслуживание больших стилей и умеет распознавать синтаксис вендорных префиксов. Множество файлов CSS и SCSS используют расширение .scss.

Синтаксис отступов – это старый синтаксис, его еще называют SASS. Этот синтаксис сильно сокращает код CSS. SASS файлы используют расширение .sass.

Синтаксис отступов SASS

Синтаксис отступов Sass или просто Sass – альтернатива SCSS синтаксису, основанному на CSS.

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами Less и Sass с полного нуля менее чем за 2 недели

Узнать подробнее

Вместо { и } он использует отступы, чтобы отделять блоки.

Для разделения выражений используется новая строка вместо ;

Объявления свойств и селекторов должны быть на отдельных строках, а выражения внутри {} должны располагаться с новой строки с отступом.

Например, возьмем код SCSS ниже:

Синтаксис отступов – старый синтаксис, не рекомендуется его использовать в новых Sass файлах. Если использовать этот файл, он покажет ошибку, так как мы использовали = вместо того, чтобы задать свойства и переменные.

Скомпилируйте код выше с помощью этой команды

Запустите верхнюю команду, оно покажет ошибку в style.css, как показано ниже:

Различия синтаксиса SASS

Большая часть синтаксиса CSS и SCSS отлично работает в Sass. Тем не менее, есть некоторые различия, которые мы ниже разберем.

Синтаксис свойств

Свойства CSS можно объявлять двумя способами:

Свойства можно объявлять так же, как в CSS, но без ;

Перед каждым свойством можно добавлять :

Например, можно написать так:

Оба способа можно использовать по умолчанию. Однако вместе с :property_syntax можно использовать только один синтаксис свойств.

Многострочные селекторы

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

Пример

Следующий пример показывает, как использовать многострочные селекторы в SCSS файле:

Создайте style.scss. Расширение должно быть scss.

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами Less и Sass с полного нуля менее чем за 2 недели

Узнать подробнее

Style.scss

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

Выполните команду сверху. Она создаст файл style.scss, в котором будет следующий код:

Style.css

Вывод на экран

Давайте выполним следующие шаги, чтобы увидеть все наши труды в действии:

Сохраните HTML код выше в multiline_selectors.html.

Откройте этот файл в браузере, и вы увидите следующее.

Синтаксис Sass: отступы и SCSS

Комментарии

Комментарии занимают целую строку. В синтаксисе с отступами они основаны на строках.

@import

В Sass директиву @import можно записывать как с кавычками, так и без них. В отличие от SCSS, их нужно использовать с кавычками.

Например, в SCSS директива @import используется так

В SASS это можно записать так:

Директивы миксинов

Sass поддерживает сокращения для директив @mixin и @include. Вместо них можно использовать символы = и +, что упрощает ваш код и упрощает его чтение.

Например, директиву @mixin можно записать следующим образом:

Код выше превращается в:

Устаревший синтаксис

Sass поддерживает старый синтаксис. Однако использовать его не рекомендуется. Если использовать старый синтаксис, то на экране будут отображаться предупреждения. В последующих версиях он будет удален. В таблице ниже показаны некоторые старые операторы.

Синтаксис Sass: отступы и SCSS

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами Less и Sass с полного нуля менее чем за 2 недели

Узнать подробнее

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree