В чем разница между sass и scss?
Содержание:
Немного истории
Первоначально Sass являлся частью другого препроцессора — Haml, который придумали и написали разработчики из Ruby.
Поэтому стили Sass использовали Ruby-подобный синтаксис, без скобок, без точек с запятой и строгих отступов, например:
По сравнению с синтаксисом CSS есть ощутимая разница.
Переменная задается через !, а не $, символ присвоения значения =, а не
Но так Sass выглядел до версии 3.0, выпущенной в мае 2010 года, в которой был представлен совершенно новый синтаксис под названием SCSS или Sassy CSS.
Его целью было приблизить синтаксис Sass к CSS, сделав его более совместимым с CSS:
SCSS определенно более близок к CSS, чем Sass. Разработчики Sass потрудились над тем, чтобы сделать оба синтаксиса ближе друг к другу, заменив ! (знак переменной) и = (знак присвоения) на $ и : из CSS.
Поэтому при запуске нового проекта вы можете задуматься, какой синтаксис использовать. Позвольте мне помочь принять Вам решение.
Плюсы синтаксиса Sass с отступами
Хотя этот синтаксис может казаться вам немного странным, но у него есть несколько интересных моментов. Прежде всего, он короче и его легче набирать. В нем нет скобок и точек с запятой, они не нужны.
В нем не нужны @mixin или @include, когда достаточно простого символа: = и +.
Также в Sass присутствуют чистые стандарты кодирования из-за использования отступов. Так как неправильный отступ может сломать всю таблицу стилей .sass, здесь в первую очередь обеспечивается, чтобы код был чистым и надлежащим образом отформатированным.
Существует только один метод составления кодов Sass: составлять их правильно.
Не забывайте, что отступы имеют логическое значение в Sass. Когда применяется отступ блока селектора, это означает, что это вложенный селектор.
Например:
Простой факт смещения .element-b на один уровень вправо означает, что он является дочерним элементом от .element-a, что приводит к изменению результативного CSS-кода. Так что, будьте осторожны с отступами!
Полагаю, что синтаксис на основе отступов больше понравится команде, работающей в основном с Ruby/Python, нежели команде PHP/Java программистов (но это не точно).
Плюсы SCSS синтаксиса
Во-первых, он полностью совместим с CSS. Это означает, что вы можете переименовать файл CSS в .scss, и он будет работать, как ни в чем не бывало.
Создание SCSS, полностью совместимого с CSS, всегда было приоритетом для поддержки Sass с самого момента релиза SCSS, и, на мой взгляд, это серьезный аргумент.
Кроме того, они стараются следить, за тем, что может стать валидным синтаксисом CSS в будущем, и реализовать это (отсюда @directives).
Так как SCSS совместим с CSS, он практически не требует дополнительного обучения. Синтаксис почти тот же: в конце концов, это просто CSS с некоторыми дополнениями.
Это важно для начинающих разработчиков: они смогут быстро начать составлять код, почти ничего не зная о Sass. Кроме того, он более читаем, так как конкретные конструкции уже имеют смысл
Когда вы видите @mixin, вы знаете, что это объявление примеси; когда вы видите @include, вы знаете, что это вызов примеси
Кроме того, он более читаем, так как конкретные конструкции уже имеют смысл. Когда вы видите @mixin, вы знаете, что это объявление примеси; когда вы видите @include, вы знаете, что это вызов примеси.
Нет никаких привязок, и все имеет смысл без интерпретации.
Также почти все существующие инструменты, плагины и демо-презентации для Sass разрабатываются с помощью синтаксиса SCSS. Этот синтаксис становится все более ориентированным на профессионалов и выбирается ими по умолчанию (если не является единственно возможным).
В основном в силу указанных выше причин. Например, становится все труднее найти подсветку чистого синтаксиса Sass с отступами; как правило, доступны только варианты подсветки SCSS.
Приступим!
Пока вы хотя бы раз не попробуете сгенерировать значения для свойств с помощью цикла, вы не познаете настоящую мощь Sassy CSS. Но мы начнём с основ SCSS и постепенно доберёмся до самого интересного.
Что такого есть в Sass/SCSS, чего нет в стандартном CSS?
- Вложенные правила: вы можете вкладывать CSS свойства, в несколько наборов скобок {}. Это сделает ваш CSS чище и понятней.
- Переменные: в стандартном CSS тоже есть переменные, но переменные Sass куда более мощный инструмент. Например, вы можете использовать переменные в циклах и генерировать значения свойств динамически. Также можно внедрять переменные в имена свойств, например так: property-name-N { … }.
- Лучшая реализация операторов: вы можете суммировать, вычитать, делить и умножать CSS значения. Sass реализация более интуитивна, чем стандартный функционал CSS calc().
- Функции: Sass позволяет многократно использовать CSS стили, как функции.
- Тригонометрия: помимо базовых операций (+, -, *, /), SCSS позволяет писать собственные функции. Например, функции sin и cos можно написать, используя только синтаксис Sass/SCSS. Конечно, вам понадобятся знания тригонометрии. Такие функция могут понадобится для создания анимации.
- Удобный рабочий процесс: вы можете писать CSS, используя конструкции, знакомые по другим языкам: for-циклы, while-циклы, if-else. Но имейте в виду, это только препроцессор, а не полноценный язык, Sass контролирует генерацию свойств и значений, а на выходе вы получаете стандартный CSS.
- Миксины: позволяют один раз создать набор правил, чтобы потом использовать их многократно или смешивать с другими правилами. Например, миксины используют для создания отдельных тем макета.
Препроцессор Sass
Sass не динамичный язык. Он не позволяет генерировать или изменять CSS свойства и значения в реальном времени. Но вы можете генерировать их более эффективным способом и внедрять в стандартные свойства (например, для CSS анимации).
Новый синтаксис
SCSS на самом деле не добавляет ничего нового в сам язык CSS. Это просто новый синтаксис, который в большинстве случаев сокращает время написания стилей.
Несколько фактов для начала
CSS препроцессоры добавляют новый синтаксис в CSS.
Существует 5 CSS препроцессоров: Sass, SCSS, Less, Stylus и PostCSS.
Здесь я буду говорить в основном о SCSS, который схож с Sass. О Sass можно почитать здесь: https://www.sass-lang.com/.
- SASS (.sass) Syntactically Awesome Style Sheets.
- SCSS (.scss)Sassy Cascading Style Sheets.
Обратите внимание на расширения, они схожи, но отличаются. Для любителей командной строки, есть возможность конвертировать .sass в .scss и наоборот:. Конвертация форматов .scss и .sass
Используем команду sass-convert
Конвертация форматов .scss и .sass. Используем команду sass-convert.
Sass — это первая спецификация Sassy CSS, её разработка началась в 2006 году. Позже разработали альтернативный синтаксис, который некоторые считают лучшей версией языка, а также изменилось первоначальное расширение .sass на новое .scss.
На данный момент ни один браузер не поддерживает CSS препроцессоры напрямую. Вы можете свободно экспериментировать с любым из 5 препроцессоров на сервисе codepen.io. Кроме того, используя препроцессор, вы должны будете установить его к себе на веб-сервер.
Эта статья о SCSS, но другие препроцессоры имеют схожие функции, хотя синтаксис может отличаться.
Superset
Sassy CSS в любом своём проявлении является «расширением» языка CSS, а значит, всё что работает в CSS, работает и в Sass/SCSS.
Переменные
В Sass/SCSS есть переменные, и они отличаются от тех, которые вы вероятно видели в CSS — они начинаются с двух тире (—color: #9c27b0). В SCSS переменная обозначается знаком доллара ($color: #9c27b0).
Определение переменных
Вы можете перезаписать имя переменной или задать для неё значение по умолчанию. Для этого добавьте метку !default к переменной, и если её значение не изменится в дальнейшем и не будет пустым, то будет использоваться заданное значение по умолчанию.
В примере выше окончательным значением переменной $text будет “Piece of string.”, а не “Another string.”, потому что переменная не пуста.
Sass переменные можно назначить любому свойству CSS
Nesting
When writing HTML you’ve probably noticed that it has a clear nested and visual hierarchy. CSS, on the other hand, doesn’t.
Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. Be aware that overly nested rules will result in over-qualified CSS that could prove hard to maintain and is generally considered bad practice.
With that in mind, here’s an example of some typical styles for a site’s navigation:
CSS Output
You’ll notice that the , , and selectors are nested inside the selector. This is a great way to organize your CSS and make it more readable.
Синтаксис — Sass, Scss
Сразу отмечу, что существует 2 синтаксиса написания кода: Sass и Scss.
Синтаксис Sass незначительно отличается от Scss. Scss похож больше на обычный код Css, а в Sass опущены фигурные скобки и точка с запятой между правилами. Также существует различие в написании некоторых функций и надо быть внимательным в том, какой синтаксис вы выбираете. Расширения файлов для Sass — *.sass, а для Scss — *.scss. Синтаксис Sass он более старый, а Scss появился позже, чтобы упростить изучение для новичков. Я сам начинал изучение данного препроцессора именно на Scss, так было проще его понять. Сейчас же я перешел на Sass, для меня он более удобен.
Если говорить о Sass, то его структура кода строится на основе отступов (ведь фигурных скобок в нем нет) и здесь следует быть внимательным, так как в качестве отступа может выступать, как табулятор (TAB — 4 пробела), так и обычные пробелы (обычно это двойной пробел). Я всегда использую табулятор.
Scss
В большинстве редакторов кода (например, Sublime Text) есть разметка отступов в виде полос, что не дает нам запутаться. В примерах ниже я буду использовать синтаксис Sass.
Локальные переменные и mixins
Переменные и mixins в Sass по умолчанию являются глобальными. Если вы определили $primary-color, то его значение можно использовать везде, что не всегда хорошо. Например, у вас есть статичное значение (фиксированная высота), и вы используете его только для самого компонента и его дочерних элементов. Первый способ (и не самый эффективный) — это записать значение в глобальную переменную. Такой подход в дальнейшем может сильно увеличить список глобальных переменных, которые к тому же будут очень специфичны.
Более эффективное решение — локальные переменные. Можно задать переменную внутри блока селектора, рядом со свойствами. Таким образом, она будет доступна только внутри селектора.
Такой же подход применим и для mixins. Вы можете не только создавать глобальные mixins, но можете также использовать локальные, когда необходимо создать какие-то повторяющиеся действия или элементы внутри компонента. Реальный пример — необходимость пересчитать что-то на каждой breakpoint, но только с другим значением высоты/ширины.
.filters-block { $_filter-height: 20px; @mixin _note-size($value) { height: $value; line-height: $value; margin-top: -($value); } &__list { height: $_filters-height * 7; // Display 7 filters overflow: auto; } &__item { height: $_filter-height; } &__note { @include _note-size(30px); } @media screen and (max-width 1000px) { &__note { @include _note-size(40px); } } }
Еще один момент — всегда пытайтесь вначале создать локальные mixins и переменные в новом компоненте. Это сохраняет инкапсуляцию, а также улучшает читабельность, когда у вас все в одном месте. Делайте их глобальными только в случае, если нужно делиться ими между компонентами.
Для обозначения локальных переменных, я рекомендую использовать нижнее подчеркивание “_” перед названием переменной/mixin, так же как это делается в других языках программирования.
Настройка окружения
В качестве окружения для работы с Sass в этом уроке, как и в других наших уроках, мы будем использовать версию Sass для таск-менеджера Gulp (gulp-sass). Для использования оригинальной Ruby версии или компиляции Sass посредством специального ПО, вы можете ознакомиться с инструкциями на оф. сайте. Данный урок носит преимущественно практический характер, поэтому останавливаться на возможных вариантах подключения к проекту не будем, подключим Sass наиболее популярным способом, используя Gulp.
Убедитесь, что у вас установлена последняя версия Node.js и Gulp. Если Node.js не установлен, скачайте его и установите. После установки Node.js установите gulp командой «npm i -g gulp» (Windows) или «sudo npm i -g gulp» (Linux, OS X). Почитать: Подробное руководство Gulp.
В папке вашего проекта выполните команду npm init и заполните пошагово информацию о вашем новом проекте. Пример, также, есть на странице руководства Gulp.
Далее установим в проект пакеты gulp и gulp-sass командой:
npm i --save-dev gulp gulp-sass
Далее в папке проекта создадим gulpfile.js следующего содержания:
var gulp = require('gulp'), // Подключаем Gulp sass = require('gulp-sass'); // Подключаем Sass пакет gulp.task('sass', function() { // Создаем таск "sass" return gulp.src(['sass/**/*.sass', 'sass/**/*.scss']) // Берем источник .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError)) // Преобразуем Sass в CSS посредством gulp-sass .pipe(gulp.dest('css')) // Выгружаем результата в папку css }); gulp.task('watch', function() { gulp.watch(['sass/**/*.sass', 'sass/**/*.scss'], ); // Наблюдение за sass файлами в папке sass }); gulp.task('default', );
У вас должна быть следующая структура проекта в вашей файловой системе:
-
myproject/
-
css/
common.css
-
sass/
common.sass
- node_modules/
- gulpfile.js
- package.json
-
css/
Запускаем выполнение Gulpfile командой gulp в терминале папки проекта.
Здесь мы берем все Sass файлы из директории sass/ вашего проекта и выгружаем готовый CSS результат в папку css/. Кроме того, здесь мы устанавливаем наблюдение watch за изменениями в Sass файлах и автоматическую компиляцию в CSS, если такие изменения имеют место быть. Результирующий css файл подключается в верстку.
Если вам что-то не понятно по настройке Gulp пакетов в данном примере, прочтите руководство Gulp.
После того, как наше окружение настроено и Sass успешно преобразуется в CSS при сохнанении *.sass файлов в директории sass/, можно спокойно продолжать обучение и выполнять примеры, которые мы будем сегодня разбирать, на практике.
Флаг по умолчанию (default)
Этот флаг позволяет нам установить значение переменной в случае, если оно еще не установлено или его текущее значение равно (рассматривается как неназначенное). Чтобы лучше объяснить, как мы можем использовать его в реальном сценарии, давайте предположим, что у нас есть проект со следующей структурой:
Файл выглядит следующим образом:
Посмотрим содержимое частичных файлов.
Во-первых, файл содержит наши переменные:
Обратите внимание на флаг , назначенный переменной. Во-вторых, файл включает наши миксы:
Во-вторых, файл включает наши миксы:
Затем сгенерированный файл будет выглядеть следующим образом:
Итак, наши кнопки имеют стили по умолчанию. Но давайте предположим, что мы хотим иметь возможность перезаписать их, применяя наши собственные значения. Чтобы сделать это, мы можем переназначить желаемые (по умолчанию) переменные в частичном файле :
Установка значения этой переменной в приведет к игнорированию соответствующего значения (), получившего флаг . Поэтому сгенерированный CSS изменяется, как мы видим ниже:
Примечание: если мы не добавили флаг в переменную , наш CSS будет, из-за каскадной природы CSS, следующим образом:
Разновидности препроцессоров¶
Разумеется, как и в любой другой области, всегда есть конкуренция, и на рынке препроцессоров сейчас три главных, враждующих между собой лагеря:
- Less
- Sass (SCSS)
- Stylus
Враждующими я их называю, потому что каждый приверженец одного из препроцессоров считает своим долгом поливать нечистотами представителей других, скажем так, конфессий. Такая неприязнь особенно часто проявляется у любителей препроцессора Sass, который считается старейшим и мощнейшим из всех трёх препроцессоров.
Для полной картины, я хочу привести краткую справку по каждому препроцессору:
Less
Собственно, герой этой книги. Самый популярный на момент написания книги препроцессор. Основан в 2009 году Алексис Сельер (Alexis Sellier) и написан на JavaScript (изначально был написан на Ruby, но Алексис вовремя сделал правильный шаг). Имеет все базовые возможности препроцессоров и даже больше, но не имеет условных конструкций и циклов в привычном для нас понимании. Основным плюсом является его простота, практически стандартный для CSS синтаксис и возможность расширения функционала за счёт системы плагинов.
Sass (SCSS)
Самый мощный из CSS-препроцессоров. Имеет довольно большое сообщество разработчиков. Основан в 2007 году как модуль для HAML и написан на Ruby (есть порт на C++). Имеет куда больший ассортимент возможностей в сравнении с Less. Возможности самого препроцессора расширяются за счёт многофункциональной библиотеки Compass, которая позволяет выйти за рамки CSS и работать, например, со спрайтами в автоматическом режиме.
Имеет два синтаксиса:
- Sass (Syntactically Awesome Style Sheets) — упрощённый синтаксис CSS,
который основан на идентации. Считается устаревшим. - SCSS (Sassy CSS) — основан на стандартном для CSS синтаксисе.
Stylus
Самый молодой, но в тоже время самый перспективный CSS-препроцессор. Основан в 2010 году небезызвестной в наших кругах личностью TJ Holowaychuk. Говорят, это самый удобный и расширяемый препроцессор, а ещё он гибче Sass. Написан на JavaScript. Поддерживает уйму вариантов синтаксиса от подобного CSS до упрощённого (отсутствуют , , и некоторые скобки).
Функции
SASS также имеет в своем арсенале различные функции. Отличным примером являются цветовые функции.
Взгляните на их список ниже:
- darken(color, amount);
- lighten(color, amount);
- saturate(color, amount);
- desaturate(color, amount);
- alpha(color).
Для того чтобы подробно изучить, как работать с функциями, обратитесь к документации SASS .
А сейчас, мы рассмотрим несколько практических примеров с использованием перечисленных выше функций.
Откройте свой файл style.scss и вставьте туда следующий код:
Результатом этого примера будет затемнение цвета в переменной $myBackground на 20% с помощью соответствующей функции. Далее, в этом же примере, заголовки H1 и H2 осветляются на 40% соответствующей функцией.
После запуска данного примера в браузере вы увидите примерно следующую картину:
Миксины
Миксины — блоки Sass кода (или примеси-шаблоны), которые могут принимать аргументы (опционально) и позволяют значительно расширить возможности написания стилей и сократить затраты времени на применении однотипных правил и даже целых CSS блоков. Это что-то вроде функции, которая может принять аргумент, выполнить огромный объем работы и выдать результат в зависимости от входного параметра.
Миксин объявляется директивой @mixin, после объявления должно быть указано имя миксина. Вызывается миксин директивой @include, которая принимает имя миксина и передаваемые аргументы, если такие имеют место быть.
Примеры:
Sass | CSS — готовый результат |
@mixin border($color) border: $color 1px solid p @include border(#333) @mixin transition($time) -webkit-transition: all $time ease; -moz-transition: all $time ease; -o-transition: all $time ease; transition: all $time ease; p @include transition(.25s) |
p { border: #333 1px solid; } p { -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } |
Друзья, мы рассмотрели основные возможности Sass, которых достаточно для плодотворной работы с CSS стилями сайта. Некоторые директивы и возмоности не вошли в данное руководство, но если вам интересно узнать обо всех возможностях Sass, почитайте документацию, будет полезно.
Другие уроки по теме «Инструменты»
- Gulp 4 — Актуальное и исчерпывающее руководство для самых маленьких
- Актуальный способ установки окружения Node.js и Jekyll в Windows WSL (Windows Subsystem for Linux)
- PageSpeed Insights — Оптимизация (обновление)
- October CMS — Первое знакомство
- Gulp vs Webpack
- OptimizedHTML 5 — Облегчённый стартер для вёрстки сайтов
Mixins
Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. A good use of a mixin is for vendor prefixes. Here’s an example for .
CSS Output
To create a mixin you use the directive and give it a name. We’ve named our mixin . We’re also using the variable inside the parentheses so we can pass in a transform of whatever we want. After you create your mixin, you can then use it as a CSS declaration starting with followed by the name of the mixin.
Недостатки CSS
Можно использовать только CSS, но при разработке больших многостраничных сайтов, у вас, скорее всего, появится желание получить от этой технологии возможности, которых она не имеет.
Давайте рассмотрим слабые места использования « чистого » CSS:
- Нет возможности наследования уже созданных стилевых правил;
- Нельзя создавать переменные, которые можно повторно использовать в таблице стилей;
- Вы не можете выполнять числовые вычисления.
Преимущества использования препроцессоров
Стандартный CSS не может дать вам ничего, кроме неудобств, в то время как использование методов препроцессинга может сохранить вам много времени и сил.
Взгляните теперь на список преимуществ использования препроцессоров:
- Они позволяют вам использовать переменные, которые могут быть повторно использованы внутри таблицы стилей;
- Более продуманный и функциональный синтаксис, который предоставляет дополнительные возможности, которых нет в « чистом » CSS;
- Скомпилированные CSS-файлы загружаются на рабочий веб-сервер.
Какой смысл использования препроцессоров?¶
Как я уже отметил выше, основные плюсы — это читабельность кода, структурирование и повышение производительности.
Существуют также и другие причины того, чтобы начать использовать препроцессор уже сегодня
Я хочу заострить на этом внимание, так как разработчики раньше, да многие и сейчас, отнекиваются от использования препроцессоров, находя их сложными, непонятными и ненужными
CSS — это сложно
Стандартный CSS — это сложно. Синтаксис без использования вложенности, которую предлагают CSS-препроцессоры, просто напросто сложен для зрительного восприятия. Кроме того, нужно помнить имя родителя при вложенности. Отсутствие нормальных переменных и «функций» делает CSS-код грязным и узконаправленным.
Доступная документация
Прошли те времена, когда документация от препроцессоров была доступна только людям «в теме». Сейчас любой желающий может в кратчайшие сроки освоить любой из препроцессоров, причём с минимальными затратами сил.
Простота использования
Использовать препроцессоры стало проще, чем раньше, причём намного проще. Для этого нужно лишь установить программу, которая будет следить за файлами, предназначенными для препроцессора, и при их изменении будет компилировать содержимое этих файлов в чистый CSS-код.
Для более продвинутых пользователей есть специальные сборщики проектов. Не думайте, что если вы используете программу для препроцессоров, а не сборщик проектов, то вы недостаточно круты. На самом деле, такие сборщики предлагают полный контроль и расширенные настройки, а не делают из вас джедая.
Структура и логичность кода
Самым популярным предлагаемым функционалом любого CSS-препроцессора является возможность вкладывать селекторы друг в друга. Я не буду сейчас приводить пример, так как о возможностях Less, включая вложенность, будет написана соответствующая часть книги. На этом этапе вам стоит знать лишь то, что при использовании препроцессоров, можно вкладывать один селектор в другой, а другой в третий, получая что-то, похожее на оглавление книги:
Конечно, в реальной жизни селекторы не могут начинаться с цифр, однако, для проведения параллели между вложенностью и оглавлением, думаю такое упущение здесь уместно.
Примеси
Если говорить совсем кратко, то, используя примеси (от англ. Mixins), можно сделать код переиспользуемым. Это помогает избежать вспомогательных классов в разметке или дублирования свойств от селектора к селектору.
Модульность
Еще одним бонусом, который прямо сейчас уговорил бы меня начать пользоваться CSS-препроцессором, будет возможность вкладывать файлы в файлы, то есть проще говоря, производить конкатенацию файлов в заданной последовательности. Да, это можно организовать и на чистом CSS, но вкупе с другими возможностями получается очень мощный инструмент.
При этом мы получаем возможность делиться модулями (библиотеками примесей), которые создали для своих нужд и посчитали полезными для других людей. Получается, что любой разработчик может загрузить вашу библиотеку и использовать её в своих целях, вызывая по мере необходимости написанные вами примеси.