Препроцессор Sass. Введение


Содержание материала:

SASS для Начинающих: Скачивание и Установка

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

Что такое SASS?

SASS (Syntactically Awesome Style Sheets) — один из самых популярных CSS препроцессоров. Он представляет собой набор функций для CSS, которые позволяют кодить быстрее и эффективнее. SASS поддерживает интеграцию с Firefox Firebug. SassScript позволяет создавать переменные, вложенные стили и наследуемые селекторы.

SASS позволяет быстро и просто писать меньше (иногда значительно меньше) CSS кода и динамично управлять им как языком программирования (кстати, это не язык программирования). Это отличный инструмент для написания более функционального и чистого CSS, который может ускорить рабочий процесс любого дизайнера и разработчика.

Зачем нужен SASS?

Большинство фронтенд фреймворков, включая Bootstrap, Materialize и Foundation, созданы с помощью этого отличного препроцессора. Знание SASS поможет вам использовать больше функций этих фреймворков.

Как использовать SASS?

Существует много приложений, которые позволяют легко и быстро начать использовать SASS: CodeKit, Compass, Koala и т.д. Вы узнаете о них в других частях туториала. В этой главе мы не будем использовать никаких приложений или инструментов кроме тех, которые необходимы для запуска SASS на компьютере. Вам не придется волноваться об операционной системе, потому что всё будет понятно всем пользователям.

Скачивание и Установка SASS

Установить SASS можно только на машину, на которой уже есть Ruby:

  • Ruby предустановлен на Mac, так что вы можете сразу установить Sass Macintosh;
  • Если вы работаете на Windows, то вам необходимо сначала скачать Ruby;
  • Ruby на Linux можно скачать через систему управления пакетами (apt package manager), rbenv или rvm.

После установки Ruby на вашу машину можно установить SASS. Давайте откроем командную строку Ruby и установим SASS на вашу систему:

Если команда выше не сработает, то вам, возможно, придется использовать sudo команду:

Если вы хотите проверить версию SASS используйте следующую команду:

SASS установлен. Давайте создадим папку проекта и назовем ее sass-basic. Создайте базовый html файл со следующим кодом:

В этом html документе есть ссылка на style.css, так что теперь нужно создать файл style.scss (не .css) в папке. Давайте создадим файл style.scss со следующим кодом:

Теперь нужно компилировать этот файл используя командную строку/терминал. Давайте откроем командную строку в той же директории (возможно, придется использовать командную строку Ruby, если обычная командная строка не работает). Вбейте следующее и нажмите Enter:

Вы заметите, что сгенерировались новые файлы: style.css и style.css.map. Стоит отметить, что не нужно трогать map файл, также как и .css файл. Если вы хотите внести какие-то изменения, то это можно сделать через style.scss. Вам не понадобится повторять этот процесс при каждом изменении стилей. Компиляция SASS будет работать автоматически при внесении изменений в .scss файл.

В следующей главе мы рассмотрим SASS переменные, и почему они являются самой полезной функций SASS (и в любом другом CSS препроцессоре).

Препроцессор SASS

Препроцессор SASS

Здравствуйте! После того как мы рассмотрели работу с программой Koala, которая нужна для компиляции кода на препроцессорах SASS и LESS. Разберем как работать с препроцессором SASS.

Препроцессинг

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

Как только Вы начинаете пользоваться SASS, препроцессор обрабатывает ваш SASS-файл и сохраняет его как простой CSS-файл, который Вы сможете использовать на любом сайте.

Переменные

Думайте о переменных, как о способе хранения информации, которую вы хотите использовать на протяжении написания всех стилей проекта. Вы можете хранить в переменных цвета, стеки шрифтов или любые другие значения CSS, которые вы хотите использовать. Чтобы создать переменную в Sass нужно использовать символ $. Рассмотрим пример:

Когда Sass обрабатывается, он принимает значения, заданные нами в $font-stack и $primary-color и вставляет их в обычном CSS-файле в тех местах, где мы указывали переменные как значения. Таким образом переменные становятся мощнейшей возможностью, например, при работе с фирменными цветами, используемыми на всем сайте.

Вложенности

При написании HTML, Вы, наверное, заметили, что он имеет четкую вложенную и визуальную иерархию. С CSS это не так.

Sass позволит вам вкладывать CSS селекторы таким же образом, как и в визуальной иерархии HTML. Но помните, что чрезмерное количество вложенностей делает ваш документ менее читабельным и воспринимаемым, что считается плохой практикой.

Чтобы понять что мы имеем ввиду, приведем типичный пример стилей навигации на сайте:

Вы заметили, что селекторы ul, li, и a являются вложенными в селектор nav? Это отличный способ сделать ваш CSS-файл более читабельным. Когда вы сгенерируете CSS-файл, то на выходе вы получите что-то вроде этого:

Фрагментирование

Вы можете создавать фрагменты Sass-файла, которые будут содержать в себе небольшие отрывки CSS, которые можно будет использовать в других Sass-файлах. Это отличный способ сделать ваш CSS модульным, а также облегчить его обслуживание. Фрагмент — это простой Sass-файл, имя которого начинается с нижнего подчеркивания, например, _partial.scss. Нижнее подчеркивание в имени Sass-файла говорит компилятору о том, что это только фрагмент и он не должен компилироваться в CSS. Фрагменты Sass подключаются при помощи директивы @import.

Импорт

CSS имеет возможность импорта, которая позволяет разделить ваш CSS-файл на более мелкие и облегчить их в обслуживании. Но у этого способа есть весомый недостаток: каждый раз когда вы в CSS используете @import, то в CSS создается еще один HTTP-запрос. Sass берет идею импорта файлов через директиву @import, но вместо создания отдельного HTTP-запроса Sass импортирует указанный в директиве файл в тот, где он вызывается, т.е. на выходе получается один CSS-файл, скомпилированный из нескольких фрагментов.

Например, у вас есть несколько фрагментов Sass-файлов — _reset.scss и base.scss. И мы хотим импортировать _reset.scss в base.scss.

Обратите внимание на то, что мы используем @import ‘reset’; в base.scss файле. Когда вы импортируете файл, то не нужно указывать расширение .scss. Sass — умный язык и он сам догадается. Когда CSS сгенерируется вы получите:

Миксины (примеси)

Некоторые вещи в CSS весьма утомительно писать, особенно в CSS3, где плюс ко всему зачастую требуется использовать большое количество вендорных префиксов. Миксины позволяют создавать группы деклараций CSS, которые вам придется использовать по нескольку раз на сайте. Хорошо использовать миксины для вендорных префиксов. Пример для border-radius:

Для создания миксина используйте директиву @mixin + название этого миксина. Мы назвали наш миксин border-radius. Также, в миксине мы используем переменную $radius внутри скобок, тем самым позволяя себе передавать в переменной все, что захотим. После того, как вы создали миксин, вы можете его использовать в качестве параметра CSS, начиная вызов с @include и имени миксина. Когда ваш CSS скомпилируется вы получите следующее:

Наследование

Это одна из самых полезных функций Sass. Используя директиву @extend можно наследовать наборы свойств CSS от одного селектора другому. Это позволяет держать ваш Sass-файл в «чистоте». В нашем примере мы покажем вам как сделать стили оповещений об ошибках, предупреждениях и удачных исходов.

Вышеуказанный код позволяет взять свойства CSS из .message и применить их в .success, .error и .warning. Во время компиляции CSS-файла работает магия, которая поможет вам избежать написания лишних классов в HTML элементах. Результат выглядит вот так:

Математические операторы

Использовать математику в CSS очень полезно. Sass имеет несколько стандартных математических операторов, таких как +, -, *, / и %. В нашем примере мы совершаем простые математические вычисления для расчета ширины aside и article.

Мы создали простую адаптивную модульную сетку, с шириной в 960 пикселей. Используя математические операторы, мы использовали полученные данные с пиксельными значениями и конвертировали их в процентные, причем без особых усилий. Скомпилированный CSS выглядит так:

В своем файле HTML нам нужен лишь очень простой код и ссылка на файл CSS в папке CSS нашего проекта.

Вот и весь нужный нам HTML! Теперь перейдем к Sass. Войдите в любимый текстовый редактор и создайте новый файл, сохраните его в папку sass и назовите style.scss. Чтобы было проще, мы будем писать все в SCSS, который Sass тоже умеет обрабатывать, да и SCSS не очень-то строг с новичками. В начале своего файла мы напишем базовый сброс для HTML, импорт для Compass и пропишем переменные цвета для кнопки.

Вверху файла мы вызываем Compass, чтобы включить его в файл и попозже воспользоваться абстрактными классами. Кроме того, мы написали простой сброс и уже употребили одно свойство: переменные. Это дает нам возможность хранить значения, которые мы будем постоянно использовать в своем CSS, включая цвета, значения шрифтов и многие другие! Здесь я применяю их для хранения использованных в кнопке цветов и для упрощения из записи, а также для повторного использования в таблице стилей.

Назначение стилей кнопке

Давайте назначим стили этой кнопке! Мы начнем с применения основных стилей к тэгу с классом button. Я установил здесь базовые стили кнопки, и обратите внимание на то, как я употребляю переменные.

А теперь перейдем к интересной части! Помните импорт Compass, помещенный в начале таблицы стилей? Здесь мы воспользуемся им, потому что у Compass есть большая библиотека встроенных классов, которые включают префиксы CSS3 для тех браузеров, которым все еще нужна префиксная поддержка.

После первоначального определения стилей мы можем включить несколько абстрактных классов для фоновых цветов, линейных градиентов, радиусов рамки и переходов. Лучше всего то, что все будет компилироваться только с нужными префиксами, и сэкономит нам на их написании время! Класс пока будет компилироваться в файле style.css в следующее:

Написание стилей с вложенными элементами

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

После стилей основной кнопки можно вложить селекторы псевдоклассов для состояний элемента :hover и :active, с помощью амперсанда, который будет говорить Sass, что это – вложенный класс, прикрепленный к родительскому элементу. В состоянии проведения мышью :hover можно добавить выразительности градиенту и внутренней тени, использовав абстрактные классы Compass, тогда как активное состояние :active переворачивает градиент и меняет тень блока так, что создается впечатление нажатия кнопки.

Выше показано, что получается после того, как состояния :active и :hover компилируются в Sass’е; они написаны, как селекторы псевдоклассов к родительскому элементу в действенном CSS, а также нужный нам CSS, дополненный альтернативами, для завершения нашей кнопки с тремя состояниями.

Файл style.scss и скомпилированная таблица стилей

Вот и все, что имеется во всем нашем файле style.scss, потому что он организован, написан просто и содержит абстрактные классы и переменные, которые проделывают часть работы за нас, а потом компилируются в окончательный файл таблицы стилей style.css.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Sass для самых маленьких — подробное руководство

Это подробное руководство по препроцессору Sass для начинающих. Здесь мы познакомимся с препроцессором Sass, его преимуществами, синтаксисом и рассмотрим возможности использования на примерах.

Все примеры и настроенный проект данного урока вы можете скачать с нашего сайта

Sass — это один из наиболее развитых и стабильных CSS препроцессоров, а также один из самых популярных препроцессоров у профессионалов.

Преимущества Sass

  • Совместимость с различными версиями CSS, благодаря которой вы можете использовать любые CSS библиотеки в вашем проекте;
  • Огромное количество разнообразных функций на любой случай жизни. Таким богатым функционалом могут похвастаться немногие CSS препроцессоры;
  • Sass — это один из самых старых CSS препроцессоров, вобравший большой опыт за долгие годы своего существования;
  • Замечательная возможность использовать Sass фреймворки, упрощающие жизнь разработчику. Один из таких фреймворков — Bourbon, который мы используем в некоторых выпусках Джедая верстки при написании Sass;
  • Синтаксис. Вы можете выбрать один из двух синтаксисов, который вам ближе — упрощенный (SASS) и развернутый CSS-подобный (SCSS).

Когда я только знакомился с CSS препроцессорами, мне, как и многим другим начинающим веб-разработчикам, была не до конца понятна сама идея использования CSS препроцессоров. Зачем делать дополнительную прослойку, использовать какие-то инструменты, усложнять CSS, думал я. Но со временем начал понимать, что изо дня в день написание CSS становилось пыткой, серой рутиной, многие действия приходилось повторять, копировать селекторы, свойства и даже целые блоки CSS кода для достижения необходимого результата. Сегодня, на примерах, я покажу вам, как можно упростить работу, используя препроцессор Sass, разнообразить разработку и даже немного поразвлечься при написании каких-то более или менее сложных функций.

Топ-пост этого месяца:  Установка шаблона на WordPress

Настройка окружения

В качестве окружения для работы с 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 командой:

Далее в папке проекта создадим gulpfile.js следующего содержания:

Обратите внимание на строку 6 — здесь мы используем один из стилей вывода в результирующий файл: nested — вложенный, по умолчанию; expanded — развернутый; compact — компактный, когда селектор и его свойства в фигурных скобках выводятся в одну строку; compressed — сжатый. Кроме того, благодаря обработке .on(‘error’, sass.logError), если возникнет ошибка, нам не придется перезагружать команду выполенния Gulpfile и мы будем видеть, в какой строке Sass файла у нас ошибка. В примерах я буду использовать стиль вывода expanded для наглядности.

У вас должна быть следующая структура проекта в вашей файловой системе:

    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

Есть 2 варианта написания Sass, 2 синтаксиса: SASS и SCSS. Самый старый вариант написания Sass — это синтаксис отступов. Именно этот вариант написания мы будем использовать в нашем уроке. Расширение файлов для такого синтаксиса — *.sass. Второй вариант — это синтаксис, расширяющий синтаксис CSS, Sassy CSS. SCSS пишется как обычный CSS, но расширен дополнительными возможностями Sass. Расширение файлов с SCSS синтаксисом — *.scss.

Очень важно! Синтаксис отступов требует очень четкого соблюдения отступов у вложенных свойств и если у вас возникают ошибки при запуске Gulp или неявные ошибки без указания строки в консоли — скорее всего, ошибка именно в неправильных отступах. Еще важная деталь — если у вас в качестве отступов используются табы, компилятор выдаст ошибку при попытке конвертировать Sass, в котором помимо табов, также, исвользуются пробелы в качестве отступов. Либо вы используете только табы, либо только пробелы.

SASS и SCSS синтаксис:

SASS — синтаксис отступов SCSS — синтаксис расширения

Кроме базовых правил написания (фигурные скобки, точка с запятой в конце строк), SASS и SCSS различаются также написанием некоторых функций. Так что будьте внимательны при использовании каких-либо примеров из интернета, проверяйте, какой именно синтаксис используется. Если довольно большой пример из интернета выполнен в SCSS стиле, а ваш проект написан в SASS, вы можете его импортировать в ваш основной файл, не меняя синтаксис и расширение файла посредством директивы @import, например, если вы скачали файл carousel.scss, то можете подключить его в ваш main.sass строкой @import «carousel». Также можно поступить в обратной ситуации, когда необходимо импортировать *.sass файлы в файл main.scss. В нашем примере с Гитхаба, мы импортируем все _x.x.sass файлы в один common.sass, где x.x — это номер заголовка примера из данной статьи.

Мы будем использовать синтаксис отступов.

1. Расширение возможностей CSS с помощью Sass

1.1 Правила вложения

Sass дает разработчикам замечательную возможность использовать вложение одних CSS правил в другие, тем самым сокращая время на написание/копирование длинных селекторов и делая код более структурированным, с четкой иерархией.

Sass CSS — готовый результат
Sass CSS — готовый результат

1.2 Привязка к родительскому селектору

Если вы хотите расширить селектор, не создавая нового правила, вы можете привязать к готовому селектору дополнительные селекторы, используя знак &. Внешне это выглядит как создание дочернего селектора в иерархии, но с использованием &, мы расширяем именно родительский селектор, а не создаем дочерний.

Sass CSS — готовый результат
Sass CSS — готовый результат

Обратите внимание на правило body.firefox &, которое позволяет нам получить новую цепочку от любого элемента до текущего, если установить в конце &.

Кроме того, привязку к родителю можно использовать для создания составных селекторов:

Sass CSS — готовый результат

1.3 Вложенные свойства

Для удобства, вы можете разбивать суффикс пространства имен свойства на вложения. Например, margin-top, margin-bottom, margin-left, margin-right имеют общую основу margin и могут быть разбиты на вложения следующим образом:

Sass CSS — готовый результат

1.4 Селекторы-шаблоны

Иногда возникает ситуация, когда несколько элементов на странице используют одинаковую CSS базу, одинаковый набор свойств, характерный только для них. Данные базовые CSS правила можно оформить в виде селектора-шаблона для использования в нескольких местах Sass. Селекторы-шаблоны выводятся посредством директивы @extend.

Sass CSS — готовый результат

2. SassScript

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

2.1 Переменные в Sass

Это действительно замечательная возможность — определять переменные, которые можно использовать в любом месте вашего Sass файла. Цвета, дефолтные значения, единицы, все это можно взять в переменную и использовать в дальнейшем. Переменная определяется так: $название: значение.

Sass CSS — готовый результат

2.2 Операции с числами и строками + интерполяция

Sass дает возможность использовать стандартные арифметические операции над числами, такие как сложение (+), вычитание (-), деление (/) и остаток от деления по модулю (%). Операторы сравнения ( , =, ==, !=) также поддерживаются для чисел.

Кроме того, в Sass есть возможность конкатенировать (соединять) строки.

Sass CSS — готовый результат

Как видим из примера $summ: 10 + 20 / 2, соблюдается приоритет в выполнении арифметических операций — сначала деление, потом сложение. Для определения порядка действий, можно использовать круглые скобки, как в математике. Обратите внимание, что при сложении 12px + 8px, мы получим 20px.

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

Интерполяция — это получение нового значения, используя другие.

Чаще всего интерполяция в Sass используется для получения нового значения переменной, благодаря «интегрированию» в значение другой переменной, посредством конструкции #<>, например:

Sass CSS — готовый результат

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

2.3 Операции с цветами

Цвета в Sass можно складывать, вычетать, делить и умножать. Все арифметические операции выполняются для каждого цвета отдельно: красного, зеленого и синего.

Sass CSS — готовый результат

Обратите внимание, что при сложении rgba цветов, последний параметр непрозрачности 0.75 не должен отличаться от других в выражении, иначе произойдет ошибка сложения. Вместо этого, можно регулировать альфа-канал rgba, используя opacify и transparentize или управлять непрозрачностью HEX цвета, посредством функции rgba.

Sass CSS — готовый результат

3. Директивы и правила

3.1 @import

Вы можете импортировать в ваш Sass файл sass, scss и css файлы с помощью директивы @import, при этом все миксины и переменные будут работать в основном файле, в который происходит импорт.

@import сработает как обычный CSS @import, если:

  • в пути к файлу присутствует http://;
  • файл вызывается через url();
  • или в импорте присутствуют медиапараметры.

Для того, чтобы другой файл был полноценно импортирован в основной Sass файл, необходимо, чтобы расширение файла было *.sass, *.scss или *.css.

Давайте рассмотрим некоторые примеры.

Следующие файлы импортированы не будут:

Sass CSS — готовый результат

Следующие файлы будут импортированы:

Sass CSS — готовый результат

Внимание! В новых версиях gulp-sass для импорта CSS файлов в Sass необходимо указывать расширение .css

Возможен импорт нескольких файлов, через запятую: @import «header», «media».

Файлы, которые начинаются с нижнего подчеркивания, называются фрагменты и при импорте не требуют указания подчеркивания и расширения. Например, файл _header.sass можно импортировать так: @import «header».

Обратите внимание, что импорт происходит в том месте, где вы указываете директиву @import. Соответственно, есть возможность делать вложенный импорт в том месте, где это необходимо:

3.2 @at-root

Директива @at-root поднимает содержимые в ней правила в корень, отменяя цепочку от родителя. Тут все просто:

Sass CSS — готовый результат

Мы рассмотрели не все директивы, которые есть в Sass, а только самые используемые на практике. Если вас интересует более глубокое изучение Sass директив, обратитесь к документации.

4. Выражения

Sass поддерживает использование выражений и функций для различных условий, реализации циклов и т.д.

4.1 Директива @if()

Директива @if() позволяет осуществить выполнение SassScript с определенными условиями и имеет следующий синтаксис:

Sass CSS — готовый результат

4.2 Директива @for

@for выводит блок со стилями определенное количество раз. Во время выполнения можно задать переменную-счетчик.

Sass CSS — готовый результат

Вы можете указать through вместо to, если требуется пройтись от 1 до 11 включительно, а не только до 10, как в примере.

4.3 Директива @each

Если требуется пройтись по списку значений, а не просто чисел, можно использовать директиву @each:

Sass CSS — готовый результат

4.4 Директива @while

@while циклично выводит блоки стилей, пока выражение является true.

Sass CSS — готовый результат

5. Миксины

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

Миксин объявляется директивой @mixin, после объявления должно быть указано имя миксина. Вызывается миксин директивой @include, которая принимает имя миксина и передаваемые аргументы, если такие имеют место быть.

Sass CSS — готовый результат

Друзья, мы рассмотрели основные возможности Sass, которых достаточно для плодотворной работы с CSS стилями сайта. Некоторые директивы и возмоности не вошли в данное руководство, но если вам интересно узнать обо всех возможностях Sass, почитайте документацию, будет полезно.

Сразу отвечу на вопрос — как работать с Sass стилями на готовом сайте, неужели нужно править готовый CSS и заливать по FTP? Нет, так делать нельзя. Вы должны иметь локальную копию ваших Sass стилей или даже целого сайта и после окончания работы деплоить (выгружать) по FTP готовые стили. Для этого, вы можете использовать Gulp пакет vinyl-ftp. Или настроить Sass окружение на вашем сервере для компиляции загружаемых по FTP/sFTP файлов.

Премиум уроки от WebDesign Master

Создание контентного сайта на Jekyll от А до Я

Создание современного интернет-магазина от А до Я

Я — фрилансер! — Руководство успешного фрилансера

Препроцессор SASS. Изучаем SASS для быстрой верстки. CSS компилятор для быстрой верстки шаблонов и макетов сайта.

Что такое SASS и SCSS? Обзор препроцессора SASS. Разница между SASS и SCSS

Привет, посетитель сайта ZametkiNaPolyah.ru! Продолжим рубрику Верстка сайтов, в которой этой записью я открою новый раздел Препроцессор SASS и SCSS. Хочу обратить твое внимание, что на моем блоге есть раздел Препроцессор LESS, вести этих две ветки я буду параллельно, чтобы ты мог в итоге выбрать, какой из CSS препроцессоров тебе больше по душе и чем ты будешь пользоваться для создания своего сайта. Замечу, что эти CSS препроцессоры похожи друг на друга и изучив один, ты с легкостью освоишь другой, но отличаются они синтаксисом и некоторыми особенностями реализации, а так же у них немного разные возможности.

Что такое SASS и SCSS? Обзор препроцессора SASS. Разница между SASS и SCSS

А теперь давай я напишу о том, что ты узнаешь из этой публикации: 1) ты узнаешь о том, что такое CSS препроцессор SASS и SCSS; 2) поймешь в чем разница между SASS и SCSS; 2) прочитаешь о том, как SASS и SCSS расширяют возможности CSS и как они помогут тебе ускорить процесс верстки макета; 3) получишь полную, но краткую информацию о возможностях рассматриваемого CSS препроцессора; 4) узнаешь о плюсах и минусах использования SASS и SCSS на своём сайте и в своих проектах.

Что такое препроцессор SASS и чем отличается SASS от SCSS?

SASS – это препроцессор CSS, основной задачей которого является расширение возможностей написания CSS кода, препроцессор SASS в разы ускоряет написание кода CSS и в разы облегчает его обслуживание. SASS представляет собой язык, похожий на язык программирования, который облегчает и ускоряет разработку CSS. SASS является компилируемым язык и в чистом виде браузер его не обрабатывает. Когда говорят о препроцессоре SASS, часто упоминают SCSS.

Давайте сразу определимся, чем отличается SASS от SCSS и в чем между ними разница. На самом деле разница между SASS и SCSS только в синтаксисе: разные правила написания кода, но функционал SASS и SCSS полностью одинаков.

Раз CSS препроцессор SASS – это компилируемый язык, то у этого языка должен быть компилятор, который бы преобразовывал код, написанный на SASS или SCSS в чистый CSS код, компилятор SASS и SCSS написан на языке Ruby, поэтому всем владельцам платформ Windows прежде чем использовать SASS или SCSS рекомендуется установить Ruby.

Обратите внимание: SASS и SCSS генерируют чистый, кросс-браузерный и валидный код, но, чтобы CSS код был чистым: 1) вы должны знать CSS; 2) вы должны знать принцип работы SASS или SCSS, в противном случае на компилятор нечего пенять.

В препроцессоре SASS и SCSS реализовано очень много фишек, которые в разы ускорят разработку кода CSS. В процессе изучения SASS мы будем параллельно изучать и SCSS: все что я буду писать для SASS, будет работать так же и на SCSS, примеры будут как для SASS, так и для SCSS.

Функционал SASS, расширяем возможности CSS с SASS и SCSS

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

  1. Препроцессор SASS и SCSS поддерживает вложенные правила, которые делают CSS код намного более читабельным, логичным и естественным, язык HTML поддерживает строгую иерархию, в CSS такой иерархии нет. А вот в SASS и SCSS можно сделать написание правил иерархичным, так же вложенные правила SASS позволяют избежать повторов в коде.
  2. Препроцессор SASS и SCSS позволяют указывать родительские селекторы. В HTML элементы страницы могут быть вложены друг в друга и внешний элемент – родительский, вложенный элемент – дочерний. В SASS и SCSS это можно отразить.
  3. Препроцессор SASS и SCSS поддерживает вложенные свойства. В CSS много свойств, начинающихся с font, в SASS и SCSS вы можете откинуть слово font и писать: size, weight и другие.
  4. Препроцессор SASS и SCSS поддерживает шаблонные селекторы, благодаря которым все стили, заданные одному селектору, можно задать другому, просто написав одну строчку кода.
  5. В SASS и SCSS есть комментарии, но они есть и в CSS.
  6. SASS и SCSS используют язык SassScript, у которого есть интерактивная оболочка.
  7. Препроцессор SASS и SCSS поддерживает работу с переменными, чтобы можно было изменять повторяющиеся значения в одном месте, а не пролистывать весь CSS файл.
  8. SASS и SCSS могут работать с различными типами данных: строки, списки, ассоциативные массивы и даже цвет – это тип данных в SASS.
  9. SASS и SCSS дают возможность производить операции, которых нет в CSS: можно производить математические операции, операции с цветами, операции с логическими значениями и операции со списками.
  10. В SASS и SCSS можно задать порядок действия при операциях круглыми скобками.
  11. Препроцессор SASS и SCSS имеет набор встроенных функций, которым можно передавать параметры.
  12. Переменные в SASS и SCSS можно использовать при именовании селекторов и при именовании CSS свойств.
  13. Переменные в SASS и SCSS могут иметь значения по умолчанию, что очень часто позволяет избегать ошибок при написании кода.
  14. SASS и SCSS поддерживают все CSS директивы.
  15. В SASS и SCSS есть логические конструкции, которые называются логические директивы: if, for, each, while.
  16. Препроцессор SASS и SCSS поддерживает миксины. Миксины в SASS и SCSS позволяют повторно использовать стили.
  17. Препроцессор SASS и SCSS поддерживает пользовательские функции, которые вы можете самостоятельно написать, а потом использовать сколько вам угодно.
  18. На выходе компилятора/интерпретатора SASS/SCSS можно получать CSS файлы, которые оформлены по-разному (разница в пробельных символах).
  19. Препроцессор SASS кэширует свои файлы, то есть он сохраняет в виде CSS самые часто используемые куски кода и не компилирует их повторно.

Я сделал лишь краткий, но полный обзор возможностей препроцессора SASS и SCSS. Надеюсь, что он вам помог решить: стоит или нет тратить время на изучение данного CSS препроцессора, но в одном вы можете быть уверены точно: CSS разработка с SASS в разы быстрее, но только в том случае, когда вы уже знаете CSS и изучите SASS. На первых парах использование SASS может внести некоторые затруднения, которые в дальнейшем окупятся.

Недостатки и преимущества SASS и SCSS

Давайте рассмотрим недостатки и преимущества препроцессора SASS и SCSS. Начнем мы, конечно же, с преимуществ препроцессора SASS и SCSS:

  1. SASS и SCSS позволяют разрабатывать чистый CSS код и при этом использовать некоторые конструкции из программирования.
  2. Препроцессор SASS и SCSS позволяет в разы ускорить написание CSS кода.
  3. SASS и SCSS поддерживают все языковые конструкции CSS всех версий.
  4. Вы можете использовать SASS и SCSS с любым известным CSS фреймворком.
  5. SASS и SCSS используют вложения и разные полезные функции.
  6. У SASS и SCSS очень много преимуществ, но ощутите вы их только тогда, когда в полной мере изучите данный препроцессор.

Препроцессор SASS и SCSS имеет и недостатки, давайте на них посмотрим:

  1. Если вы плохо знаете CSS, то SASS и SCSS вам ничем не помогут, хотя можно совместить полезное с полезным.
  2. На изучение всех функций SASS и SCSS потребуется довольно большое количество времени.
  3. Если к файлу с расширением .sass или .scss подключится несколько разработчиков и начнут править его одновременно, то у компилятора/интерпретатора могут возникнуть проблемы.
  4. А еще инспектор HTML элементов, встроенный в браузер, не всегда сможет вам помочь, если вы используете SASS или SCSS.

Мы познакомились с SASS и SCSS, узнали в чем разница между SASS и SCSS, разобрались с недостатками и преимуществами SASS и SCSS, но главное, сделали для себя вывод, что SASS и SCSS действительно помогают ускорить работу по верстке HTML.

Препроцессор Sass. Полное руководство и зачем он нужен

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

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

Сразу обратите внимание, что если вам нужен простой функционал, такой как перменные, то в простом CSS они уже появились и не нужно загружать себя таким инструментом как Sass. Вот статья — Руководство по работе с переменными в CSS

Синтаксис

Для Sass доступно два синтаксиса. Первый, известный как SCSS (Sassy CSS) и используемый повсюду в этой статье — это расширенный синтаксис CSS. Это означает, что каждая валидная таблица стилей CSS это валидный SCSS файл, несущий в себе туже самую логику. Более того, SCSS понимает большинство хаков в CSS и вендорные синтаксисы, например такой как синтаксис фильтра в старом IE. Этот синтаксис улучшен Sass функционалом описанным ниже. Файлы использующие этот синтаксис имеют .scss расширение.

Второй и более старый синтаксис, также известный как краёный синтаксис или иногда просто Sass, даёт более сжатую возможность работы с CSS. Он использует отступы вместо скобок, что отделить вложения селекторов и новые строки вместо точек с запятой для разделения свойств. Иногда люди находят такой способ проще для понимания и быстрее для написания, чем SCSS. По факту, такой синтаксис имеет тот же функционал, хотя некоторые из них имеют слегка другой подход. Файлы используемые этот синтаксис имеют расширение .sass .

Любой синтаксис может импортировать файлы, написанные в другом. Файлы могут быть автоматически сконвертированы из одного в другой, используя sass-convert команду:

Использование Sass

Sass может быть использован тремя способами: как командной строкой, как отдельный модуль Ruby и как плагин для rack-фреймворка, включая Ruby on Rails и Merb. Первым делом для всего этого надо установить Sass гем:

Если вы на Windows, то возможно вам надо установить сначала Ruby.

Для запуска Sass из командной строки просто используйте:

sass input.scss output.css

Вы также можете указать Sass следить за файлом и обновлять CSS каждый раз, когда Sass файл меняется:

sass —watch input.scss:output.css

Если у вас есть директория с множеством Sass файлов, то вы также можете указать Sass следить за всей директорией:

sass —watch app/sass:public/stylesheets

Используйте sass —help для полной документации.

Введение в Sass: установка и основы

Сегодня мы хотим рассказать вам о CSS-препроцессоре под названием Sass или Syntactically Awesome Stylesheets.

Если вы читали наши статьи о LESS, то уже наверняка знакомы с CSS-препроцессорами. Как Sass , так и LESS представляют собой CSS-препроцессоры, которые, прежде всего, преобразуют способ, в котором мы компилируем простой статичный CSS-код, в более динамичный способ применения языка программирования, включая перемеренные, миксины и функции.

Перед тем, как у нас будет возможность компилировать Sass, нам нужно установить его. Sass разработан на основе Ruby . Если вы работаете на Mac, то есть вероятность, что у вас уже установлен Ruby. Если вы хотите установить Ruby на Windows, используйте установщик Ruby .

После того, как установка будет завершена, вы можете перейти в Терминал (на Mac), либо в командную строку (в Windows), а затем вписать следующую команду:

Если установка пройдет успешно, перед вами появится следующее оповещение.

Далее нам надо выбрать, за каким каталогом Sass должен следить, используя следующую команду;

Команда, приведенная выше, будет отслеживать все файлы .scss/.sass в выбранной директории, и каждый раз, когда файлы этой директории будут изменяться, Sass будет обновлять соответствующие файлы, либо создавать новые.

Если нам нужно, чтобы Sass генерировал файлы в определенной директории, то нужно сделать следующее:

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

Если команда пройдет успешно, то вы увидите оповещение вроде следующего:

Тем не менее, если вам не нравится работать через терминал или командную строку, вы можете использовать некоторые приложения для работы с Sass. Из бесплатных мы можем выделить Scout . Приложение было разработано на Adobe Air, поэтому запустить его можно на всех ОС (Windows, OSX и Linux).

Правда, работает оно очень медленно, судя по отзывам.

Если у вас не хватит терпения, есть также и платные варианты. Цены варьируются от приложения к приложению: Compass.app стоит $10, Fire.app $14, а Codekit – $25.

Хотя Sass является, прежде всего, CSS-расширением, ваш текущий редактор, возможно, не сможет выделять синтаксис. К счастью, сейчас доступны некоторые дополнения практически для всех редакторов кода, которые позволяют подсвечивать код .sass и .scss.

Если вы работаете в Sublime Text 2, то можете воспользоваться этими дополнениями: Sublime Text HAML & Sass и Sublime Text 2 Sass Package , и для того, чтобы облегчить себе задачу, вы можете установить их посредством Package Control.

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

Sass и LESS, на самом деле, разделяют много общего:

Единственное отличие от переменных в LESS заключается в том, что переменная в Sass определяется знаком $.

Миксины и функции

В LESS вы можете сделать то же самое посредством выражения Guard , о котором можно почитать в этом руководстве .

И на этом все! В следующих статьях мы хотим рассказать вам о Sass-языке и его коллеге, Compass. Следите за обновлениями!

Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Введение в Sass для дизайнеров тем в WordPress

Что такое Sass?

CSS, который мы используем был разработан, чтобы быть простым в использовании языка таблиц стилей. Однако веб претерпела изменения, и поэтому потребность дизайнеров иметь язык таблицы стилей, который позволяет им делать больше с меньшими затратами сил и времени. Языки CSS препроцессора, как Sass, позволяют использовать функции, которые в настоящее время не доступны в CSS, такие как использование переменных, основные математические операторы, Верстка, Mixins и т.д.

Он очень похож на PHP, который является язык препроцессор, который выполняет сценарий на сервере и генерирует вывод HTML. Кроме того, Sass производит предварительную обработку файлов .scss для создания файлов CSS, которые могут быть использованы браузерами.

Начиная с версии 3.8 , WordPress стили в админки были портированы для использования Sass. Есть много WordPress тематических магазинов и разработчиков, которые уже используют Sass, чтобы ускорить процесс их развития.

Начало работы с Sass для развития тем WordPress

Большинство тематических дизайнеров используют местную среду разработки, чтобы работать над своими темами перед развертыванием в промежуточной среды или живого сервера. Так как Sass это язык препроцессор, вам нужно будет установить его на локальной среде разработки.

Первое , что вам нужно сделать, это установить Sass. Он может быть использован в качестве инструмента командной строки, но есть и некоторые интересные приложения с графическим интерфейсом , доступные для Sass. Мы рекомендуем использовать Koala, который является бесплатным приложением с открытым исходным кодом доступный для Mac, Windows и Linux.

Ради этой статьи, вам нужно будет создать пустую тему. Просто создайте новую папку в /wp-content/themes/ . Вы можете назвать его ‘MyThemes’ или что – нибудь другое. Внутри вашей пустой папки темы создайте другую папку и назовите его style.

В папке стилей, вам нужно создать файл style.scss с помощью текстового редактора, такого как Блокнот.

Теперь вам нужно открыть Koala и нажать на иконку плюс, чтобы добавить новый проект. Затем найдите свой каталог темы и добавьте его в свой проект. Вы заметите, что Коала автоматически найдет файл Sass в каталоге стилей и отобразит его.

Щелкните правой кнопкой мыши на файле Sass и выберите вариант Set Output Path. Теперь выберите корень вашего каталога темы, например, /wp-content/themes/mythemes/ и нажмите кнопку ввода. Koala сгенерирует выходной CSS файл в каталоге темы. Чтобы проверить это необходимо открыть файл style.scss в текстовом редакторе как Блокнот и добавить этот код:

Теперь вам нужно сохранить изменения и вернуться к Koala. Щелкните правой кнопкой мыши на файле Sass, и боковая панель будет откроется справа.Для компиляции файла Sass просто нажмите на кнопку ‘Compile’. Вы можете увидеть результаты, открыв файл style.css в каталоге темы, и он будет иметь обработанный CSS следующим образом:

Обратите внимание, что мы определили переменную $fonts в нашем файле Sass. Теперь, когда нам нужно добавить семейство шрифтов нам не нужно снова вводить имена всех шрифтов. Мы можем просто использовать $fonts .

Какие еще сверхспособности Sass приносит в CSS?

Sass является невероятно мощным, обратная совместимость, и очень проста в освоении. Как мы уже упоминали ранее, вы можете создавать переменные, nesting, mixins, импорт, математические и логические операторы и т.д. Теперь мы покажем вам несколько примеров, и вы можете попробовать их на вашей теме WordPress.

Управление несколькими таблицами стилей

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

Как насчет CSS @import?

Проблема с использованием @import в файле CSS является то, что каждый раз, когда вы добавляете @import, файл CSS делает еще один запрос HTTP на сервер. Это влияет на ваше время загрузки страницы, которая не подходит для вашего проекта. С другой стороны, когда вы используете @import в Sass, он будет включать в себя файлы в файле Sass и обслуживать их все в одном файле CSS для браузеров.

Чтобы узнать, как использовать @import в Sass, сначала нужно создать файл reset.scss в директории стилей вашей темы и вставьте этот код в него.

Теперь вам нужно открыть свой основной файл style.scss и добавить эту строку, где вы хотите вставить файл для импорта:

Обратите внимание на то, что вам не нужно вводить полное имя файла. Для компиляции этого вам необходимо открыть Koala и нажать на кнопку компиляции снова. Теперь откройте главный файл style.css в вашей теме, и вы увидите ваш файл reset CSS включен в него.

Nestin в Sass

В отличие от HTML, CSS не является вложенным языком. Sass позволяет создавать вложенные файлы, которыми легко управлять и работать. Например, вы можете вложить все элементы для раздела под селектором статьи. Для дизайнеров тем в WordPress, это позволяет легко работать на разных разделах и стиля каждого элемента. Чтобы увидеть Nestin в действии, добавьте это в ваш файл style.scss :

После обработки он выведет следующий CSS:

В качестве дизайнера темы, вы будете проектировать другой внешний вид для виджетов, постов, меню навигации, заголовков и т.д. Использование Nestin в Sass делает его хорошо структурированным, и вы не должны писать одни и те же классы, селекторы и идентификаторы снова.

Использование Mixins в Sass

Иногда вам нужно будет повторно использовать некоторые CSS вне вашего проекта, даже если правила стиля будет таким же, потому что вы будете использовать их для разных селекторов и классов. Вот где Mixins пригодится. Он позволяет добавить mixin в файл style.scss:

Это в основном Mixin скрывает некоторый текст для отображения. Вот пример того, как можно использовать Mixins, чтобы скрыть текст для вашего логотипа:

Обратите внимание на то, что вам нужно использовать @include для добавления Mixins. После обработки он будет генерировать следующий CSS:

Mixins также очень полезен с префиксами. При добавлении значения непрозрачности или радиус границы, используя Mixins вы можете сэкономить много времени. Посмотрите на этот пример, где мы добавили радиус границы.

После компиляции, он сгенерирует следующий CSS:

Мы надеемся, что эта статья помогла понять важность применения Sass для развития тем в WordPress. Многие дизайнеры тем WordPress уже используют его. Некоторые считают, что в будущем CSS станет препроцессором. Дайте нам знать, что вы думаете об использовании языка CSS препроцессора как Sass для развития темы WordPress, оставив комментарий ниже.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Стоит ли использовать препроцессор отличный от SCSS?

Решил чуть глубже копнуть историю препроцессоров. И будет пару вопросов людям, которые могли бы подсказать.
В двух словах, история получается такой что на сегодня есть только
Sass/SCSS, Less, Stylus

  • Sass Вначале рубиновцы придумали упростить себе жизнь со стилями, и приблизить до руби-подобной простоты, убрав из цсс скобки, точку с запятой, и добавив плюшек типа миксины, переменные и математику. Так появился Sass.
  • LESS Но не всем понравился такой радикализм, потому придумали сделать такой же велосипед с миксинами и переменными, только синтаксис оставить как у цсс, со скобками и точкозапятыми. Так родился LESS.
  • SCSS В Sass подумали, и решили что действительно погорячились, так что сделали что упрощенный формат будет альтернативным, внеся в Sass второй вариант синтаксиса, тоже такой же как в нативном цсс. Так родился SCSS. Который все равно называют Sass. Просто первую версию считают «сасс с отступами», и поддерживают оба варианта диалектов.
  • Stylus Но не всем стало по душе что революция «долой скобки и точкисзапятой» была подавлена, потому решили пойти дальше, придумав что можно хоть так хоть этак, то есть в одном файле использовать и чистый цсс стиль синтаксиса, и облегченный. Да и вообще, можно даже двоеточие упразднить — компуктер и так поймет что есть что, и сам поразгребает все эти заклинания. Так родился Stylys.
  • альтернативы У меня в заначках числятся мелкие проекты, типа Myth, Resin, styl, sly, Rework, CSSOnDiet, csscrush, Stylecow, suitcss,
    и постпроцессоры, типа PostCSS и pleeease

Есть конечно еще «небольшое» отличие — если Сасс работает на руби(ок, есть реализации для других серверных языков, и библиотека на си), и когда ты пишешь стили, их надо компилировать, то есть в продакшн ты все равно отдаешь собранный ЦСС, то ЛЕСС уже работает на JS, потому его можно просто отдавать браузеру, подключив .js файлик(хотя тоже можно собирать).

Вот и мои вопросы:
0 вот тут есть известный ежегодный опрос фронтендеров, где среди прочего нас интересует:
Sass 65.39%,
No Preprocessor 14.58%
PostCSS 8.66%
Less 6.52%
Stylus 2.18%
Other 2.67%

1 Итого, реально есть 3 препроцессора. Везде в интернетах, где обсуждают препроцессоры, говорят только о трех. В последнее время добавляется еще обработчик postCSS (тут пока оставим в стороне дискуссию что такое пре- и пост- процессоры, и что по сути в данном случае это одно и то же, и даже скорей этопросто «процессоры», без пре- и пост-).
Знаете ли вы еще какие-то варианты цсс препроцессоров кроме перечисленных, на которые стоило бы обратить внимание и потратить время? Используете ли что-то кроме. sass?

2 Почему, раз всё началось с DRY, все равно вернулись к обычному цсс «избыточному» синтаксису? Ведь ни sass ни stylus, при прочих равных плюшках, но с простым чистым синтаксисом, не стали столь же популярными, как scss и less, которым нужны скобки, кавычки и точки с запятой.

3 почему сасс выиграл гонку у лесс(даже бутстрап пересел на сасс в 4й версии), тогда как препроцессинг немного более муторный, чем просто возможность подключить жаваскрипт, и отдавать как есть на клиента?

4 Почему такой крутой стайлус, где больше плюшек от «настоящего языка программирования», и даже свои фреймворки есть, вообще где-то на задворках по проценту его использования? Даже Koala не может его компилировать. И в VS Studio live reload с ним не работает(впрочем, с Sass тоже, хотя с scss работает)

5 Есть ли вообще смысл использовать Stylus? Или забить, и пользовать сцсс, как все?

6 интересная статья 2020года, задающаяся вопросом нужны ли сейчас препроцессоры, или можно обойтись нативными средствами цсс, которые пытаются реализовать преимущества препроцессоров(математические выражения, переменные, вложенность, миксины). Приходит ко мнению что препроцессоры скорее еще нужны. А в комментах даю ссылки на статьи, где знатные верстуны рассказывают почему не пользуют препроцессоры.

7 Но есть мнение, что достаточно просто писать ванильный цсс, и отдавать постпроцессору. Я не улавливаю чем постпроцессор может заменить препроцессор. Вот почему некто может отказаться от sass и перейти только на postcss?

Препроцессор Sass. Введение

Для упрощения работы с стилями css особенно в крупных проектах нередко используются препроцессоры Less и Sass, которые позволяют создавать более комплексные таблицы стилей. Less и Saas позволяют уменьшить дублирование кода css, более оптимально организовать стили. И Visual Studio предоставляет встроенную поддержку для Less и Sass, а также ряд связанных с этими препроцессорами расширений, которые могут помочь при разработке. Рассмотрим, как мы можем применять эти препроцессоры в ASP.NET Core.

Для работы с Less возьмем стандартный проект ASP.NET Core по типу Web Application и вначале добавим в него папку, которая будет хранить файлы Less. Пусть эта папка называется Less . Затем в эту папку добавим новый элемент по типу LESS Style Sheet и назовем его styles.less :

Определим в файле styles.less следующее содержимое:

@base-color и остальные элементы, которые начинаются с символа альфы @, являются переменными. Каждая переменная несет определенное значение. После определения переменных идут стандартные определения стилей css, правда, вместо конкретных значений они ссылаются на переменные.

Файл с кодом less сам по себе ничего не дает. В итоге нам надо его превратить в файл css. Для этого можно использовать менеджеры автоматизации задач, такие как Gulp или Grunt. В данном случае мы будем использовать Gulp.

Для этого вначале добавим в проект новый элемент по типу npm Configuration File , который назовем package.json

Далее добавим в этот файл функционал Gulp для работы с Less:

После сохранения файла в проект будет добавлен соответствующий пакет.

Затем добавим в проект файл конфигурации Gulp — элемент Gulp Configuration File , который назовем gulpfile.js :

И далее изменим его следующим образом:

Затем через окно Task Runner Explorer запустим задачу Gulp:

И после этого в папке wwwroot/css появится следующий файл styles.css:

Использование Sass аналогично Less за тем исключением, что немного отличается синтаксис. Вначале добавим в проект новую папку, которую назовем Saas и которая будет хранить файлы Sass. Затем в эту папку добавим новый элемент SCSS Style Sheet (SASS) , который назовем styles2.scss:

В этом файле определим следующий код:

Как можно заметить, данный код похож на код в файле styles.less, только объявление переменных начинается не со знака @, а со знака $.

Как и в случае с Less прежде всего нам надо добавить в файл package.json информацию о модуле gulp, который позволит работать с Sass:

И также изменим файл gulpfile.js :

Также перейдем к окну Task Runner Explorer и запустим определенную выше задачу:

Настраиваем препроцессор sass

Sass это один из наиболее стабильных препроцессоров и самый популярный у профи.

Рассмотрим его сильные стороны.

Это совместимость с разными версиями css, поэтому можно использовать любые css библиотеки в проекте.

Также синтаксис sass упрощает работу и разнообразит разработку.

Настройка окружения для работы

Подключаем sass используя gulp.

Убедитесь, что у вас установленная последняя версия gulp и node.js.

Для это пропишем команды npm –v и gulp –v.

Если не установлено, то переходим в статью как установить gulp.

Для установки пакетов пропишем команду npm I –save-dev gulp gulp-sass.

После установки пакетов появится node_modules.

Создадим gulpfile.js и прописываем.

Разберем подробно файл.

Первой строкой мы подключаем gulp и присваиваем его к переменной gulp.

Следующая строка подключает sass пакет.

Затем создаем таск sass, который будет преобразовывать sass в css.

Вначале берем источник все sass файлы в папке sass и всех подпапках.

Далее преобразуем sass в css со следующими параметрами expanded для того, чтобы на выходе получился развернутый css.

Стили также бывают вложенными, компактными и сжатыми с соответствующими параметрами.

Благодаря обработке on error мы увидим в какой строке sass файла у нас ошибка.

И в заключении выводим в папку css готовые стили.

Таском watch наблюдаем за изменением sass и если появляются изменения, то выполняем таск sass, из квадратных скобочек мы ссылаемся на таск sass.

К дефолтному таску приравниваем таск watch, чтобы он выполнялся по умолчанию.

Запустим gulp через командную строку. Gulp.

Создадим папку css и создадим папку sass, в которой будут лежать все исходники.

Добавим main.sass и в нем зададим стиль любой, например, background-color: #green.

Увидим, что в папке css появится файл main.css, откроем его и увидим автоматически скомпилированный стиль.

Синтаксис sass

Есть два вида вида написания sass и scss.

Мы будем использовать вариант написания с отступами.

Расширение для этого синтаксиса .sass.

Этот синтаксис требует четкого соблюдения отступов при написании.

Используем в документе только tab, без пробелов.

Правила вложения

Sass дает возможность использовать вложение одних css правил в другие.

Этим сокращается время на написание и копирование длинных селекторов, делая код структурированным с четкой иерархией.

Первый пример, есть .main-menu с дочерним селектором ul и li.

Это компилируется в отдельный селектор .main-menu ul и .main-menu li, тем самым сокращается время.

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

Вложенные свойства

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

Можно любые css свойства, в которых содержится черточка разбивать на вложенные свойства.

Селекторы шаблоны.

Иногда несколько элементов страницы используют одну и туже css базу, эти правила можно оформить в виде селектора шаблона, для использования в разных местах sass.

Селекторы шаблоны выводятся при помощи директивы extend, задаются со знаком процента.

Extend подключаем два элемента, а в css появляются через запятую все селекторы, в которых есть extand и в итоге они содержат одинаковый набор правил.

Переменные в sass

Зададим переменную. Пропишем название переменной, двоеточие и значение переменной.

При интерполяции мы будем получать новые значения используя другие.

Третий пример, это сложение.

Директивы и правила

Импортируем все свойства из файла home в селектор используя @import.

Директива @at-root поднимает содержимые в ней файлы в корень, отменяя цепочку от родителя.

Sass поддерживает использование выражений и функций.

Разберем пример. Директива @for выводит блок со стилями определенное количество раз.

Во время выполнения можно задать переменную счетчика i.

Если нужно пройтись по списку значений используем директиву @each.

Миксины

Это блоки sass кода, которые могут принимать аргументы и сокращают затраты время на применения однотипных правил.

Это наподобие функции, которая принимает аргумент, выполняет работу и выдает результат в зависимости от входного параметра.

Миксин объявляется директивой @mixin, после его имя и в скобках аргументы.

Выводим миксин через @include. Пример.

Топ-пост этого месяца:  Выделение наименьшего предложения из строки
Добавить комментарий