WebComplex – самостоятельное создание сайтов
Все о самостоятельном создании сайта
Подключаем SASS к проекту
После того как вы установили SASS, его необходимо подключить к вашему проекту, чтобы этот препроцессор отслеживал все изменения и компилировал конечный файл стиле.
Создаем проект
Если у вас уже есть текущий проект, то вам в папке где хранятся файлы стилей необходимо создать файл с расширением scss, например style.scss.
Теперь в этом файле вы будете писать все стили для вашего сайта, а SASS все будет компилировать в стандартный формат.
В случае, если у вас нет проекта, то вам стоит создать новый, вот скрин структуры моего демо-проекта: 
Создайте папку css внутри вашего проекта и в ней два пустых файла: style.scss и style.css.
После того как мы создали пустой проект со всеми необходимыми для работы файлами, мы можем подключать SASS.
Как подключить SASS к проекту?
1. Запускаем командную строку, зажав комбинацию клавиш Win+R, появится такое окошко: 
в нем вводим команду cmd и жмем ОК.
Откроется командная строка: 
Теперь нам необходимо перейти в папку вашего проекта в которой находятся файлы style.scss и style.css.
Вводим букву диска на котором находится ваш проект, моем случае – это Х и после буквы диска ставим двоеточие, жмем Enter. 
Пишем команду cd и путь к к папке с файлами стилей, жмем Enter. 
Команда cd – изменяет текущую папку (change directory)
Теперь мы можем сказать SASS отслеживать все изменения в файле style.scss и вносить их в файл style.css.
Для этого нужно написать следующую команду:
sass –watch style.scss:style.css
После того как вы ввели эту команду, на экране появится уведомление, что SASS отслеживает изменения. (как на картинки выше)
Теперь вы можете внести правки в файл style.scss, сохранить их и посмотреть что файл в style.css все скомпилировалось 
Как видим из примера на картинке выше, в SASS есть принцип наследование и не только он, а много другого о чем мы поговорим в следующих статьях 😉
Это подробное руководство по препроцессору Sass для начинающих. Здесь мы познакомимся с препроцессором Sass, его преимуществами, синтаксисом и рассмотрим возможности использования на примерах.
Все примеры и настроенный проект данного урока вы можете Скачать с GitHub
Преимущества Sass
Когда я только знакомился с CSS препроцессорами, мне, как и многим другим начинающим веб-разработчикам, была не до конца понятна сама идея использования CSS препроцессоров. Зачем делать дополнительную прослойку, использовать какие-то инструменты, усложнять CSS, думал я. Но со временем начал понимать, что изо дня в день написание CSS становилось пыткой, серой рутиной, многие действия приходилось повторять, копировать селекторы, свойства и даже целые блоки CSS кода для достижения необходимого результата. Сегодня, на примерах, я покажу вам, как можно упростить работу, используя препроцессор Sass, разнообразить разработку и даже немного поразвлечься при написании каких-то более или менее сложных функций.
Настройка окружения
В качестве окружения для работы с Sass в этом уроке, как и в других наших уроках, мы будем использовать версию Sass для таск-менеджера Gulp (gulp-sass). Для использования оригинальной Ruby версии или компиляции Sass посредством специального ПО, вы можете ознакомиться с инструкциями на оф. сайте. Данный урок носит преимущественно практический характер, поэтому останавливаться на возможных вариантах подключения к проекту не будем, подключим Sass наиболее популярным способом, используя Gulp.
В папке вашего проекта выполните команду npm init и заполните пошагово информацию о вашем новом проекте. Пример, также, есть на странице руководства Gulp.
Далее установим в проект пакеты gulp, sass и gulp-sass командой:
Далее в папке проекта создадим gulpfile.js следующего содержания:
У вас должна быть следующая структура проекта в вашей файловой системе:
- myproject/
- css/
- common.css
sass/
- common.sass
node_modules/gulpfile.jspackage.json
Запускаем выполнение Gulpfile командой gulp в терминале папки проекта.
Здесь мы берем все Sass файлы из директории sass/ вашего проекта и выгружаем готовый CSS результат в папку css/. Кроме того, здесь мы устанавливаем наблюдение watch за изменениями в Sass файлах и автоматическую компиляцию в CSS, если такие изменения имеют место быть. Результирующий css файл подключается в верстку.
Если вам что-то не понятно по настройке Gulp пакетов в данном примере, прочтите руководство Gulp.
После того, как наше окружение настроено и Sass успешно преобразуется в CSS при сохнанении *.sass файлов в директории sass/, можно спокойно продолжать обучение и выполнять примеры, которые мы будем сегодня разбирать, на практике.
Синтаксис Sass
SASS и SCSS синтаксис:
Мы будем использовать синтаксис отступов.
1. Расширение возможностей CSS с помощью Sass
1.1 Правила вложения
Sass дает разработчикам замечательную возможность использовать вложение одних CSS правил в другие, тем самым сокращая время на написание/копирование длинных селекторов и делая код более структурированным, с четкой иерархией.
1.2 Привязка к родительскому селектору
Если вы хотите расширить селектор, не создавая нового правила, вы можете привязать к готовому селектору дополнительные селекторы, используя знак &. Внешне это выглядит как создание дочернего селектора в иерархии, но с использованием &, мы расширяем именно родительский селектор, а не создаем дочерний.
Обратите внимание на правило body.firefox &, которое позволяет нам получить новую цепочку от любого элемента до текущего, если установить в конце &.
Кроме того, привязку к родителю можно использовать для создания составных селекторов:
1.3 Вложенные свойства
Для удобства, вы можете разбивать суффикс пространства имен свойства на вложения. Например, margin-top, margin-bottom, margin-left, margin-right имеют общую основу margin и могут быть разбиты на вложения следующим образом:
1.4 Селекторы-шаблоны
Иногда возникает ситуация, когда несколько элементов на странице используют одинаковую CSS базу, одинаковый набор свойств, характерный только для них. Данные базовые CSS правила можно оформить в виде селектора-шаблона для использования в нескольких местах Sass. Селекторы-шаблоны выводятся посредством директивы @extend.
2. SassScript
SassScript позволяет значително расширить возможности Sass за счет использования пользовательских переменых, арифметических и прочих функций. SassScript может быть использован для автоматической генерации новых селекторов и свойств.
2.1 Переменные в Sass
2.2 Операции с числами и строками + интерполяция
Внимание! Деление в настоящее время следует выполнять функцией math.div(), а не прямым слешем, как будет показано ниже. Например:
Обратите внимание, что для использования функции math.div() необходимо указать в самом начале sass-файла директиву подключения «@use ‘sass:math’». Скачиваем и смотрим примеры из урока.
Кроме того, в Sass есть возможность конкатенировать (соединять) строки.
Обратите также внимание на строки 2 и 9, здесь мы используем интерполяцию для размещения динамических значений в любом месте Sass файла, в том числе и в месте, где у нас идет название свойства, название селектора или в любой строке.
Интерполяция — это получение нового значения, используя другие.
Чаще всего интерполяция в Sass используется для получения нового значения переменной, благодаря «интегрированию» в значение другой переменной, посредством конструкции #<>, например:
Вы не можете просто взять и вставить в строку переменную, без использования интерполяции, как например, это можно сделать в PHP, в двойных кавычках. Обязательно используйте интерполяцию в переменные.
2.3 Операции с цветами
Внимание! Сложение цветов теперь следует выполнять посредством функции color.mix(), а не «+»:
Цвета в Sass можно складывать, вычетать, делить и умножать. Все арифметические операции выполняются для каждого цвета отдельно: красного, зеленого и синего.
Обратите внимание, что при сложении rgba цветов, последний параметр непрозрачности 0.75 не должен отличаться от других в выражении, иначе произойдет ошибка сложения. Вместо этого, можно регулировать альфа-канал rgba, используя opacify и transparentize или управлять непрозрачностью HEX цвета, посредством функции rgba.
3. Директивы и правила
3.1 @import
Вы можете импортировать в ваш Sass файл sass, scss и css файлы с помощью директивы @import, при этом все миксины и переменные будут работать в основном файле, в который происходит импорт.
Для того, чтобы другой файл был полноценно импортирован в основной Sass файл, необходимо, чтобы расширение файла было *.sass, *.scss или *.css.
Давайте рассмотрим некоторые примеры.
Следующие файлы импортированы не будут:
Следующие файлы будут импортированы:
Возможен импорт нескольких файлов, через запятую: @import «header», «media».
Файлы, которые начинаются с нижнего подчеркивания, называются фрагменты и при импорте не требуют указания подчеркивания и расширения. Например, файл _header.sass можно импортировать так: @import «header».
Обратите внимание, что импорт происходит в том месте, где вы указываете директиву @import. Соответственно, есть возможность делать вложенный импорт в том месте, где это необходимо:
3.2 @at-root
Директива @at-root поднимает содержимые в ней правила в корень, отменяя цепочку от родителя. Тут все просто:
Мы рассмотрели не все директивы, которые есть в Sass, а только самые используемые на практике. Если вас интересует более глубокое изучение Sass директив, обратитесь к документации.
4. Выражения
Sass поддерживает использование выражений и функций для различных условий, реализации циклов и т.д.
4.1 Директива @if()
Директива @if() позволяет осуществить выполнение SassScript с определенными условиями и имеет следующий синтаксис:
4.2 Директива @for
@for выводит блок со стилями определенное количество раз. Во время выполнения можно задать переменную-счетчик.
Вы можете указать through вместо to, если требуется пройтись от 1 до 11 включительно, а не только до 10, как в примере.
4.3 Директива @each
Если требуется пройтись по списку значений, а не просто чисел, можно использовать директиву @each:
4.4 Директива @while
@while циклично выводит блоки стилей, пока выражение является true.
5. Миксины
Миксин объявляется директивой @mixin, после объявления должно быть указано имя миксина. Вызывается миксин директивой @include, которая принимает имя миксина и передаваемые аргументы, если такие имеют место быть.
Друзья, мы рассмотрели основные возможности Sass, которых достаточно для плодотворной работы с CSS стилями сайта. Некоторые директивы и возмоности не вошли в данное руководство, но если вам интересно узнать обо всех возможностях Sass, почитайте документацию, будет полезно.
Премиум уроки от WebDesign Master
Создание сайта от А до Я. Комплексный курс
Создание современного интернет-магазина от А до Я
Инструкция по SCSS
SCSS — это препроцессор для написания CSS кода. SCSS дает дополнительные возможности. С ним можно использовать переменные, вложенные селекторы и медиазапросы, собирать несколько файлов в один, миксины, наследования и другие полезные вещи которые упростят и структурируют работу с CSS кодом. В этой статье мы будем говорить о SCSS. О его различии с Sass будет сказано немного ниже.
Что такое SCSS
SCSS это отдельный формат файла, в котором пишутся стили для сайта. Он очень похож на SCSS, но в добавок имеет множество улучшений. Буквально SCSS расшифровывается как Super CSS — то есть CSS c супер-силой.
SCSS не подключается в браузер напрямую. Браузеры не умеют с ним работать. SCSS компилируется (собирается) в привычный для браузера CSS код, и уже CSS файл подключается на страницу.
Для того чтобы скомпилировать SCSS в CSS нужно использовать компилятор. Это может быть специальная программа: Koala, Prepros, или другая. Либо плагин для редактора. Или инструмент для сборки проекта: Gulp, Webpack или другой.
Особенности SCSS
Отличие Sass от SCSS
Sass и SCSS очень похожи, но в них есть пару различий. Sass не использует точки с запятой и не имеет фигурных скобок. Вложенность в Sass определяется отступами.
Пример SCSS кода:
Пример Sass кода:
Далее мы продолжим разбирать SCSS синтаксис.
Компиляция SCSS
Чтобы скомпилировать SCSS воспользуемся программой Koala. Скачать ее можно здесь. Она доступна для всех платформ, и умеет компилировать не только SASS/SCSS, но и Less c CofeeScript.
Сайт программы Koala
После создаем проект в котором создаем SCSS файл и пишем в нем SCSS код. Например вот такой:
Файловая структура проекта
Содержимое файла main.scss
Далее закидываем проект в Koala, видим что она нашла нужный файл и нотификацию о успехе компиляции.
Посмотрим на содержимое проекта, еще раз. Теперь в нем появилась папка CSS c скомпилированным main.css файлом.
Поздравляю! Мы только что скомпилировали SCSS!)
Настройки программы Koala
Настройки у программы достаточно просты. Достаточно кликнуть на иконку шестеренки.
Заходим в настройки Koala
Основные настройки
Здесь вы можете выбрать язык программы, есть и Русский. Опции сворачивания программы в трей, чтобы не занимала место на таскбаре, нотификации при успешной компиляции, автоматическую компиляцию файлов когда проект добавлен в программу или обновлен. Можете поставить как у меня, но будьте аккуратны с треем, при сворачивании иконка программы будет улетать в него, и может показаться что программа не запущена, но она просто спряталась.
Основные настройки программы Koala
Теперь зайдем в настройки для SASS
Compass mode нужен чтобы использовать возможности библиотеки Compass, на начальном этапе они вам точно не понадобятся, поэтому отключаем.
Настройки SASS в Koala
Стиль вывода имеет 4 разных значения:
Если вы хотите выбрать максимально читабельный и развернутый CSS на выходе, то это expanded. Nested это немного сжатый с указанием вложенности стиль оформления CSS, compact — вытянутые стили в оду строку, каждый селектор с новой строки. Compressed- сжатый, минифицированный вид CSS, когда весь код файла вытянут в одну строчку, и удалены все лишние пробелы и символы которые могут быть удалены без потери работоспособности.
Я использую либо включенный стиль expanded c включенными «сорс-мапами» для удобства разработки, либо compressed c отключенным source maps когда надо сделать максимально сжатый CSS файл без лишнего веса.
Индивидуальные настройки для файлов
Еще в Koala можно открывать индивидуальные настройки для каждого файла, просто кликнув по нему. Выглядит это вот так:
Правая панель — индивидуальные настройки для файлов в Koala
По умолчанию эти индивидуальные настройки дублируют основные, поэтому не рекомендую их изменять. Единственное чем они могут быть полезны — это отключение галочки автокомпиляции для тех файлов которые вы не хотите компилировать. И еще в этой панели есть кнопка Compile, пригодится если вы хотите запустить сборку принудительно.
На этом с настройками закончили. Компиляция SCSS настроена.
Возможности SCSS
SCSS имеет массу возможностей, в некотором роде это почти язык программирования 🙂 потому что в нем можно писать циклы и условия. Но реально для базовой пользы при верстке достаточно лишь несколько его функций. О них я расскажу в первую очередь.
Основные полезные возможности SCSS на каждый день:
Подключение фрагментов, импорт файлов
В SCSS можно разделать стили проекта на отдельные части. Вот типичная структура проекта:
Структура стилей в проекте
В папке sass созданы отдельные файлы для стилей проекта:
base/_vars.scss — глобальные переменные (сокращение от variables),
base/_base.scss — сбросы, нормализаторы и базовые стили проекта
В папке blocks отдельные файлы под секции или блоки и компоненты проекта: header, main, footer.
Имена данных файлов начинаются с символа подчеркивания, сделано это для того чтобы компилятор не компилировал их по умолчанию. Так он пойме что эти файлы являются фрагментами, не самостоятельными файлами, а частью другого файла. Это соглашение именования в документации SASS.
Импорт всех этих файлов выглядит следующим образом:
Импорты scss файлов в scss полностью переносят содержимое импортируемых. То есть на выходе мы получим один файл со всем кодом который импортировался в него.
Пример импорта SCSS и CSS файла:
Комментарии в SCSS
Переменные в SCSS
Если говорить о переменных в рамках проекта, то для них создается отдельный файл _vars.scss который подключается в начале импортов. Пример с ним был указан выше.
Стоит заметить что переменные в scss имеют области видимости, и если в локальной области видимости переопределить переменную, то будет работать локальная переменная, а не глобальная.
Пример. Этот SCSS код:
Даст следующий результат:
Вложенные селекторы и медиа запросы
SCSS позволяет писать вложенные селекторы. Это можно проделывать с классами, псевдоэлементами, БЭМ элементами, медиазапросами. Давайте посмотрим на пример с вложенностью:
В CSS получим следующий результат:
Вложенность для псевдо элементов before и after :
Указание родительского селектора при вложенности и символ &
Под символом & подразумевается селектор внутри которого мы работаем. Его можно использовать не только для BEM naming подстановок, но и для цепочек от родительского селектора, например:
Другие базовые возможности SCSS:
Другие базовые возможности можно посмотреть в документации по SCSS.
Примечание. Возможные проблемы и их решения
Если вы сталкиваетесь с тем что Koala отказывается компилировать или следить за изменениями в файлах, проверьте чтобы в пути к вашему проекту не было кириллических символов. Путь к проекту начиная от диска должен быть полностью на латинице, вклбчая и имя пользователя если проект находится на рабочем столе.
Такой вариант не подойдет: C:\Users\Юрий\Desktop\forest-travel
Такой путь будет работать: C:\Users\yurij\Desktop\forest-travel
Если имя пользователя в Windows у вас на кириллице, тогда чтобы не переименовывать его, не создавать нового или не переустанавливать систему, просто размещайте все проекты на каком-либо диске, избегая рабочий стол, например: C:\projects\forest-travel
Изучаем SASS: руководство для новичка
Написание большого количества CSS-кода может быть очень утомительным, поэтому изучение SASS и LESS может сделать жизнь любого веб-разработчика и дизайнера ощутимо легче.
Для начинающего в целях обучения это очень даже полезно, однако со временем, ваши навыки будут улучшаться и придет необходимость в повышении производительности труда.
Вы удивитесь, когда узнаете, что есть способы писать CSS-код без множественных повторений одних и тех же свойств. В этой статье будет рассказано об одном из них.
Благодаря CSS-препроцессорам, стало возможным писать лаконичный CSS-код без постоянного повторения одних и тех же свойств.
К тому же, получившийся код отформатирован гораздо приятнее. Вы можете выполнять вычисления и создавать динамические стили, используя один из таких методов препроцессинга.
Недостатки CSS
Можно использовать только CSS, но при разработке больших многостраничных сайтов, у вас, скорее всего, появится желание получить от этой технологии возможности, которых она не имеет.
Давайте рассмотрим слабые места использования « чистого » CSS:
Преимущества использования препроцессоров
Стандартный CSS не может дать вам ничего, кроме неудобств, в то время как использование методов препроцессинга может сохранить вам много времени и сил.
Взгляните теперь на список преимуществ использования препроцессоров:
Что такое SASS?
SASS расшифровывается как Syntactically Awesome Style Sheets – если переводить дословно, то это звучит как: « Синтаксически потрясающие таблицы стилей ».
Эта технология была придумана и воплощена Хэмптоном Катлином ( Hampton Catlin ). SASS манипулирует CSS-правилами, используя переменные, так называемые миксины ( mixins ), наследование и вложенность.
SASS упрощает написание CSS-кода и позволяет динамически им манипулировать. Это отличный способ создания более функциональных CSS-кодов, который позволяет ускорить выполнение ежедневной работы веб-разработчиков и дизайнеров.
CSS-код
Заметьте, что синтаксис зависим от абзацев. Это старый формат SASS :
Вот что вам понадобится для успешного завершения практики по данной статье:
Установка Ruby
Затем поставьте отметку о том, что вы согласны с условиями лицензии и нажмите « Далее ».
После этого, произведите установку в желаемое место на жестком диске и убедитесь, что выбрана радио-кнопка « Add Ruby executables to your PATH ». Нажмите кнопку « Install » и установка завершена:
Проверка правильности запуска Ruby
Команда должна возвратить текущую версию и дату установленного Ruby. Если возвращена ошибка, то значит Ruby был установлен некорректно, либо переменные окружения Ruby не были зарегистрированы:
Установка SASS
Подготовка необходимых файлов
Поместите в него следующий код:
Если вы точно следовали всем шагам, то на данный момент у вас будет следующая структура файлов:
Конвертация SASS-кода в CSS
Далее, откройте командную строку и перейдите в директорию, где вы расположили ваши файлы. В моем случае это папка на рабочем столе, поэтому я ввожу cd « Desktop «:
Теперь, находясь в папке рабочего стола, введите sass –watch Sass:Sass :
Использование переменных
Использование переменных дает вам возможность повторного использования заданных ранее значений.
В SASS существует шесть разных типов переменных:
Давайте опробуем эти типы на практике. Откройте файл style.scss и добавьте в него следующий код:
Запустив этот код в браузере, вы получите следующее:
Вложенность
SASS также позволяет определять вложенные стили. Это позволит вам писать очень легко читающиеся стили.
В качестве примера, рассмотрим следующий код:
Если вы запустите этот код в браузере, то увидите следующую картину:
Миксины (Mixins)
Давайте попрактикуемся. Скопируйте приведенный ниже код в свой файл style.scss :
Если вы запустите данный код в браузере, то увидите следующее:
Операторы
Давайте посмотрим, как это работает. Откройте свой файл style.scss и вставьте в него код, представленный ниже:
Если вы запустите этот пример в браузере, то увидите следующую картину:
Функции
SASS также имеет в своем арсенале различные функции. Отличным примером являются цветовые функции.
Взгляните на их список ниже:
А сейчас, мы рассмотрим несколько практических примеров с использованием перечисленных выше функций.
Откройте свой файл style.scss и вставьте туда следующий код:
После запуска данного примера в браузере вы увидите примерно следующую картину:
Настройка форматирования скомпилированных стилей в SASS
Вложенный формат (Nested Format)
Вложенный стиль это формат по умолчанию. Он задает отступы для всех стилей в выходном CSS-файле.
Эта команда обновит форматирование для уже скомпилированных CSS-стилей через командную строку:
После этого откройте файл style.css и обратите внимание на появившиеся отступы:
Расширенный формат (Expanded Format)
Это один из наиболее удобных для визуального восприятия форматов, так как все фигурные скобки проставлены так, чтобы выделять расположенные внутри них свойства, каждое из которых располагается на новой строке.
Давайте посмотрим это в действии.
Если теперь вы взглянете на скомпилированный CSS-файл, то увидите форматирование, как на изображении ниже.
Каждому свойству выделена отдельная строка, а фигурные скобки раскрыты так, чтобы визуально выделять помещенные в них свойства:
Компактный формат (Compact Format)
Этот формат представляет собой очень сжатый стиль написания, который, тем не менее, достаточно хорошо визуально воспринимается.
Добавляются пробелы между фигурными скобками, но свойства располагаются на одной строке.
Чтобы увидеть этот формат в действии, используя предыдущий пример, откройте командную строку и наберите команду sass –update style.scss –style compact :
После компиляции, вы увидите, что код стал очень компактным, а элементы плотно расположены друг относительно друга:
Компрессированный формат (Compressed Format)
Компрессированный формат является самым сжатым. Он подходит для конечного этапа, когда продукт запускается и требуется минимальный размер файла и производительность.
Чтобы увидеть, как выглядит этот формат, в командной строке наберите sass –update style.scss –style compressed :
Как видно, на изображении ниже, в выходном CSS-файле отсутствуют пробелы и вообще какое-либо форматирование, чем и достигается сжатие:
Заключение
SASS предоставляет множество путей упрощения работы с привычной всем технологией CSS. Это позволяет ощутимо уменьшить повторяемость кода с помощью переменных.
SASS это очень мощный инструмент, который поможет вам увеличить свою производительность, будь вы веб-дизайнер или веб-программист. Изучайте SASS прямо сейчас и открывайте для себя его потенциал.
Это поможет вам очень быстро создавать профессиональные сайты. Надеюсь, статья была вам полезна!