Компиляция Sass-файла

Содержание

Препроцессор SASS. Установка и настройка в Sublime Text

Препроцессоры ускоряют работу верстальщика. Если с работой с препроцессором LESS все просто, установил плагин и он работает. То чтобы компилировать SASS нужно взять бубен и немного потанцевать с ним. Разберемся как настроить компиляцию SASS файлов в Sublime Text.

Как компилировать SASS файлы в Sublime Text.

Для начала необходимо установить Ruby. Переходим по ссылке, выбираем рекомендуемую версию Ruby для установки и скачиваем. На момент написания статьи это была версия Ruby 2.1.7 (x64). Соответственно выберите подходящую для вас разрядность.

В время установки необходимо установить флажок на пункте «Add Ruby executables to your PATH»

Настройка SASS build в Sublime Text. Ставим Ruby

После установки запускаем командную строку, сделать это можно сочетанием клавиш Win + R и набрав «cmd». В командной строке пишем «gem install sass». Когда SASS установится, в командной строке будет соответствующее уведомление:

Настройка SASS в Sublime Text. Ставим Ruby и SASS.

Теперь можно компилировать SASS в командной строке. Но намного удобнее делать это сразу в Sublime Text.

SASS файлы в Sublime Text

В Sublime Text устанавливаем Package Control, если он еще не установлен. Как это сделать я рассказывал в статье Установка плагинов на Sublime Text 2.

И устанавливаем в Sublime плагин SASS Build. Перезапускаем Sublime. Теперь вы можете компилировать файлы SASS в CSS внутри Sublime Text. Если файл не компилируется — необходимо при открытом файле зайти в меню Tools → Build System и выбрать пункт SASS. То есть указать Sublime какую билд систему использовать для компилирования.

Также рекомендую установить плагин SublimeOnSaveBuild — чтобы билд файла происходил не по клику Ctrl + ‘, а автоматически при сохранении файла (Ctrl + S).

Для подсветки кода SASS/SCSS необходимо установить плагины SASS и SCSS, и Syntax highlighting for SASS.

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

Если файл не компилируется, и в консоли выводятся похожие ошибки:

Есть решение которое должно помочь. Идем в меню Preferences → Browse Packages, открываем файл /Default/exec.py и делаем замену строки

proc_env[k] = os.path.expandvars(v).encode(sys.getfilesystemencoding()) на proc_env[k] = os.path.expandvars(v.decode(sys.getfilesystemencoding())).encode(sys.getfilesystemencoding())

Данная статья написана по этой инструкции.

15 полезных инструментов Sass и Compass

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

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

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

1. Compass.app

Compass — это фреймворк, который позволяет намного проще создавать и поддерживать стили и разметку. Используя Compass вы будете генерировать стили в Sass , вместо обычного CSS . Compass.app — это приложение с интерфейсом в виде панелей меню, работающее только с Sass и Compass .

Его применение позволяет дизайнерам очень просто компилировать стили, не используя интерфейс командной строки. Приложение Compass.app написано на Java ( JRuby ) и работает на Mac , Linux и РС . Чтобы использовать его, вам не нужно устанавливать среду Ruby .

2. Scout

Scout — это кроссплатформенное приложение, которое запускает Sass и Compass через встроенную среду Ruby , что позволяет легко управлять всеми вашими Sass -проектами. Теперь вам не придется беспокоиться об установке Ruby или заниматься другими техническими вопросами.

3. Codekit

Codekit — это мощный компилятор, который автоматически обрабатывает при сохранении файлы Sass , Compass , Less , Stylus , Jade , Haml , Slim , CoffeeScript и Javascript .

Применение интерактивного обновления окна браузера, оптимизации изображений и быстрой отладки позволяет сделать работу с Compass и Sass чрезвычайно простой. Данное приложение также поддерживает возможность коллективной/командной работы над проектом и помогает уменьшить время загрузки ресурсов с помощью объединения и минимизации файлов.

4. Archetype

Archteype — это Compass/Sass фреймворк для создания настраиваемых, совместимых шаблонов и компонентов интерфейсов. Archteype поставляется с обширной документацией и использует оригинальный синтаксис языков программирования.

5. Susy

Susy предоставляет пользователям адаптивные сетки для Compass . Тем самым заполняя пробел, возникший после того, как из Compass сетки были удалены. Вы можете быстро добавлять для новых макетов контрольные точки медиа-запросов или задавать свои собственные параметры, используя массив сеток Susy . Данный инструмент позволяет за считанные минуты создать небольшой сайт или масштабируемую библиотеку сеток для использования в крупных проектах.

6. The Sassway

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

7. Sassaparilla

Sassaparilla позволяет, используя Sass и Compass , значительно быстрее запускать адаптивные веб-проекты. Инструмент предназначен в основном для работы с макетами с вертикальной разбивкой элементов.

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

8. LivingStyleGuide

LivingStyleGuide Gem — инструмент, предназначенный для упрощения создания руководств по стилям для Sass и Compass . Для того чтобы создать руководство по стилям, просто добавьте к Sass свои комментарии в одном из форматов Markdown .

9. Pondasee

Инструмент Pondasee был разработан, чтобы ускорить процесс создания веб-приложений. Он обладает всеми возможностями и функциями SCSS и Compass , и предназначен для упрощения создания шаблонов.

10. LiveReload

LiveReload встраивается в панель меню и отслеживает все изменения в файловой системе. Как только вы сохраняете файл, он обрабатывается в соответствии с заданными параметрами, и окно браузера обновляется. LiveReload работает с движками SASS , Compass , LESS , Stylus , CoffeeScript , IcedCoffeeScript , Eco , SLIM , HAML и Jade . Он настраивается всего с помощью двух чекбоксов, чтобы вам не пришлось ломать голову над большим количеством опций.

11. Koala

Koala — это GUI -приложение для компиляции CoffeeScript , Compass , Less и Sass , которое делает процесс разработки веб-дизайна более эффективным. Приложение работает на Mac , Linux , и Windows , и включает в себя такие функции, как компиляция в режиме реального времени, поддержка нескольких языков программирования и многое другое.

12. Bootstrap Sass

Bootstrap-Sass — это Sass -версия Bootstrap , которая идеально подходит для разработки Sass -приложений. Инструмент может устанавливаться с Rails , Compass или только с Sass .

13. Forge

Forge — бесплатный набор инструментов, запускаемых из командной строки. Он предназначен для загрузки и разработки в соответствующей среде тем WordPress с использованием таких языков программирования, как Sass , LESS и CoffeeScript .

Forge создает структурированную исходную папку с четкой и простой иерархией ( файлы основных шаблонов, SCSS-файлы и опции темы ). При внесении изменений в процессе разработки исходная папка автоматически компилируется в локально установленную систему WordPress .

14. Prepros

Prepros — это приложение, разработанное для упрощения компиляции кода. Оно компилирует коды Sass , Scss , Compass , Less , Jade , Haml и CoffeeScript в режиме реального времени, с автоматическим обновлением окна браузера,. Приложение не имеет зависимостей и имеет такие средства, как встроенный HTTP -сервер, отслеживание файлов в фоновом режиме, уведомления об ошибках и интерактивное включение CSS .

15. Break Point

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

Данная публикация представляет собой перевод статьи « 15 Useful Sass and Compass Tools » , подготовленной дружной командой проекта Интернет-технологии.ру

Программа Koala — легкая компиляция Sass, Less и CoffeeScript

Программа Koala — легкая компиляция Sass, Less и CoffeeScript

Здравствуйте! Сегодня я начинаю цикл статей о препроцессорах CSS. И начать я хотел бы с обзора программы Koala, которая помагает компилировать код с LESS или SASS на CSS.

Koala — это кроссплатформенная программа для компиляции Less, Sass, Compass и CoffeeScript. Работает на Win, Mac OS и Linux.

Программа бесплатна и живет на благотворительные пожертвования. Впрочем, когда я попытался перевести ребятам на Paypal немного денег пару лет назад, сделать этого не получилось. Разработчики находятся в Китае, а Paypal там работает только на отправку денег. Тем не менее, программа от этого хуже не стала. Разберемся подробнее.

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

  • Поддержка нескольких языков: Koala работает с Less, Sass (*.scss), CoffeeScript и фреймворком Compass. Кроме того, она может компилировать и обыкновенные CSS и JS, не связанные с препроцессорами.
  • Компиляция в реальном времени: Koala отслеживает изменения файлов и автоматически компилирует их. Все действия происходят в фоновом режиме и не требуют вмешательства разработчика.
  • Настройка компиляции: Можно указывать разные компиляторы для каждого выбранного файла. Впрочем, это вам вряд ли понадобится.
  • Компрессия: Koala умеет автоматически сжимать код после компиляции. Эту функцию по желанию можно не использовать.
  • Сообщения об ошибках: Если программа встретила ошибку в коде при компиляции, она покажет уведомление. Если ошибок нет, просто будет пересоздан результирующий файл.
  • Кроссплатформенность: Koala работает на Windows, Mac и Linux.

Интерфейс

Основное окно программы содержит все активные проекты (слева) и основные элементы управления. Как видите, интерфейс минималистичен, разобраться в нем можно за пару минут.

Основные элементы управления всегда на виду. Вот для чего они нужны:

При переключении типов файлов из общего списка останутся только файлы выбранного типа.

Настройки SASS и LESS

В настройках есть приятные вещи. Возьмем вкладку с настройками Sass:

В два клика Koala начнет сохранять ваши Sass-файлы в CSS, никаких дополнительных плагинов устанавливать для Sass не потребуется.

Koala умеет автоматически добавлять кроссбраузерные префиксы для css-свойств, сохранять комментарии. В типе файла CSS я всегда рекомендую выбирать compressed, так его вес будет минимальным, а для удобства разработки оставлять включенными Source maps.

Автопрефиксы — это автоматическое добавление префиксов для поддержки свойств CSS3 в браузерах устаревших версий.

Например, для скругления углов в 3 пикселя вам будет достаточно написать:

…а после работы автопрефикса получите:

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

Настройки JavaScript и CoffeeScript

Для JS есть всего две настройки:

  1. Compress — всегда включайте, чтобы полученный js-файл сжимался.
  2. Preserve copyright comments

Для CoffeeScript в 99% случаев вы оставите настройки по умолчанию, поэтому останавливаться на них нет смысла.

Где скачать

Скачивайте программу с официального сайта разработчиков — koala-app.com. Там есть отдельные ссылки для Linux, Mac, Ubuntu.

В итоге

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

Koala хорошо подходит для начинающих разработчиков или тех, кто делает небольшой проект и не хочет разворачивать полную версию Gulp или Grunt.js.

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

Основы Sass

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

Илон Маск рекомендует:  Описание доменных зон

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

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

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

Самый простой способ получить такой результат — использовать терминал. После того, как Sass установлен, вы можете компилировать ваш Sass в CSS , используя команду sass . Вам всего лишь нужно сообщить Sass, где взять файл Sass и в какой файл CSS его скомпилировать. Например, запустив команду sass input.scss output.css в терминале, вы сообщаете Sass взять один Sass файл, input.scss , и скомпилировать в файл output.css .

Также, вы можете следить за изменениями только определенных файлов или папок, используя флаг —watch . Данный флаг сообщает Sass, что необходимо следить за изменениями указанных файлов и при наличии таковых производить перекомпиляцию CSS после сохранения файлов. Если вы хотите отслеживать изменения (вместо ручной перекомпиляции) вашего файла, например, input.scss , то вам необходимо просто добавить флаг в команду:

sass –watch input.scss output.css

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

Sass будет отслеживать все файлы в директории app/sass и компилировать CSS в директорию public/stylesheets .

Переменные

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

SCSS Syntax

Sass Syntax

CSS Output

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

Вложенности

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

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

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

SCSS Syntax

Sass Syntax

CSS Output

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

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

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

Импорт

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

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

SCSS Syntax

Sass Syntax

CSS Output

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

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

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

SCSS Syntax

Sass Syntax

CSS Output

To create a mixin you use the @mixin directive and give it a name. We’ve named our mixin transform . We’re also using the variable $property ins >CSS declaration starting with @include followed by the name of the mixin.

Расширение/Наследование

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

SCSS Syntax

Sass Syntax

CSS Output

Вышеуказанный код сообщает классам .message , .success , .error и .warning вести себя как %message-shared . Это означает, что где бы не вызывался %message-shared , то и .message , .success , .error и .warning тоже будут вызваны. Магия происходит в сгенерированном CSS , где каждый из этих классов получает css-свойства, как и %message-shared . Это позволит вам избежать написания множества классов в HTML элементах.

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

Когда вы генерируете ваш CSS , то он будет выглядеть как пример ниже. Обратите внимание, %equal-heights не попадает в CSS , так как ни разу не был использован.

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

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

SCSS Syntax

Sass Syntax

CSS Output

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

  • Текущие версии:
  • Dart Sass1.20.1
  • LibSass3.5.5
  • Ruby Sass ⚰

Sass © 2006–2020 Hampton Catlin, Natalie Weizenbaum, Chris Eppstein, Jina Anne, и многочисленные участники. Доступно для использования и изменения по лицензии MIT.

Koala — быстрая компиляция Sass.

В этой статье мы поговорим о программе Koala, которая позволяет очень быстро и легко компилировать Sass, используя графический интерфейс.

Если вы перейдете на страницу установки на официальном сайте Sass, то слева сможете найти список программ, в числе которых будет и наша. Именно Koala предпочитает большинство разработчиков, поскольку она является открытой(open source), бесплатной, а также легкой в использовании. Помимо всего прочего, она может работать под управлением операционных систем Mac, Windows и Linux.

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

Какие у Koala особенности?

  • Поддержка различных языков(Less, Sass, CoffeeScript, Compass Framework)
  • Компиляция в реальном времени(прослушивает файлы и компилирует их автоматически, если есть изменения)
  • Позволяет настраивать опции компиляции для каждого файла
  • Поддерживает создание глобального конфигурационного файла
  • Уведомление об ошибках(если что-то пойдет не так во время компиляции, Koala сообщит вам об этом)
  • Кроссплатформенная

После того, как вы скачали и установили программу, запустите ее. Перенесите в открывшееся окно программы папку вашего проекта. Вы должны увидеть ваши css и sass файлы, которые Koala автоматически определит и выведет. Если вы нажмете на файл, то справа выедет боковая панель, где вы можете выполнить различные настройки.

Если же вы нажмете на файл правой кнопкой мыши, то у вас появится окошко, где есть другие команды. Например, вы можете выбрать Open Output Folder, чтобы увидеть, куда будут компилироваться ваши Sass файлы, а также изменить это значение.

На самом деле, основную функцию(компиляцию) мы с вами разобрали, однако в программе есть и другие возможности. Как пример, вы можете установить галочку в пункте Autoprefix, чтобы ко всем css3 свойствам автоматически добавлялись нужные префиксы. Если вы хотите почитать про это подробнее, то вы можете сделать это в документации.

А у меня на этом все. Спасибо за внимание!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 1 ):

    Здравствуйте, очень познавательно, особенно про Autoprefix. На самом деле пользуюсь этим компилятором постоянно, но недавно столкнулся с такой проблемой. Как правильно настроить компиляцию через компилятор Koala, проектов с уже подключенным Compass? Есть ли какие уроки или информация по этому поводу, подскажите пожалуйста. В интернете ничего умного я не нашёл, как компилировать через cmd это понятно. Но хотелось бы автоматизировать процесс полностью. И возможно ли это, или есть какой другой эффективный способ? Заранее спасибо.

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

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

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

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

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

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

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

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

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

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

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

    Илон Маск рекомендует:  Real - Тип Delphi

      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 от А до Я

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

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

    Gulp Sass — установка и настройка

    Для установки gulp-sass на windows откройте командную строку и перейдите в папку с проектом:

    Запустите команду установки:

    Пример структуры проекта:

    В папке sass лежит файл style . scss , который будет компилироваться в css.

    Настройка Gulpfile.js

    В строке gulp . src ( ‘./sass/**/*.scss’ ) указываем, что надо компилировать все файлы с расширением . scss в папке sass .
    В строке . pipe ( gulp . dest ( ‘./css’ ) ) ; указываем папку назначения для скомпилированного CSS.
    Если вам нужен сжатый CSS, то необходимо указать опцию outputStyle : ‘compressed’ .
    Пример:

    Препроцессор SASS: пишем стили просто и быстро

    Всем привет! Как быстро летит время. Я даже не заметил, как я перешел от написания стилей с обычного Css на препроцессор Sass. А ведь раньше не понимал — что за Sass, для чего он нужен, это наверно для супер продвинутых профи в верстке. Да, использование препроцессоров это шаг на новый уровень в веб-разработке, но здесь ничего страшного и сложного нет и вы убедитесь в этом сами, дочитав данную статью до конца.

    И так, чем хорош препроцессор и конкретно Sass? Я сразу скажу, что есть и другие, такие, как Less, Stylus и др. Все они работают по одному принципу, но у каждого свои особенности. Sass получил большую популярность у профессионалов в следствие чего изучение значительно упрощается. Просто чем популярнее технология, тем больше сообщество и тем более развернута документация.

    Препроцессоры созданы для того, чтобы избавить разработчика от большинства рутинных задач при написании кода, тем самым повысив скорость и качество работы. Помимо CSS-препроцессоров существуют также и HTML-препроцессоры, например, Pug (Jade).

    Документация

    Разработчиком Sass является француз Hugo Giraudel, проживающий в Германии с определенного времени. Естественно документация на английском языке, но я лично в ней неплохо ориентируюсь (важно знать технический английский). Но также есть перевод и на русский. Я бы советовал все же английскую версию, это для того, чтобы привыкать и изучать все глубже английский. Но русская тоже ничем не хуже.

    Компиляция Sass в Css

    В качестве программного обеспечения для компиляции Sass в Css я использую плагин Sass для таск-менеджера Gulp. Вообще Sass является приложением (Gem) языка Ruby. Поэтому, если вы хотите обойтись без Gulp, то для компиляции в Css вам необходимо будет установить платформу языка программирования Ruby. Я не буду сейчас показывать как это делается, можете почитать об этом на официальном сайте.

    Синтаксис — Sass, Scss

    Сразу отмечу, что существует 2 синтаксиса написания кода: Sass и Scss.

    Синтаксис Sass незначительно отличается от Scss. Scss похож больше на обычный код Css, а в Sass опущены фигурные скобки и точка с запятой между правилами. Также существует различие в написании некоторых функций и надо быть внимательным в том, какой синтаксис вы выбираете. Расширения файлов для Sass — *.sass, а для Scss — *.scss. Синтаксис Sass он более старый, а Scss появился позже, чтобы упростить изучение для новичков. Я сам начинал изучение данного препроцессора именно на Scss, так было проще его понять. Сейчас же я перешел на Sass, для меня он более удобен.

    Если говорить о Sass, то его структура кода строится на основе отступов (ведь фигурных скобок в нем нет) и здесь следует быть внимательным, так как в качестве отступа может выступать, как табулятор (TAB — 4 пробела), так и обычные пробелы (обычно это двойной пробел). Я всегда использую табулятор.

    Помните! Если вы используете табулятор в качестве отступа, то пробелы следует исключить, чтобы везде было одинаково. И наоборот — если используете пробелы, то табулятор следует исключить. Иначе, компилятор выдаст ошибку.

    В большинстве редакторов кода (например, Sublime Text) есть разметка отступов в виде полос, что не дает нам запутаться. В примерах ниже я буду использовать синтаксис Sass.

    Упрощаем жизнь с помощью Sass

    Вложенность правил

    Вот чем мне приглянулся Sass с самого начала, так это как раз вложенностью css-правил одних в другие. Это здорово экономит время, а код получается структурируемым и легкочитаемым. Например, если мы хотим написать стили элементам определенного родительского контейнера, то нам в Css необходимо каждый раз указывать родительский класс, например вот так:

    То есть мы везде указываем родительский класс .main , а это в свою очередь не совсем удобно. Используя Sass, можно записать следующим образом:

    Согласитесь так смотрится намного аккуратнее, да и писать код можно быстрее, ведь родительский класс .main мы пишем всего один раз. Если вы хотите повторить за мной, не устанавливая Ruby и всякое подобное ПО можно воспользоваться онлайн-компилятором для демонстрации.

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

    Помимо вложенности правил в Sass существует возможность вложенности свойств. Например, вот как можно записать значения margin :

    Привязка к селектору или конкатенация — знак &

    Написание нашего кода можно ускорить и сделать его еще компактнее, применив конкатенацию (соединение) посредством символа — &. Как это работает? Например, у нас есть такие классы, как: .main-title , .main-subtitle , .main-description . В Sass данные классы можно записать следующим образом:

    Sass

    Css

    С помощью символа & мы соединяемся к корневому классу, то есть в данном случае нет необходимости постоянно повторять корень .main . В тоже время следует иметь ввиду, что мы не создали дочерние элементы.

    Sass

    Css

    Иногда нужно указать цепочку селекторов до текущего элемента. Можно конечно вынести его в корень, но чтобы не нарушать вложенность можно написать следующим образом:

    Sass

    Css

    Переместив & после селектора, мы поменяли порядок стыковки, т. е. класс .container в данном случае является родительским.

    Привязка к родительскому селектору, но на уровнь выше

    Выше для примера я демонстрировал Sass код:

    Sass

    Теперь представьте, что в блоке .main-title существует еще один элемент которому нужно явно указать стили, используя всю цепочку родителей. Я долго время просто указывал корневое название (в данном случае — .main ), но это не очень удобно. Я стал ковырять документацию Sass и нашел решение. На самом деле все просто — нам необходимо объявить ссылку на родителя и использовать ее, там, где нужно.

    Вот так я делал раньше:

    А теперь можно сделать так:

    Если заметили мы объявили ссылку на родителя — $self: & . Мне это чем-то напоминает ссылку на объект (this), который вызвал событие в javaScript. Теперь в нужно месте мы можем просто его вызвать # <$self>. Вот оказывается как все просто, а я голову ломал и думал, что нет решения этой проблемы в Sass.

    Css

    Шаблоны-заготовки

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

    Sass

    Css

    Шаблоном выступает в данном случает селектор %button (об этом говорит знак — %). Это удобно тем, что сам селектор шаблона нигде не участвует, а его стили наследуются другими селекторами посредством директивы — @extend. Данный шаблон можно использовать сколько угодно раз, сокращая тем самым количество кода.

    SassScript

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

    Переменные

    Переменная в Sass начинается со знака $, а имя пишется латиницей, например: $color . Следует отметить, что знаки: «» и «_» взаимозаменяемы. К примеру, если назвали $color-red , то можно вызвать и $color_red . Определяется переменная следующим образом: $название: значение, например: $color: #f6f6f6 .

    Переменная объявленная вне каких либо уровней вложенности, доступна глобально, т.е. можно использовать везде. Если же вы определили переменную в каком либо уровне вложенности селектора, то она будет доступна только на данном уровне. Чтобы она работала глобально во всем документе необходимо указать ключевое слово !global.

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

    Директивы

    @extend

    Данную директиву мы затронули выше, когда изучали шаблон-заготовку. Закрепим еще раз знания. С помощью @extend мы можем скопировать правила любого селектора. Например, при верстке может быть так, что элемент «А» и элемент «Б» могут быть схожи по внешнему виду. В данном случае можно написать правила элементу «А», а для «Б» просто скопировать стили элемента «А», слегка переопределив нужные свойства.

    Sass

    Css

    В данном примере мы сверстали 2 одинаковых квадрата. У квадрата «Б» мы переопределили только отступ padding: 15px . Вот так работает @extend. Я довольно часто пользуюсь данной директивой.

    @import

    Данная директива позволяет объединять несколько файлов стилей в один. Это очень удобно, тем более, если проект большой. Не стоит путать с директивой, которая существует в Css — @import. В Css обязательным атрибутом является — url().

    На самом деле удобнее писать стили в разных файлах и предназначение у каждого свое. Например, весь каркас страницы можно разделить на регионы: header.sass, sidebar.sass, footer.sass. Собрать все можно в главном файле main.sass, как раз используя @import. Файлы регионов можно указать также через нижнее подчеркивание в начале имени файла, например так: _header.sass, _sidebar.sass, _footer.sass. Такие файлы называются фрагментами. При импорте фрагментов не обязательно указывать расширение файла.

    Файлы фрагментов могут быть с расширениями: *.sass, *.scss или *.css. Например, главный файл может быть с расширением *.sass, а шапка сайта, к примеру с расширением *.scss. То есть не важно какое у вас расширение главного файла. Следует отметить, что при импорте переносятся все переменные и миксины (о них поговорим ниже) в главный файл, в который происходит импорт.

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

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

    @at-root

    Директива @at-root говорит сама за себя и если переводить на русский, то будет звучать так — «от корня». Иными словами мы переносим селектор в корень, отменяя цепочку родительских селекторов. Тут конечно можно задать вопрос — «А зачем нужна эта директива, если можно перенести селектор в корень в ручную?». Ответ прост — удобство написания кода, не нарушая структуру. Когда вы научитесь работать с Sass в полной мере вы это поймете.

    Управляющие директивы и выражения

    Директива @if

    Данная директива выполняет стили, если выражение, заключенное в ней возвращает любое значение кроме false и null.

    Sass

    Css

    Те, кто знаком хотя бы с основами языка программирования (например, javaScript или Php) разобраться будет не сложно. Здесь суть та же самая, главное знать синтаксис написания кода.

    Директива @for

    В языке программирования (опять же в Javascript или Php) с помощью For можно задать цикл. В Sass данная директива выполняет тоже самое — создает цикл. Для каждой итерации (повторения) используется переменная-счетчик, которая изменяет данные вывода.

    Директива имеет 2 формы написания: 1. @for $var from through и 2. @for $var from to . Если вы хотите, чтобы последняя цифра была включена в цикл, то используйте «through«. Давайте рассмотрим пример:

    Sass

    Css

    Для указания конечного значения я использовал ключевое слово «to«. При таком раскладе цикл заканчивается на цифре — 5. Обратите внимание насколько компактным выглядит код Sass.

    Директива @each

    Директива @each также, как и @for выводит значения в цикле и удобен тем, что помимо цифр можно перебирать конкретные значения. Давайте возьмем вышеприведенный цикл и изменим его на какие либо значения.

    Sass

    Css

    В данном случае не создается переменная-счетчик, а количество итераций зависит от количества созданных значений после ключевого слова «in«. Значения выводятся через переменную (в данном примере — $bgItem), название которой может быть произвольным.

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

    Миксины (примеси) — это своего рода функция, как в языке программирования, которая призвана избавить от повторяющегося кода. Миксины могут содержать целые фрагменты стилей, разрешенные в Sass. Давайте рассмотрим пример, для большей наглядности.

    Создается миксин директивой @mixin , далее через пробел следует имя миксина, а также опционально передаваемые параметры. Сразу отмечу, что знаки дефиса (-) и нижнего подчеркивания (_) в имени миксина взаимозаменяемы. Миксин может содержать в себе не только правила, но и селекторы. Выше я привел пример элементарного миксина без параметров.

    Вызывается миксин директивой @include и далее через пробел указываем имя созданного миксина. В примере выше — это центрирование блока по оси X и по оси Y с помощью абсолютного позиционирования. Если такое приходится применять часто, то согласитесь легче вызвать просто миксин, нежели писать стили центровки снова и снова.

    Теперь давайте рассмотрим миксин с параметрами (аргументами).

    Sass

    Css

    Как видим, после названия миксина в скобках мы задаем аргументы, в данном случае — это ширина бордюра и цвет. Это простейший миксин, который я привел для наглядности. На практике же можно встретить более сложные миксины с использованием различных условий и переменных. Но не будем сейчас все усложнять, надо всегда начинать с чего-то малого и простого, а потом уже двигаться по мере продвижения вверх.

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

    Ну что ж, всем спасибо за внимание! Как всегда, вопросы задаем в комментариях и подписывайтесь либо на телеграм канал, либо на рассылку по email (форма в сайдбаре справа), чтобы не пропустить ничего интересного.

    До встречи в других моих постах…

    Заур Магомедов

    Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2009 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

    Gulp -sass не компилировать sass файлы

    Я на самом деле пытаюсь построить gulp планирование для создания связанных с Интернетом вещей, таких как компиляция sass, minify css, uglify javascript и т.д. Но у меня действительно проблемы с сассой.

    Вот пример моего кода:

    Итак, я использую компас, потому что у меня есть только файлы *.sass и нет .scss, поэтому gulp -sass не будет работать для меня. Поэтому я спрашиваю, может ли кто-нибудь дать мне подсказку, почему эта задача не работает. Вот что возвращает моя консоль:

    Я знаю, что я не использую config.rb, но две вещи: 1) Я не нашел примера таких файлов 2) gulp -compass doc дает пример без такого файла, поэтому я предполагаю его необязательным

    Благодаря SteveLacy мне удалось это исправить.

    Если у вас есть только файлы .sass и нет .scss, вам нужно использовать gulp -ruby-sass вместо gulp -compass или gulp -sass. Вот пример моего рабочего кода:

    Самый простой и простой способ:

    Самая новая версия node -sass, которая используется gulp -sass, поддерживает синтаксис sass и scss.

    или последняя версия на данный момент

    node -sass использует libsasss

    Посмотрите на примечания к выпуску 2.0.

    Я знаю, что это не может быть правильным местом для этого ответа, но в Google не так много людей с ошибками gulp -ruby-sass.

    Компилятор LESS/SASS/SCSS в css файлы

    Технические данные

    Описание

    С чем может быть связана очень долгая работа компилятора? До этого использовал версию 1.0.3, работало отлично, на другом проекте установил последнюю версию и стало очень долго компилить при изменении файла. Попробовал залить на новый проект компонент с прошлого проекта, это не помогло, так же долго компилит, а потом еще выдает сверху страницы Line 195 WARN: на такую констуркцию в файле миксинов, но после обновления страницы этот варнинг исчезает.

    @else if $ > @media only screen and (max-width: 400px) < @content; >
    >
    @else <
    @warn «Breakpoint mixin supports: w1300, w1200, w1000, w800, w650, w550, w450, w400»;
    >

    Максим Зверев, не знаком с compass.

    Судя по хабру: «Compass нечто большее чем CSS препроцессор, разработчики Compass позиционируют его как дизайнерский фреймворк. Compass использует SASS синтаксис (.sass или .scss), так что любой SASS код будет скомпилирован и в Compass.». Если ваш компилятор поддерживает его, то будет работать. Из коробочных: скорее всего нет поддержки (не проверял).

    Илон Маск рекомендует:  Что такое код asp owner
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL