Изучаем Sass. Стиль написания кода.
Всем привет! В этой статье мы поговорим о разных способах написания Sass кода и об особенностях каждого из них.
Если вы зайдете на официальный сайт препроцессора, то увидите, что там есть два формата: scss и sass. Давайте рассмотрим каждый из них отдельно.
SCSS
SCSS(Sassy CSS) – это формат, который наиболее сильно приближен к формату написания чистого CSS кода. Тут также есть фигурные скобки, он понимает большинство CSS-хаков и префиксов, допустимо написание значений CSS3 кода. Этот стиль чаще всего используют новички, т.к. он очень похож на обычный CSS код. Если вы желаете использовать этот стиль написания, то укажите расширение для файла .scss.
Пример кода:
#main p {
color: #00ff00;
width: 97%;
}
#main p .redbox {
background-color: #ff0000;
color: #000;
}
SASS
SASS(Syntactically Awesome StyleSheets) – это самый старый и известный формат, известный как формат отступов. Все дело в том, что здесь вместо фигурных скобок разработчикам предлагается использовать отступы. Это позволяет писать понятный и короткий код. Если вы желаете использовать этот стиль написания кода, то вам для ваших файлов нужно указывать расширение .sass.
Пример кода:
#main p
color: #00ff00;
width: 97%;
.redbox
background-color: #ff0000;
color: #000;
Какой вариант использовать?
Конечно, это дело привычки. Используйте то, что вам ближе, однако есть одна маленькая деталь: все дело в том, что функции sass и scss форматов могут отличаться, поэтому, если вы откуда-то копируете код, то не забывайте проверять, поддерживается ли эта функция в выбранном вами стиле и, если нет, то какой у нее есть аналог.
Заключение
Итак, сегодня мы рассмотрели различные способы написания sass кода. Но стоит помнить, что препроцессор – это всего лишь помощник при написании кода стилей, поэтому, если вы еще не очень хорошо знаете CSS3, то советую обратить внимание на видеокурс HTML5 и CSS3 с Нуля до Гуру.
А у меня на этом все. Спасибо за внимание!
-
- Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.