Учебники

Sass — Синтаксис

Январь 26, 2019

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

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

  • Отступ — это более старый синтаксис, иногда его называют просто SASS . Используя эту форму синтаксиса, CSS можно написать кратко. Файлы SASS используют расширение .sass .

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

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

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

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

1:.myclass {
2:   color = red;
3:   font-size = 0.2em;
4:}

Синтаксические различия SASS

Большинство синтаксисов CSS и SCSS отлично работают в SASS. Тем не менее, есть некоторые различия, которые объясняются в следующих разделах —

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

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

  • Свойства могут быть объявлены аналогично CSS, но без точки с запятой (;) .

  • двоеточие (:) будет добавлено к каждому имени свойства.

Свойства могут быть объявлены аналогично CSS, но без точки с запятой (;) .

двоеточие (:) будет добавлено к каждому имени свойства.

Например, вы можете написать как — 

.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 = "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.css со следующим кодом —

Сгенерированный style.css как показано ниже —

style.css 

.class1,
.class2 {
   color: red;
}

Выход

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

  • Сохраните приведенный выше HTML-код в файле multiline_selectors .html.

  • Откройте этот HTML-файл в браузере, вывод отобразится так, как показано ниже.

Сохраните приведенный выше HTML-код в файле multiline_selectors .html.

Откройте этот HTML-файл в браузере, вывод отобразится так, как показано ниже.

Sass Синтаксис

Комментарии

Комментарии занимают целую строку и заключают весь текст, вложенный в них. Они основаны на строках с отступным синтаксисом. Для получения дополнительной информации о комментариях, перейдите по этой ссылке .

@Импортировать

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

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

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

Это может быть записано в SASS как — 

@import themes/blackforest
@import fontstyle.sass

Mixin Директивы

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

Например, вы можете написать директивы mixin как — 

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

Приведенный выше код такой же, как — 

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

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

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

знак равно

Он использовался вместо: при установке переменных и свойств в значения SassScript.

|| =

Он использовался вместо: всякий раз, когда вы назначаете значение переменной по умолчанию.

!

Вместо $,! был использован в качестве префикса переменной. Функциональность не будет изменена, если она используется вместо $.

47
Share: