Компиляция 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

Дорогие друзья! Какими компиляторами для saas вы пользуетесь ?
koala — превосходно работала на less, но на sass ее компиляция начинает занимать больше времени что немного раздражает.
scout — быстро компилирует, но к сожалению не всегда =) часто издают звуковой сигнал извещающий об ошибке при ее отсуствии в логе компилятора да и коде компилируемого, приходится несколько раз а то и больше 5 нажимать сочитание ctrl+s в sublime, прослушать серенаду scouta из сигналов ошибки и успешного сохранения и только потом продолжать работу.

Компиляция SASS в webpack 2 — простейший случай

Мне нужно, чтобы Webpack просто автоматически компилировал SASS в CSS при соханении .sass или .scss файлов. Подключать эти стили программно или делать из них сборки я пока не буду. Каковы будут минимальные настройки в webpack.config.js для решения данной задачи?

P. S. Использование gulp и других средств не желательно, ибо инструментов для быстрой и качественной веб-разработки должно быть достаточно, но не более того.

2 ответа 2

Вы можете использовать ‘sass-loader’ для решения вашей задачи. Установка:

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

Если вдруг понадобится компилить стили в отдельный файл, а не в сам документ, то можно подключить extract-text-webpack-plugin и сделать так:

Всё ещё ищете ответ? Посмотрите другие вопросы с метками sass webpack или задайте свой вопрос.

Связанные

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.11.11.35399

Программа 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.

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

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

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

Илон Маск рекомендует:  Псевдокласс lang

Итак, чтобы ее скачать, просто кликните по названию, вас перенаправят на официальный сайт программы, где вы сможете нажать кнопку 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 напрямую, поэтому необходимо преобразовать файл в формат CSS. Существует несколько способов, как это сделать, вот самые популярные.

    1. Установить Ruby и делать компиляцию через командную строку.
    2. Установить специализированную программу вроде Scout.
    3. Воспользоваться онлайновыми компиляторами.
    4. Использовать компилятор на сервере, например, написанный на PHP.


    Каждый способ имеет свои особенности. Так, под MacOS нет необходимости устанавливать Ruby, он идёт вместе с этой операционной системой. Поэтому процесс компиляции немного упрощается, потому что мы устраняем лишний шаг.

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

    Препроцессор 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 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

    SCSS — немного практики, часть I

    Статей про SASS ( SCSS ), Less на хабрахабре уже полно, но на мой взгляд не хватает такой, в которой было бы немного реальной практики. Я постараюсь восполнить этот пробел. Около года назад одна из SASS -статей меня «зацепила», и с тех пор я полюбил эту технологию настолько, что ручной набор обычного CSS кода представляется мне лишней тратой времени. Сия статья посвящается тем верстальщикам (или web-программистам), которые про SCSS ещё не слышали, или же ещё не пробовали в деле. Более опытным товарищам, полагаю, в ней ловить нечего.

    Что такое SCSS

    SCSS — «диалект» языка SASS. А что такое SASS? SASS это язык похожий на HAML (весьма лаконичный шаблонизатор), но предназначенный для упрощения создания CSS-кода. Проще говоря, SASS это такой язык, код которого специальной ruby-программой транслируется в обычный CSS код. Синтаксис этого языка очень гибок, он учитывает множество мелочей, которые так желанны в CSS. Более того, в нём есть даже логика (@if, each), математика (можно складывать как числа, строки, так и цвета). Возможно, некоторые возможности SCSS покажутся вам избыточными, но, на мой взгляд, лишними они не будут, останутся «про запас».

    Отличие SCSS от SASS заключается в том, что SCSS больше похож на обычный CSS код. Пример SASS-кода:


    И тоже самое на SCSS:

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

    Установка и использование

    Для начала нужно установить ruby. После чего нужно установить sass-gem ( gem install sass в консоли ). Если всё прошло гладко, то теперь вам доступна консольная программа sass . О всех нюансах её использования вы можете прочесть здесь ― sass —help . Я расскажу лишь о двух базовых возможностях:

    —watch

    Если запустить sass с ключом —watch , то программа будет следить за указанными вами файлами. В случае их изменения, она автоматически пересоберёт все необходимые css-файлы (не все вообще, а только связанные с изменёнными).

    Илон Маск рекомендует:  Что такое код mcal_list_alarms

    Предположим, что у вас есть следующая структура проекта:

    Необходимо чтобы sass отслеживал все изменения в css/scss/* и результат сохранял в css/*.css . В таком случае запускаем sass так ― sass —watch css/scss:css/. . Т.е. sass —watch [что]:[куда] .

    —update

    Если вам нужно единожды обновить css-файлы, то в место —watch применяем —update . Никакой слежки проводится не будет, так же как и проверок на необходимость обновления.

    Стоит отметить, что в отличии от Less , SASS не умеет компилировать свой код прямо в браузере. На мой взгляд, такой подход (компиляция на сервере или ПК-верстальщика) является единственно верным.

    Практика

    Итак, мы подошли к самому главному. Начнём с @import .

    @import

    Изначально, до использования SCSS, весь CSS код движка, с которым мне по долгу службы приходится работать, находился в 1-ом огромном style.css файле. Моя IDE (Netbeans (кстати, вот плагин для подсветки синтаксиса)) работала с ним с существенными тормозами. Разбивать же его на множество файлов поменьше, и, при необходимости, склеивать их в 1 ― никто не хотел. SCSS решает этот вопрос автоматически.

    Стоит отметить 1 нюанс. Если скормить sass не конкретный файл-источник, а директорию, то css файлы не будут генерироваться для файлов начинающихся с _ . Т.е. наличие файла style.scss приведёт к созданию style.css , а наличие файла _some.scss ― нет.

    Итак, для того, чтобы включить содержимое файла _template.scss или template.scss пишем

    В конечном счёте, вместо 1-го большого style.css файла у меня получилось более сотни мелких scss -файлов. С первого взгляда может показаться, что такое количество слишком велико и приведёт к страшным мукам. Однако, нужный мне файл я нахожу сразу исходя из удобной структуры каталогов. К тому же, я полагаю, что благодаря кешированию такая «схема» более производительна.

    @вложенность

    Одна из самых желанных «фич» для CSS ― вложенность селекторов. Пример:

    Символ & равносилен родительскому селектору. Допустим тег у нас имеет класс ie_7 , в случае если в качестве обозревателя у нас Internet Explorer 7 . Следующий код позволяет избавиться от всех «хаков» и спец.комментариев:

    $variables

    Переменные ― удобная штука. Определяются они так:

    Переменные ― не константы, их можно менять по ходу кода :) Одна из первых моих мыслей вылилась в _const.scss файл, который заключает в себе все базовые цвета, размеры шрифтов и пр.

    Предполагается, что цвет ссылок на сайте ― $link .

    Если в дальнейшем выяснится, что цвет ссылок изменился ― достаточно поменять 1 переменную (в случае CSS нужно было бы пройтись авто-заменой по файлам, возможно даже выборочно). Предположим, что, внезапно, выясняется, что в некотором модуле contacts , цвет ссылок другой. Есть, как минимум, два пути решения.

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

    @математика

    Разделим математику на 2 категории ― цвета и числа. Начнём с чисел. Простой пример:

    При желании можно и padding с border-ом задавать переменными. Всё зависит от сложности вёрстки.

    Хочу отметить, что подобного рода манипуляции применяются очень часто. Без них я как без ног.

    А теперь цвета. Цвета можно складывать, перемножать:

    Довольно удобная штука, когда лень подбирать цвета. Также доступны такие функции как opacify и transparentize (более подробно).

    @строки

    SASS умеет складывать строки, а также поддерживает конструкцию #<>

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

    Статья

    В виду того, что статья получилась довольно объёмной, я решил разбить её на 2 части. В следующей статье я рассмотрю (синтаксис и область применения):

    • @mixin ― пользовательские функции
    • @if ― условия
    • @each ― циклы
    • Несколько дизайнов для одного сайта
    • По желанию читателей

    Установка SASS

    Процесс установки и настройки sass достаточно хорошо описан в официальной документации. Чтобы понять как это происходит совсем не обязательно знать английский язык. Я думаю, что если на googl-e набрать «sass установка», высветится много разных статей. Все бы хорошо, но к сожалению после данной установки процесс компиляции будет занимать приличное время. Мне бы не хотелось повторяться, на главной странице я уже описывал это при сравнении sass и less, поэтому скажу так. Официальная документация хоть и официальная документация, но мы пойдем другим путем. Сейчас я опишу установку, при которой компиляция будет занимать милисекунды.

    Итак, нам понадобится node.js, сборщик проектов gulp, три плагина к нему (gulp-watch, gulp-plumber, gulp-sass) и какой-нибудь файловый менеджер. В скриншотах я использовал total commander, но поскольку он платный, то могу посоветовать его бесплатный аналог — double commander, он ничуть не хуже и вполне справится с нашими задачами. Если вдруг у вас что-то не будет получаться, то вы можете скачать готовый пример, для его работы нужен только установленный node.js. Архив нужно будет распаковать, войти в проект через какой-нибудь файловый менеджер, и в командной строке файлового менеджера сперва набрать «npm install —save-dev», а потом набрать «npm install gulp -g». После того как произойдет установка всех модулей в командной строке файлового менеждера нужно будет набрать «gulp». Я все-таки советую вам ознакомиться с текстом ниже. Весь материал я постараюсь описать подробно, чтобы ни у кого не оставалось никаких вопросов.

    При верстке я использую «open server». Навязывать я никому ничего не хочу, но это лучший локальный сервер которым я когда-либо пользовался. Начинал я с denver-а, потом ставил «apache», потом долго пользовался xamp-ом. По сравнению с ними «open server» лучший. Советую устанавливать плагины в папку где лежат проекты. Обычно у меня проекты для верстки лежат в папке localhost. SCSS — файлы лежат в папке «localhost/название проета/scss» , css-ка генерится по адресу «localhost/название проекта/project/css» . HTML-файлы лежат по адресу «localhost/название проета/project» . Вы можете настраивать пути так как вам удобно, все это я опишу. Для примера я буду просмативать папку «scss» и генерить css-ку в папку «project/css».

    1. 1. Для начала идем на официальный сайт node.js (Рис. 1) и скачиваем его дистрибутив, здесь особо объяснять нечего, я думаю это просто))) После того, как мы его уснановили, стоит проверить работает ли он. Для этого жмем «Win+r», в появившемся окне набираем «node» (Рис. 2) и жмем «Enter». Если все прошло успешно, то должно появиться вот такое окно (Рис. 3). Если вы начинающий разработчик, то можете использовать его как калькулятор, хотя node.js это полноценный сервер не хуже чем apache. Если же он не появился, то скорее всего у вас какие-то проблемы с правами. В операционных системах Vista и Windows 7-8 нужно запускать инсталятор с правами администратора.
    2. 2. Теперь создайте какую-нибудь папку. В моем архиве она называется gulp, вы можете назвать ее также, или как вам будет угодно. Условно будем называть ее нашим проектом.
    3. 3.

    Теперь поставим сборщик проектов gulp, и некоторые плагины к нему (просмотрите документацию по gulp, я думаю это будет полезным). В интернете много про это написано, но все авторы описывают это не совсем четко. Установку модулей для node.js осуществляет NPM, я вначале пытался это сделать прямо в node.js, это логично, но не правильно. Естественно у меня ничего не получалось. Итак, закрываем node.js.

    Из документации следует, что gulp нужно устанавливать сперва глобально, а после локально. Итак, заходим в наш проект через какой-нибудь файловый менеджер (total commander или double commander) и в командной строке файлового менеджера сперва набираем «npm install , а после набираем «npm install gulp —save-dev» (Рис. 4). Появится окно с установкой, подождем когда установка пройдет и окно пропадет. После установки в нашем проекте появится папка «node_modules». В ней будут лежать все наши плагины, пока в ней лежит только gulp.

    4. После установки gulp-а, нам нужно установить три плагина к нему gulp-watch, gulp-plumber, gulp-sass. Компилировать scss-файлы будет плагин gulp-sass, gulp-plumber необходим для того, чтобы показывать ошибки если вдруг они будут, а они непременно будут (gulp-plumber показывает номер строки с ошибкой, иначе трудно понять что не так), gulp-watch нужен для того, чтобы компиляция происходила автоматически при изменении scss-файлов. Это я ниже подробно опишу.

    Идем на официальный сайт gulp-а (Рис. 5), переходим на страницу с плагинами (Рис. 6). Эта страница очень удобна, вверху есть поле поиска. В этом поле нужно найти наши плагины, перейти на их страницы. Там будут описаны настройки и процесс установки плагинов.

    Итак, для того, чтобы установить плагин gulp-sass (Рис. 7) в наш проект, нужно зайти в наш проект через какой-нибудь файловый менеджер, ввести в командной строке файлового менеджера «npm install (Рис. 8). Я думаю, что плагины gulp-plumber и gulp-watch вы установите сами, это не трудно.

    Компилятор 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.». Если ваш компилятор поддерживает его, то будет работать. Из коробочных: скорее всего нет поддержки (не проверял).

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