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

Дата публикации: 2017-09-19

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

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

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

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

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

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

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

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

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

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

.myclass {

color = red;

font-size = 0.2em;

}

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

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

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

1	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;
}

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

.myclass

:color red

:font-size 0.2em

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

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

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

Пример

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

<html>
   <head>
      <title>Multiline Selectors</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
      <link rel = "stylesheet" href = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src = "//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src = "//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>

<html>

<head>

<title>Multiline Selectors</title>

</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;
}

.class1,

.class2{

color:red;

}

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

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

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

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

Style.css

.class1,
.class2 {
   color: red;
}

.class1,

.class2 {

color: red;

}

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

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

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

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

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

@import

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

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

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

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

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

@import themes/blackforest
@import fontstyle.sass

1 2	@import themes/blackforest @import fontstyle.sass

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

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

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

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

=myclass

font-size: 12px;

+myclass

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

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

@mixin myclass

font-size: 12px;

@include myclass

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

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

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