Синтаксис 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 ниже:

.myclass {
 color = red;
 font-size = 0.2em;
}

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

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

sass --watch C:\ruby\lib\sass\style.scss:style.css

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

Error: Invalid CSS after "  color = red": expected "{", was ";"
 on line 2 of C:\ruby\lib\sass\style17.scss

.myclass {
 color = red;
 font-size = 0.2em;
}

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

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

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

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

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

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

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

.myclass
 :color red
 :font-size 0.2em

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

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

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

Пример

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

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

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

Узнать подробнее
<html>
 <head>
 <title>Multiline Selectors</title>
 <link rel = "stylesheet" type = "text/css" href = "style.css" />
 <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
 </head>
 
 <body>
 <h2>Example using Multiline Selectors</h2 >
 <p class = "class1">Welcome to Tutorialspoint!!!</p>
 <p class = "class2">SASS stands for Syntactically Awesome Stylesheet...</p>
 </body>
</html>

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

Style.scss

.class1,
.class2{
 color:red;
}

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

sass --watch C:\ruby\lib\sass\style.scss:style.css

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

Style.css

.class1,
.class2 {
 color: red;
}

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

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

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

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

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

Комментарии

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

@import

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

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

@import "themes/blackforest";
@import "style.sass";

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

@import themes/blackforest
@import fontstyle.sass

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

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

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

=myclass
 font-size: 12px;
p
 +myclass

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

@mixin myclass
 font-size: 12px;
p
 @include myclass

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

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

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

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

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

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

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

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

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

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

Получить

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree