Как установить sass

Install Sass

There are a good many applications that will get you up and running with Sass in a few minutes for Mac, Windows, and Linux. You can download most of the applications for free but a few of them are paid apps (and totally worth it).

• CodeKit (Paid) Mac
• Prepros (Paid) Mac Windows Linux

Libraries Libraries permalink

The Sass team maintains two Node.js packages for Sass, both of which support the standard JavaScript API . The sass package is pure JavaScript, which is a little slower but can be installed on all platforms Node.js supports. The sass-embedded package wraps a JS API around the Dart VM , so it’s faster but only supports Windows, Mac OS , and Linux.

There are also community-maintained wrappers for the following languages:

• Ruby
• Swift
• Java, including:
  • A Gradle plugin.
  • A lightweight Maven plugin wrapping the Sass CLI . It specifies the Sass version to use. The CLI arguments are passed-in with an list.
  • A batteries-included Maven plugin wrapping Dart Sass. It bundles a fixed dart-sass version. The CLI arguments are exposed as Maven parameters.

  Command Line Command Line permalink

  When you install Sass on the command line, you’ll be able to run the sass executable to compile .sass and .scss files to .css files. For example:

  sass source/stylesheets/index.scss build/stylesheets/index.css 

  First install Sass using one of the options below, then run sass —version to be sure it installed correctly. If it did, this will include 1.69.5 . You can also run sass —help for more information about the command-line interface.

  Once it’s all set up, go and play. If you’re brand new to Sass we’ve set up some resources to help you learn pretty darn quick.

  Install Anywhere (Standalone)

  You can install Sass on Windows, Mac, or Linux by downloading the package for your operating system from GitHub and adding it to your PATH . That’s all—there are no external dependencies and nothing else you need to install.

  Install Anywhere (npm)

  If you use Node.js, you can also install Sass using npm by running

  npm install -g sass 

  However, please note that this will install the pure JavaScript implementation of Sass, which runs somewhat slower than the other options listed here. But it has the same interface, so it’ll be easy to swap in another implementation later if you need a bit more speed!

  Install on Windows (Chocolatey)

  If you use the Chocolatey package manager for Windows, you can install Dart Sass by running

  choco install sass 

  Install on Mac OS X or Linux (Homebrew)

  If you use the Homebrew package manager for Mac OS X or Linux, you can install Dart Sass by running

  brew install sass/sass/sass 

  • Current Releases:
  • Dart Sass1.69.5
  • LibSass3.6.5
  • Ruby Sass ⚰
  • Implementation Guide

  Sass © 2006–2023 the Sass team, and numerous contributors. It is available for use and modification under the MIT License.

  Установка Sass

  Есть множество приложений под Windows, Mac и Linux, которые помогут в освоении и работе с Sass. Большинство из них бесплатные, но некоторые из них все-таки платные (но это того стоит).

  • CodeKit (Платно) Mac
  • Compass.app (Условно-бесплатно) Mac Windows Linux
  • Ghostlab (Платно) Mac Windows
  • Hammer (Платно) Mac
  • Koala (Бесплатно) Mac Windows Linux
  • LiveReload (Условно-бесплатно) Mac Windows
  • Prepros (Платно) Mac Windows Linux
  • Scout-App (Бесплатно) Windows Linux Mac

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

  Когда вы используете Sass через командную строку, то для того, чтобы запустить компиляцию .sass и .scss в .css файлы введите команду sass . Например:

  sass source/stylesheets/index.scss build/stylesheets/index.css 

  Используя любой способ установки Sass, запустите команду sass —version чтобы быть уверенным, что установка прошла успешно. Если эту команду выполнить, то в ответ вы получите версию Sass 1.5.1 . Также вы можете запустить команду sass —help для получения информации по использованию Sass в командной строке.

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

  Установка в любом месте (Standalone) Вы можете установить Sass в Windows, Mac, или Linux путем скачивания дистрибутива для вашей операционной системы from GitHub и выполните действия с PATH . Вот и все: никаких зависимостей нет и ничего не нужно устанавливать дополнительно. Установка в любом месте (npm)

  Если вы используете Node.js, то вы можете установить Sass c помощью npm:

  npm install -g sass

  Однако, учтите, что это установит реализацию Sass на нативном JavaScript, которая работает несколько медленнее, чем другие реализации, перечисленные здесь. Но он имеет тот же интерфейс, поэтому будет легче поменять на другую реализацию позже, если вам потребуется немного больше скорости! Установка в Windows (Chocolatey)

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

  choco install sass

  Установка в Mac OS X (Homebrew)

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

  brew install sass/sass/sass

  Установка — SASS: Основы работы

  Использовать SASS можно во многих случаях. Это может быть:

  • онлайн-окружение, которое автоматически переводит код из SASS в CSS,
  • пакет в вашей системе (как например surge из первого проекта),
  • отдельное программное обеспечение, переводящее файлы из .sass/.scss в .css.

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

  Онлайн-окружение

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

  Это самый простой и быстрый вариант, который позволит вам писать CSS-код с использованием препроцессора SASS.

  Другим популярным инструментом является сервис Sassmeister . Он позволяет быстро переводить код SASS в обычный CSS. Преимуществом данного сервиса является возможность выбора разных типов компиляторов. Это позволяет проверить свой код в разных условиях и, возможно, выявить несколько ошибок, с которыми можно столкнуться.

  Программное обеспечение

  Вы можете установить отдельное ПО, которое будет компилировать файлы препроцессора в обычный CSS. Таких программ достаточно много, и многие из них доступны под все основные платформы (Windows, Linux, macOS). Распространённой программой является Koala . Она доступна под все основные платформы, а её интуитивный интерфейс позволит быстро разобраться в процессе компиляции файлов препроцессора.

  Просто выберете директорию с вашими файлами .scss, и Koala автоматически преобразует их в файлы .css.

  Установка SASS в виде пакета

  Вы можете установить SCSS в виде обычного npm-пакета в вашу систему. Это наиболее простой и быстрый путь, позволяющий вам использовать SASS без установки дополнительного программного обеспечения и не требует выхода в интернет, как в случае с онлайн-сервисами.

  Для установки SASS убедитесь, что у вас установлен Node.js. Откройте терминал и выполните следующую команду:

  sudo npm install -g sass 

  Если вы используете операционную систему Windows, вам необходимо установить пакетный менеджер Chocolatey. О способах установки вы можете прочитать в руководстве Как начать разрабатывать в Windows.

  После установки Chocolatey выполните следующую команду:

  install sass 

  Для установки SASS на macOS используйте следующую команду:

  install sass/sass/sass 

  После установки пакета вам в терминале станет доступна команда sass. В базовом её виде вам достаточно передать ей два параметра:

  • Путь к входному файлу. Это находящийся в вашей системе файл .sass/.scss.
  • Путь к выходному файлу. Здесь указывается путь до файла .css, в который запишется весь CSS после компиляции. Не обязательно создавать этот файл заранее. Если его не существует, то программа сама создаст его по пути, который вы указали.

  Помимо возможности компиляции, у вас также будет возможность запустить интерактивную оболочку (shell). С помощью неё вы можете легко экспериментировать с различными функциями SASS. Для запуска интерактивной оболочки выполните в терминале команду sass -i:

  -i >> 1px + 1px 2px 

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

  Все примеры и упражнения в данном курсе будут компилироваться с помощью этой библиотеки. Библиотека называется Dart-SASS. Это важно, так как разные компиляторы могут по-разному обрабатывать SASS код. Различия незначительны, но при выборе другой библиотеки стоит поискать отличия.

  Дополнительные материалы

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

  Дополнительное задание

  Установите на свой компьютер SASS с помощью пакетного менеджера. Попробуйте создать файл с расширением .scss и скомпилировать его. В scss-файле можете указать следующий код:

  header  width: 50%; background: brown; &.w-100  width: 100%; > > 

  Открыть доступ

  Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов

  Наши выпускники работают в компаниях:

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

  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 style.scss style.css

  Читать:

  В какое значение можно установить свойство серии кодов объекта конфигурации справочник 1с