Пошаговая установка Ruby и Sass автоматическое обновление CSS файла


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

Как установить ruby-sass в Ubuntu / Debian

Установка:

Для установки ruby-sass в Ubuntu / Linux Mint / Debian, введите в Терминал :

Подробная информация о пакете:

Мощный, но элегантный CSS-компилятор, который снова делает удовольствие от CSS

Сасс снова добавляет CSS. Sass является расширением CSS3, добавляя вложенные правила, переменные, mixins, наследование селектора и многое другое.

Он переведен в хорошо отформатированный стандартный CSS с помощью инструмента командной строки или плагина web-framework.

Зависимости:

Интерпретатор объектно-ориентированного языка сценариев Ruby (версия по умолчанию)

Пошаговая установка Ruby и Sass: автоматическое обновление CSS файла

Предпочтительный вариант связи
[email protected]
Написать

с 10.00 до 20.00 (мегафон)
Не всегда могу ответить

Сделаем быстрый и удобный сайт повысим конверсию

Качественно | Современно | Безопасно

Установка Sass/Scss и подключение его к phpStorm

Категории

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

Для начала нам надо установить сам Sass. Можно это сделать разными способами:

  • установка программ (есть платные, есть бесплатные), в которых sass уже подключен (CodeKit, Compass.app и другие). Перечень программ есть на странице https://sass-scss.ru/install/
  • установка через Ruby на Windows. Мы воспользуемся этим способом.

Переходим на сайт Ruby по ссылке rubyinstaller.org и скачиваем последнюю версию.

Переходим на страницу «Download» и я выберу версию без DEVKIT

Запускаем скачанный файл и идем по шагам установки.

Соглашаемся с лицензией.

Укажите куда поставить программу или оставьте ка есть данное поле. Ставим галочку «Use UTF-8 as default external encoding» и продолжаем установку.

Ждем пока установится.

Галочку я снимаю и нажимаю «Finish».

Ruby мы поставили, теперь ставим сам препроцессор.

Для этого открываем командную строку «Пуск» — «Поле поиска» набираете там «cmd», пока не появится список программ, в котором будет «cmd.exe»

В открывшемся окне пишем команду на установку sass.

Команда: gem install sass

и нажимаем кнопку «Enter». Запустился процесс установки.

После выполнения проверим поставился sass и какой версии, для этого прописываем команду «sass -v«

И если все нормально, то выведет следующее «Ruby Sass 3.5.6» или какая последняя там будет версия.

Хорошо, теперь подключим sass к phpstorm.

В проекте, в котором я хочу подключить sass, я создам файл например style.sass

Открылся файл и появилась такая надпись «Enable File Watcher to compile SASS to CSS?» и правее «Да» или «Нет».

Т.е. среда разработки уже знает, что это за файл и предлагает установить отслеживание такого файла проекте.

Но ей надо будет указать где находится установленная программа SASS.

Как подключить SCSS

• 13-12-2020 •

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

Что такое SCSS?

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

У SCSS есть масса полезных штуковин, к примеру переменные. Допустим у вас есть основные цвета и отступы на сайте, все что вам нужно, так задать их в переменные

Как вы уже заметили, можно использовать вложения, т.е. как видно на примере, мы задали блоку .content отступ и внутри блока заголовок h3 будет зеленого цвета

Так же в языке SCSS есть такие штуки как : Циклы, условия, математика

По началу может показаться, что все это сложно и вам не нужно, но если вы разок поработаете с SCSS, уже будет трудно отказаться! Ближе с синтаксисом вы можете ознакомиться на официальном сайте

Как начать работать с SCSS?

Для начало вам нужно установить RUBY, по этому переходим на сайт и жмем на большую красную кнопку download. Открываете инсталятор и все время кликаете next. Главное учесть, что в одном из пунктов, он предложит установить переменную, чтобы можно было работать в консоле (cmd) , это важно, если галочку не поставите, то переменную потом придется ставить вручную!

После установки ruby, нужно открыть консоль (Открыть run (window + R) , написать cmd и нажать enter), откроется черное окошко, где надо написать gem install sass и нажать enter, дальше установим framework compass ( В дальнейшем он вам понадобиться ) gem install compass

Если все прошло гладко, то в этом же окошке так и будет написано (Successfully installed)

Все самое необходимое уже сделали

Теперь вы можете создавать файлы с типом .scss и начать писать стили, но как их потом компилировать в обычный css?

Использовать IDE

В основном у всех IDE, уже есть встроенный функционал, программа за вас создаст файл и при сохранении скомпилирует в обычный css

Использовать командую строку

Если вы тру кодер и используете предположим блокнот для работы, то вы можете использовать командную строку для конвертирования и даже для отслеживания изменений в файле. Чтобы инициировать папку для scss, в консоле нужно написать:

Для того чтобы начать отслеживание и автоматически перебирала все css файлы, нужно написать:

Использовать программу помощник Koala

Koala – Это программа, которая делает все тоже самое, что и команды в консоле, только для удобства сделали графический интерфейс, где вы наглядно и даже не трогая клавиатуру, можете указать путь к рабочей папке, отслеживать изменения и компилировать ваши scss файлы.

Основные преимущества SCSS

Вот и все! Если у вас остались вопросы, пишите в комментариях! Так же можете почитать о кнопках поделиться в социальных сетях

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

Установка SASS на Windows. Компиляторы SASS, онлайн компиляция SASS

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

Установка SASS на Windows. Компиляторы SASS, онлайн компиляция SASS

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

Установка SASS на Windows. Добавить путь в переменную PATH в Winows 10

CSS препроцессор SASS является кроссплатформенным, но для его использования в операционных системах Windows, ровным счетом, как и в других ОС, необходима программная среда Ruby. Пользователям Mac OS и некоторых дистрибутивов Linux устанавливать Ruby не требуется, а вот обладателям компьютеров с Windows прежде, чем использовать SASS, необходимо установить Ruby. Давайте это и сделаем: установим Ruby на Windows, чтобы воспользоваться SASS компилятором.

Для этого перейдите на страницу: http://rubyinstaller.org/downloads/

Скачиваем Ruby, чтобы установить SASS компилятор на Windows

С данной страницы вам необходимо скачать инсталлер Ruby для Winows, соотвествующий разрядности вашей операционной системы. Запустите инсталлер и следуйте указаниям программы, я буду ставить по следующему пути: C:\Ruby.

А далее нам необходимо добавить путь к папке bin, которая находится в папке Ruby, в системную переменную PATH. У меня установлена Windows 10, поэтому пишу мануал для нее, когда я писал про установку SQLite на Windows, то там я рассматривал, как добавить переменную PATH для Windows 7.

Шаг 1: Кликните правой кнопкой мышки на «Мой компьютер» или «Этот компьютер» и выберете из появившегося меню вкладку «Свойства».

Прописываем путь к папке Ruby в переменную PATH на Windows 10

Шаг 2: В левом верхнем углу появившегося окна нажмите «Дополнительные параметры системы».

Прописываем путь к папке Ruby в переменную PATH на Windows 10, выбираем «Дополнительные параметры

Шаг 3: В появившемся окне нажмите кнопку «Переменные среды…».

Добавляем значение в переменную PATH в Windows 10, чтобы установить SASS компилятор, выбираем «Переменные среды

Шаг 4: В списке «Системные переменные» выберете переменную PATH и нажмите кнопку «Изменить», если у вас еще нет переменной PATH, нажмите кнопку «Создать».

Изменяем значение переменной PATH в Windows 10, чтобы указать путь к папке с Ruby

Шаг 5: В появившемся окне вы увидите все значения системной переменной PATH в Windows 10. В левом верхнем углу есть кнопка «Создать», воспользуйтесь ей.

Прописываем путь к папке с Ruby в переменной PATH на Windows 10

Шаг 6: В появившееся поле для редактирования я впишу C:\Ruby\bin. В вашем случае путь может отличаться, всё зависит от того, куда вы распаковали архив с Ruby.

Редактируем переменную PATH в Windows 10

Шаг 7: Подтверждаем новое значение системной переменной PATH, нажав кнопку ОК и возвращаемся к окну с системными переменными для того, чтобы создать новую системную переменную в Windows. Для этого нажмите кнопку «Создать», после чего появится окно, как на рисунке ниже. Имя новой системной переменной: RubyOpt, значение новой системной переменной: rubygems. Это нужно сделать для того, чтобы потом была возможность установить компилятор SASS и пользоваться им через терминал Ruby.

Создаем новую системную переменную в Windows 10, чтобы установить SASS компилятор

Шаг 8: Запускаем командную строку Windows. Для этого нажмите правой кнопкой мыши на значок, который раньше назывался «Пуск», после чего появится меню, в котором нужно выбрать пункт «Командная строка».

Запускаем командную строку, чтобы установить SASS компилятор на Windows 10

Шаг 9: В командной строке перейдите в каталог Ruby, в моем случае это команда: cd C:\Ruby. И установите компилятор SASS командой: gem install sass.

Выполняем команду для установки SASS компилятора на Windows 10

Шаг 10: В папке Ruby есть папка lib, создайте внутри папки lib папку с названием SASS. В папке SASS будут храниться файлы для компиляции в CSS.

На этом установка SASS в Windows завершена. Но давайте попробуем скомпилировать первый свой код SASS в CSS. Хотя в данном случае я приведу пример с использованием синтаксиса SCSS (если вы помните, SASS и SCSS отличаются только синтаксисом и ничем более), поскольку он больше похож на CSS.

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

Хотя этот код и не отличается от обычных CSS стилей (дабы не было трудностей с восприятием), мы сохраним его в папку c:\Ruby\lib\sass\ с расширением SCSS. Я назвал файл style.scss. А теперь давайте скомпилируем файл style.scss в файл style.css. Для этого воспользуйтесь командой sass —watch C:\ruby\lib\sass\style.scss:style.css.

Скомпилируем первый SASS файл в файл CSS при помощи установленного компилятора

Данная команда говорит компилятору SASS о том, что когда он заметит какие-либо сохраненные изменения в файле style.scss, он должен создать файл style.css. Скомпилированный файл style.css вы найдете в каталоге Ruby. Чтобы остановить работу компилятора SASS, воспользуйтесь сочетанием клавиш Ctrl + C.

Пример абстрактный и не демонстрирует преимуществ препроцессора SASS и SCSS перед обычным CSS, но он хорошо демонстрирует работу компилятора SASS. Иногда бывают ситуации, когда не очень удобно ставить Ruby и ставить компилятор SASS на Winows, поэтому некоторые разработчики нашли для себя выход в виде онлайн компиляторов SASS.

Онлайн компиляция SASS. Минусы онлайн компиляторов SASS

Скомпилировать код SASS в CSS онлайн намного проще, чем установить Ruby и затем установить компилятор SASS. Но у такого подхода есть несколько минусов:

  1. Разработчики онлайн компиляторов SASS не всегда вовремя вносят изменения в компилятор, если обновляется версия SASS. Поэтому вам нужно внимательно следить за версиями SASS, которые вы пытаетесь скомилировать онлайн и сравнивать с тем, что может компилировать онлайн программа.
  2. Второй минус онлайн компиляторов не касается проверенных и заслуживших доверие ресурсов, но всё же, иногда можно столкнуться с тем, что разработчик онлайн компилятора попытался изобрести велосипед, в следствии чего компиляция происходит не совсем корректно.
  3. Используя онлайн компилятор SASS, вы не сможете использовать SASS файлы в своих проектах, которые уже запущены. Вам придется вручную копировать скомпилированный код и загружать его на сервер.

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

В качестве примера онлайн компилятора SASS могу привести следующий сайт: http://www.sassmeister.com/. Этот онлайн компилятор SASS довольно простой: слева вы пишите код SASS и через небольшой промежуток времени в правом окне вы получаете код CSS. В левом верхнем углу собраны настройки, можно даже выбрать более старые версии SASS.

Топ-пост этого месяца:  Шрифты CSS использование дескриптора font-display, поддержка браузерами

Компиляторы SASS для Windows

Если у вас есть необходимость компилировать SASS файлы, но нет желания ставить Ruby и устанавливать компилятор в Ruby, и есть периодические проблемы с доступом в интернет, то вам здесь помогут десктопные компиляторы SASS в Windows. Да и на самом деле, что бы там не говорили любители юникс-систем, но работать через командную строку не всегда удобно, выгодно и быстро, особенно фронт-энд разработчику. Обратите внимание: я не хочу вызвать последним предложением холивар, но считаю, что у каждой вещи есть свое применение и предназначение. Например, для меня никогда не станет ни один из дистрибутив Linux полноценной домашней операционной системой, а на работе мы не можем обойтись без Linux по многим причинам.

Компиляторов SASS для Windows очень много, но удобных очень мало, приведу один пример – компилятор Koala, который может компилировать не только код SASS, но и работать с препроцессором LESS и CoffeeScipt. Думаю, установить компилятор Koala вы сможете без проблем, но в скором времени на моем блоге появится небольшой обзор компилятора Koala.

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

Командная строка

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

Установка Ruby

MacOS

Считайте, что вам повезло. В OS X уже установлен Ruby, поэтому всё что вам требуется — это открыть приложение Terminal и перейти к следующему шагу.

Windows

Инсталлятор можно взять по адресу http://rubyinstaller.org/downloads, скачайте с сайта последнюю версию и установите её.

Установка Sass

Теперь нужно установить Sass. В MacOS откройте Terminal, в Windows нажмите Win + R и наберите cmd. В командной строке напишите:

gem install sass

Подождите немного пока все необходимые файлы будут скачаны и установлены на ваш компьютер.

Компиляция

Теперь можно сообщить Sass следить за изменением выбранного файла и компилировать его в традиционный CSS. Перейдите в командной строке в папку проекта и наберите:

sass —watch styles.scss:styles.css

Здесь: styles.scss — имя Sass-файла; styles.css — имя конечного CSS-файла.

Сам стилевой файл не обязательно должен существовать, если его нет, то он будет создан автоматически. Чтобы прекратить слежение за редактированием, перейдите к командной строке и нажмите Ctrl + C .

Для получения CSS из уже готового файла наберите следующее:

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 для наглядности.

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

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

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

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

Ruby Sass Command-Line Interface

вљ пёЏ Heads up!

Ruby Sass has reached end of life and is now totally unmaintained. Please switch to Dart Sass or LibSass at your earliest convenience.

Usage

The Ruby Sass executable can be invoked in one of two modes.

One-to-One Mode

One-to-one mode compiles a single input file ( input.scss ) to a single output location ( output.css ). If no output location is passed, the compiled CSS is printed to the terminal. If no input or output is passed, the CSS is read from standard input and printed to the terminal.

The input file is parsed as SCSS if its extension is .scss or as the indented syntax if its extension is .sass . If it doesn’t have one of these two extensions, or if it comes from standard input, it’s parsed as the indented syntax by default. This can be controlled with the —scss flag.

Many-to-Many Mode

Many-to-many mode compiles one or more input files to one or more output files. The inputs are separated from the outputs with colons. It can also compile all Sass files in a directory to CSS files with the same names in another directory. Many-to-many mode is enabled when any argument contains a colon, or when the —update flag or the —watch flag is passed.

If an input file is passed without a corresponding output file, it’s compiled to a CSS file named after the input file, but with the extension replaced with .css . If an input directory is passed without a corresponding output directory, all the Sass files within it are compiled to CSS files in the same directory.

When compiling whole directories, Sass will ignore partial files whose names begin with _ . You can use partials to separate out your stylesheets without creating a bunch of unnecessary output files.

Many-to-many mode will only compile stylesheets whose dependencies have been modified more recently than the corresponding CSS file was generated. It will also print status messages when updating stylesheets.

Options

Common

—load-path

This option (abbreviated -I ) adds an additional load path for Sass to look for stylesheets. It can be passed multiple times to provide multiple load paths. Earlier load paths will take precedence over later ones.

Load paths are also loaded from the SASS_PATH environment variable, if it’s set. This variable should be a list of paths separated by ; (on Windows) or : (on other operating systems). Load paths on SASS_PATH take precedence over load paths passed on the command line.

—require

This option (abbreviated -r ) loads a Ruby gem before running Sass. It can be used to load functions defined in Ruby into your Sass environment.

—compass

This flag loads the Compass framework and makes its mixins and functions available for use in Sass.

—style

This option (abbreviated -t ) controls the output style of the resulting CSS. Ruby Sass supports four output styles:

  • nested (the default) indents CSS rules to match the nesting of the Sass source.
  • expanded writes each selector and declaration on its own line.
  • compact puts each CSS rule on its own single line.
  • compressed removes as many extra characters as possible, and writes the entire stylesheet on a single line.

This flag (abbreviated -h and -? ) prints a summary of this documentation.

—version

This flag prints the current version of Sass.

Watching and Updating

—watch

Enables many-to-many mode, and causes Sass to stay open and continue compiling stylesheets whenever they or their dependencies change.

This flag, which may only be passed along with —watch , tells Sass to manually check for changes to the source files every so often instead of relying on the operating system to notify it when something changes. This may be necessary if you’re editing Sass on a remote drive where the operating system’s notification system doesn’t work.

—update

This flag enables many-to-many mode, even if none of the arguments are colon-separated pairs.

—force

This flag (abbreviated -f ) may only be passed in many-to-many mode. It causes Sass files to always be compiled to CSS files, instead of only being compiled when the source files are more up-to-date than the output.

The —force flag may not be passed alongside the —watch flag.

—stop-on-error

This flag may only be passed in many-to-many mode. It tells Sass to stop compiling immediately when an error is detected, rather than trying to compile other Sass files that may not contain errors.

Input and Output

These options control how Sass loads its input files and how it produces output files.

This flag tells Sass to parse standard input as SCSS .

—sourcemap

This option controls how Sass generates source maps, which are files that tell browsers or other tools that consume CSS how that CSS corresponds to the Sass files from which it was generated. They make it possible to see and even edit your Sass files in browsers. See instructions for using source maps in Chrome and Firefox. It has four possible values:

  • auto (the default) uses relative URLs to link from the source map to the Sass stylesheets where possible, and absolute file: URLs otherwise.
  • file always uses absolute absolute file: URLs to link from the source map to the Sass stylesheets.
  • inline includes the text of the Sass stylehseets in the source map directly.
  • none doesn’t generate source maps at all.

—stdin

This flag (abbreviated -s ) is tells Sass to read its input file from standard input. When it’s passed, no input file may be passed.

The —stdin flag may not be used with many-to-many mode.

—default-encoding

This option (abbreviated -E ) controls the default character encoding that Sass will use to load source files that don’t explicitly specify a character encoding. It defaults to the operating system’s default encoding.

—unix-newlines

This flag tells Sass to generate output files with whose lines are separated with the U+ 000A LINE FEED character, as opposed to the operating system default (on Windows, this is U+ 000D CARRIAGE RETURN followed by U+ 000A LINE FEED ). It’s always true on systems that default to Unix-style newlines.

—debug-info

This flag (abbreviated -g ) causes Sass to emit dummy @media queries that indicate where each style rule was defined in the source stylehseet.

вљ пёЏ Heads up!

This flag only exists for backwards-compatibility. Source maps are now the recommended way of mapping CSS back to the Sass that generated it.

—line-comments

This flag (also available as —line-numbers , abbreviated as -l ) causes Sass to emit comments for every style rule that indicate where each style rule was defined in the source stylesheet.

Other Options

—interactive

This flag (abbreviated -i ) tells Sass to run in interactive mode, where you can write SassScript expressions and see their results. Interactive mode also supports variables.

—check

This flag (abbreviated -c ) tells Sass to verify that the syntax of its input file is valid without executing that file. If the syntax is valid, it exits with status 0. It can’t be used in many-to-many mode.

—precision

This option tells Sass how many digits of precision to use when emitting decimal numbers.

—cache-location

This option tells Sass where to store its cache of parsed files, so it can run faster in future invocations. It defaults to .sass-cache .

—no-cache

This flag (abbreviated -C ) tells Sass not to cache parsed files at all.

—trace

This flag tells Sass to print the full Ruby stack trace when an error is encountered. It’s used by the Sass team for debugging errors.

—quiet

This flag (abbreviated -q ) tells Sass not to emit any warnings when compiling. By default, Sass emits warnings when deprecated features are used or when the @warn rule is encountered. It also silences the @debug rule.

  • Current Releases:
  • Dart Sass1.23.3
  • LibSass3.6.3
  • Ruby Sass вљ°
  • Implementation Guide

Sass © 2006–2020 Hampton Catlin, Natalie Weizenbaum, Chris Eppstein, Jina Anne, and numerous contributors. It is available for use and modification under the MIT License.

Awebdesign Blog

Здравствуйте! Это краткая инструкция по настройке рабочей среды под SASS для самых тупых! (вроде меня)

Если не получилось разобраться с программами типа Compass, Bourbon и других, если вы работаете на Windows, если ничего не помогает — хорошая новость! Dreamweaver, начиная с версии CC, работает с SASS без каких-либо проблем! Все так же просто, как и написание обычных css файлов вместе с Дримвивер.

Для начала, конечно, устанавливаем Ruby on Rails для Windows, качаем здесь: http://rubyinstaller.org/downloads/. Кстати — самый простой способ обновить Ruby, это скачать последнюю версию и установить заново.

Далее открываем Dreamweaver CC или выше.

Затем ищем консоль. Нажмите Старт (кнопка Виндоус внизу слева, через которую вы отключаете компьютер), там в поисковой строке наберите Command Prompt — как только начнете набирать — программа высветится в виде иконки — черный экран с белыми буковками C:\_.

Я прилагаю видео-урок, он на английском, но объясню, как это работает. Например, у вас есть проект — какая-то папка на компьютере с файлами. В проекте есть папка css, где вы держите все свои листы стилей. Создайте рядом папку sass, то есть если корень — папка html, то в ней должны быть 2 папки — css и sass. Sass — папка для ваших scss-файлов.

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

Естесственно, в html-файле вы привязываете style.css, как в обычном случае.

Если меняем бутстрап, то нужно скачать файлы для SASS, найти там папку assets/stylesheets и скопировать оттуда _bootstrap.scss и всю папку bootstrap, перенести в свою папку проекта, в созданную папку sass. _bootstrap.scss переименовать в bootstrap.scss, а bootstrap.min.css в папке css переименовать в bootstrap.css. Файлы должны иметь одинаковое название, чтобы изменения писались из сасса в обычный цсс. Command Prompt будет писать:

write css/bootstrap.css

Итак, чтобы попасть в Command Prompt в нужную директорию, сначала нужно туда перейти, так как по умолчанию Command Prompt у вас открывается в C:\Users\Admin. Для этого набираем в черном окошке:
pushd d:\ваш_диск\папка_проектов\проект

Например у меня это выглядит так:
pushd d:\DATA E\2020\sitename

Далее пишем в Command Prompt:
sass —watch sass:css (два дефиса перед watch)

Эта строка так и переводится — сасс —смотри за sass:css.

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

И все — октрываем в Дримвивере файлы scss и правим. Если после обновления html-файла в браузере изменений не видно, то откройте Command Prompt и проверьте — возможно, вы сделали какую-то ошибку при написании стилей в scss.

Развёрнутое руководство по Sass/SCSS

Современный CSS — мощь, а в комбинации с препроцессорами — вообще боевая машина для оформления контента на страницах. В статье приведено развёрнутое руководство по Sass/SCSS с примерами. После прочтения узнаете, как использовать миксины, переменные и директивы для ещё большего контроля над стилями.

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

Содержание статьи

Зачем использовать Sass/SCSS вместо CSS?

  1. Вложенность — SCSS позволяет вкладывать правила CSS друг в друга. Вложенные правила применяются только для элементов, соответствующих внешним селекторам (а если речь идёт о Sass, то там и без скобок всё красиво и интуитивно понятно).
  2. Переменные — в стандартном CSS тоже есть понятие переменных, но в Sass с ними можно работать немного по-другому. Например, повторять их через директиву @for . Или генерировать свойства динамически. Подробнее можете изучить на русскоязычном сайте проекта.
  3. Улучшенные математические операции— можно складывать, вычитать, умножать и делить значения CSS. В отличие от стандартного CSS, Sass/SCSS позволяют обойтись без calc() .
  4. Тригонометрия — SCSS позволяет писать собственные (синусоидальные и косинусоидальные) функции, используя только синтаксис Sass/SCSS, подобно тому, как это можно делать в других языках вроде JavaScript.
  5. Директивы @for , @while и выражение @if-else — можно писать CSS-код, используя знакомые элементы из других языков. Но не обольщайтесь — в итоге на выходе будет обычный CSS.
  6. Миксины (примеси) — можно один раз создать набор CSS-свойств и работать с ними повторно или смешивать с другими значениями. Миксины можно использовать для создания отдельных тем одного макета. Примеси также могут содержать целые CSS-правила или что-либо другое, разрешённое в Sass-документе. Они даже могут принимать аргументы, что позволяет создавать большое разнообразие стилей при помощи небольшого количества миксинов.
  7. Функции можно создавать определения CSS в виде функций для многократного использования.

Препроцессор Sass

Sass не динамичен. У вас не получится генерировать и/или анимировать CSS-свойства и значения в реальном времени. Но можно их создавать более эффективным способом и позволить стандартным свойствам (вроде анимации на CSS) заимствовать их оттуда.

Синтаксис

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

Пререквизиты

Существует 5 CSS-препроцессоров: Sass, SCSS, Less, Stylus и PostCSS.

Эта статья по большей части охватывает SCSS, который похож на Sass. Детальнее об этих препроцессорах можете прочитать на Stack Overflow (оригинал) или на qaru (перевод на русский).

SASS — (.sass) Syntactically Awesome Style Sheets.

XYZ school, Москва, до 250 000 ₽

SCSS — (.scss) Sassy Cascading Style Sheets.

Расширения .sass и .scss похожи, но всё-таки не одинаковы. Для фанатов командной строки приводим способ конвертации:

Sass — первая спецификация для SCSS с расширением файла .sass . Её разработка началась ещё в 2006 году, но позже был разработан альтернативный синтаксис с расширением .scss .

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

Переменные

Sass/SCSS позволяет работать с переменными. В CSS они обозначаются двойным тире ( — ), а в препроцессорах знаком доллара ( $ ).

Вы можете присваивать значение по умолчанию переменным, у которых ещё нет значения, добавив метку !default в конце значения. В таком случае, если переменной уже было присвоено значение, оно не изменится; если же переменная пуста, ей будет присвоено новое указанное значение.

Переменные в Sass могут быть присвоены любому свойству.

Вложенные правила

Стандартные вложенные CSS-элементы с использованием пробела:

Те же вложенные элементы с помощью SCSS:

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

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

За кулисами препроцессор всё ещё компилирует его в стандартный код CSS (показано выше), чтобы он мог быть отображён в браузере. Мы лишь изменяем способ написания CSS.

Амперсанд

В SCSS используется директива & .

С помощью символа & вы можете явно указать, где должен быть вставлен родительский селектор.

Результат компиляции Sass (из предыдущего примера) в CSS ниже.

В итоге амперсанд был компилирован в название родительского элемента a ( a:hover ).

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

Миксины объявляются директивой @mixin . После неё должно стоять имя миксина и, опционально, его параметры, а также блок, содержащий тело миксина. Например, можно определить миксин flexible() , который далее будет включён, например, в класс .centered-elements следующим образом:

Теперь каждый раз после применения класса .centered-elements к HTML-элементу, последний будет преобразован во Flexbox.

Миксины могут также содержать селекторы, в том числе со свойствами. А селекторы могут содержать ссылки на родительский элемент через амперсанд ( & ), вы ведь помните про него?

Пример работы с несколькими браузерами

Некоторые вещи в CSS весьма утомительно писать, особенно в CSS3, где плюс ко всему зачастую требуется использовать большое количество вендорных префиксов( -webkit- или -moz- ).

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

Арифметические операции

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

Сложение и вычитание

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

Умножение

Выполняется точно так же, как в CSS, с помощью calc(a * b) , но без calc и круглых скобок. Кроме того, можно ещё отделять знак умножения пробелами от чисел ( 5*6 == 5 * 6 ).

Исключение Нельзя умножать пиксели между собой. То есть, 10px * 10px != 100px . 10px * 10 == 100px .

Деление

С делением дела обстоят немного сложнее, но разобраться можно, ведь в стандартном CSS косая линия (слэш) зарезервирована для использования краткой формы записи свойств. Пример ниже.

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

  1. Значение (или любая его часть) хранится в переменной или возвращается функцией.
  2. Значения заключены в круглые скобки.
  3. Значение используется как часть другого арифметического выражения.

Результат компиляции в CSS:

Остаток

Остаток вычисляет остаток от операции деления. Ниже рассмотрим, как создать «зебру» для HTML-списка.

Создание миксина zebra показано во вставке кода сверху. Директивы @for и @if описаны в секции ниже.

Для создания образца надо написать несколько HTML-элементов.

Результат в браузере:

Зебра успешно сгенерирована миксином zebra

Операторы сравнения

Директива @if принимает выражение SassScript и использует вложенные в неё стили в случае, если выражение возвращает любое значение, кроме false или null .

Ниже показано, как работают директивы @if и @else , вложенные в миксин.

Сравнение в действии. Миксин spacing выберет размеры padding ’а, если тот будет больше, чем margin .

После компиляции в CSS:

Логические операторы

Описание логических операторов

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

Строки

В CSS определено 2 типа строк: с кавычками и без. Sass распознаёт и то, и другое. В итоге вы получите в CSS тот тип строк, который использовали в Sass.

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

Пример ниже демонстрирует, как делать не надо.

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

Строки, содержащие пробелы, должны быть отделены кавычками. Решение проблемы:

Пример сложения нескольких строк:

Сложение строк и чисел:

Обратите внимание Свойство content работает только с псевдоселекторами :before и :after . Рекомендуется не использовать content в CSS-документе, а напрямую использовать его между тегами в HTML.

Операторы управления потоками

В SCSS есть функции ( fucntion() ) и директивы ( @directive ). Чуть выше мы уже рассматривали пример функции, когда изучали передачу аргументов внутри миксинов.

Функции обычно заключаются в скобки, следующие сразу за её именем. А директива начинается с символа @ .

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

if() — это функция (и иногда основа искусственного интеллекта).

Её использование выглядит довольно примитивным: оператор вернёт одно из двух обозначенных в условии значений.

@if — это директива, использующаяся для разветвления на основе условия.

Ниже показано комбо-разветвление с добавлением директивы @else .

Проверка на наличие родительского элемента

Амперсанд выбирает родительский элемент, если тот существует. В ином случае вернёт null . Поэтому может использоваться совместно с директивой @if .

В следующих примерах рассмотрим создание условных CSS-стилей в зависимости от наличия родительского элемента.

Директива @for

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

Директива @for итерируется 5 раз.

Результат компиляции в CSS:

Директива @each

Директива @each устанавливает $var в каждое из значений списка или словаря и выводит содержащиеся в ней стили, используя соответствующее значение $var .

Результат компиляции в CSS:

Директива @while

Директива @while принимает выражение SassScript и циклично выводит вложенные в неё стили, пока выражение вычисляется как true . Она может быть использована для создания более сложных циклов, чем таких, для которых подходит @for , хотя она бывает необходима довольно редко. Например:

Функции в Sass/SCSS

Используя Sass/SCSS можно использовать функции так же, как и в других языках.

Создадим функцию three-hundred-px() , возвращающую 300px.

После применения класса .name ширина элемента будет равна 300 пикселям.

Результат в браузере:

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

Тригонометрия

Тригонометрические функции sin() и cos() часто встречаются в виде встроенных классов во многих языках, таких как JavaScript, например.

Их работу стоит изучать, если нужно сократить время, затрачиваемое на разработку анимаций пользовательского интерфейса, например для создания троббера. Мы, кстати, уже говорили об этом в одной из статей. Но в данном случае это будет код, а не gif-картинка, вставленная в HTML-документ.

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

Преимущество использования тригонометрии в сочетании с CSS выражается в отсутствии дополнительных HTTP-запросов, как это происходит с gif-изображениями.

Можно писать тригонометрические функции на Sass. Об этом читайте далее.

Написание собственных функций

В тригонометрии многие операции основаны на функциях. Каждая функция строится на основе другой. Например, функция rad() требует использования PI() . Функции cos() и sin() требуют использование rad() .

Написание функций на Sass/SCSS очень похоже на написание функций в других языках.

Использование функции pow() :

Использование функции rad() :

Для вычисления тангенса функцией tan() нужно применить функции sin() и cos() .

Заключение

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

Пошаговая установка Ruby и Sass: автоматическое обновление CSS файла

Ruby Sass Has Reached End-of-Life

Ruby Sass should no longer be used, and will no longer be receiving any updates. See the Sass blog, and consider switching to the sassc gem.

Sass makes CSS fun again. Sass is an extension of CSS, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

Sass has two syntaxes. The new main syntax (as of Sass 3) is known as «SCSS» (for «Sassy CSS»), and is a superset of CSS’s syntax. This means that every valid CSS stylesheet is valid SCSS as well. SCSS files use the extension .scss .

The second, older syntax is known as the indented syntax (or just «Sass»). Inspired by Haml’s terseness, it’s intended for people who prefer conciseness over similarity to CSS. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks. Although no longer the primary syntax, the indented syntax will continue to be supported. Files in the indented syntax use the extension .sass .

Sass can be used from the command line or as part of a web framework. The first step is to install the gem:

After you convert some CSS to Sass, you can run

to compile it back to CSS. For more information on these commands, check out

To install Sass in Rails 2, just add config.gem «sass» to config/environment.rb . In Rails 3, add gem «sass» to your Gemfile instead. .sass or .scss files should be placed in public/stylesheets/sass , where they’ll be automatically compiled to corresponding CSS files in public/stylesheets when needed (the Sass template directory is customizable. see the Sass reference for details).

Sass can also be used with any Rack-enabled web framework. To do so, just add

to config.ru . Then any Sass files in public/stylesheets/sass will be compiled into CSS files in public/stylesheets on every request.

To use Sass programmatically, check out the YARD documentation.

Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly, particularly with the help of the Compass style library.

Sass has two syntaxes. The one presented here, known as «SCSS» (for «Sassy CSS»), is fully CSS-compatible. The other (older) syntax, known as the indented syntax or just «Sass», is whitespace-sensitive and indentation-based. For more information, see the reference documentation.

To run the following examples and see the CSS they produce, put them in a file called test.scss and run sass test.scss .

Sass avoids repetition by nesting selectors within one another. The same thing works for properties.

Use the same color all over the place? Need to do some math with height and width and text size? Sass supports variables, math operations, and many useful functions.

Even more powerful than variables, mixins allow you to re-use whole chunks of CSS, properties or selectors. You can even give them arguments.

A comprehensive list of features is available in the Sass reference.

The Sass gem includes several executables that are useful for dealing with Sass from the command line.

The sass executable transforms a source Sass file into CSS. See sass —help for further information and options.

The sass-convert executable converts between CSS, Sass, and SCSS. When converting from CSS to Sass or SCSS, nesting is applied where appropriate. See sass-convert —help for further information and options.

To run the Sass executables from a source checkout instead of from rubygems:

Sass was envisioned by Hampton Catlin (@hcatlin). However, Hampton doesn’t even know his way around the code anymore and now occasionally consults on the language issues. Hampton lives in San Francisco, California and works as VP of Technology at Moovweb.

Natalie Weizenbaum is the primary developer and architect of Sass. Her hard work has kept the project alive by endlessly answering forum posts, fixing bugs, refactoring, finding speed improvements, writing documentation, implementing new features, and designing the language. Natalie lives in Seattle, Washington and works on Dart application libraries at Google.

Chris Eppstein is a core contributor to Sass and the creator of Compass, the first Sass-based framework, and Eyeglass, a node-sass plugin ecosystem for NPM. Chris focuses on making Sass more powerful, easy to use, and on ways to speed its adoption through the web development community. Chris lives in San Jose, California with his wife and two children. He is an Engineer for LinkedIn.com, where his primary responsibility is to maintain Sass and many other Sass-related open source projects.

If you use this software, we’d be truly honored if you’d make a tax-deductible donation to a non-profit organization and then let us know on twitter, so that we can thank you. Here’s a few that we endorse:

Топ-пост этого месяца:  Javascript & Ajax
Добавить комментарий