Sass: установите Sass
Приложения
Существует множество приложений, которые помогут вам настроить и запустить Sass за несколько минут для Mac, Windows и Linux. Вы можете скачать большинство приложений бесплатно, но некоторые из них являются платными приложениями (и они того стоят) .
- CodeKit (платный) Mac
- Hammer (платный) Mac
- LiveReload (платный, с открытым исходным кодом) Mac Windows
- Prepros (платный) Mac Windows Linux
- Приложение Scout (бесплатное, с открытым исходным кодом) Windows Linux Mac
Библиотеки
Команда Sass поддерживает два пакета Node.js для Sass, оба из которых поддерживают стандартный API JavaScript. Пакет sass — это чистый JavaScript, который немного медленнее, но его можно установить на все платформы, поддерживаемые Node.js. Пакет со встроенным sass оборачивает JS API вокруг виртуальной машины Dart, поэтому он работает быстрее, но поддерживает только Windows, Mac OS и Linux.
Существуют также оболочки, поддерживаемые сообществом, для следующих языков:
- Java, включая плагины Gradle и Maven.
- Ruby
- Swift
Командная строка
Когда вы устанавливаете SASS на командную строку, вы сможете запустить исполняемый SASS для составления . .css файлов. Например:
источник sass/stylesheets/index.scss build/stylesheets/index.css.
Сначала установите Sass, используя один из приведенных ниже вариантов, затем запустите sass --version , чтобы убедиться, что он установлен правильно. Если это так, это будет включать 1.55.0 . Вы также можете запустить sass --help для получения дополнительной информации об интерфейсе командной строки.
Когда все настроено, иди и играй . Если вы новичок в Sass, мы подготовили несколько ресурсов, которые помогут вам чертовски быстро освоиться.
Узнать больше о Sass
- Установить где угодно (автономно)
- Вы можете установить Sass на Windows, Mac или Linux, загрузив пакет для своей операционной системы с GitHub и добавив его в свой
Вот и все — никаких внешних зависимостей и ничего больше вам не нужно устанавливать. - Install Anywhere (npm)
Если вы используете Node.js, вы также можете установить Sass с помощью npm, запустив
npm install -g sass
Однако обратите внимание, что установит реализацию Sass на чистом JavaScript, которая работает несколько медленнее, чем другие варианты, перечисленные здесь. Но у него тот же интерфейс, поэтому позже его легко будет заменить другой реализацией, если вам понадобится немного больше скорости!- Установить в Windows (Chocolatey)
Если вы используете диспетчер пакетов Chocolatey для Windows, вы можете установить Dart Sass, запустив
choco install sass
- Установка в Mac OS X или Linux (Homebrew)
Если вы используете диспетчер пакетов Homebrew для Mac OS X или Linux, вы можете установить Dart Sass, запустив
brew install sass/sass/sass
Вот и все — никаких внешних зависимостей и ничего больше вам не нужно устанавливать.- Текущие выпуски:
- Dart Sass 1. 55.0
- LibSass 3.6.5
- Ruby Sass ⚰
- Руководство по внедрению
55.0Введение в Sass
❮ Предыдущий Далее ❯
Что вы уже должны знать
Прежде чем продолжить, вы должны иметь общее представление о следующем:
- HTML
- УСБ
Если вы хотите сначала изучить эти предметы, найдите учебные пособия на нашем Домашняя страница.
Что такое Sass?
- Sass означает S синтаксически A wesome S Тип S Heet
- Sass — это расширение CSS .
- Sass — препроцессор CSS
- Sass полностью совместим со всеми версиями CSS .
- Sass был разработан Хэмптоном Кэтлином и разработан Натали Вейценбаум в 2006
- Sass можно загрузить и использовать бесплатно
Зачем использовать Sass?
Таблицы стилей становятся больше, сложнее,
и сложнее в обслуживании.
Здесь может помочь препроцессор CSS.
Сасс позволяет вы используете функции, которых нет в CSS, такие как переменные, вложенные правила, примеси, импорт, наследование, встроенные функции и прочее.
Простой пример, почему Sass полезен
Допустим, у нас есть сайт с тремя основными цветами:
#a2b9bc
#b2ad7f
#878f99
Итак, сколько раз вам нужно ввести эти шестнадцатеричные значения? Много раз. А также как насчет вариаций одного и того же цвета?
Вместо того, чтобы много раз вводить приведенные выше значения, вы можете использовать Sass и написать это:
Пример Sass
/* определяем переменные для основных цветов */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3:
#878f99;
/*
используйте переменные */
.main-header
{
фоновый цвет: $primary_1;
}
.меню-слева
{
фоновый цвет: $primary_2;
}
.меню-справа
{
фоновый цвет: $primary_3;
}
Итак, при использовании Sass и изменении основного цвета вам нужно только изменить
это в одном месте.
Как работает Sass?
Браузер не понимает код Sass. Поэтому вам понадобится Sass препроцессор для преобразования кода Sass в стандартный CSS.
Этот процесс называется транспилированием. Итак, вам нужно дать транспилятор (какая-то программа) немного кода Sass, а затем получить код CSS обратно.
Совет: Транспиляция — это термин, обозначающий использование исходного кода, написанного на одном языке. и преобразовать/перевести его на другой язык.
Тип файла Sass
Файлы Sass имеют расширение «.scss».
Комментарии Sass
Sass поддерживает стандартные комментарии CSS /* комментарий */ ,
и, кроме того, он поддерживает встроенные комментарии // комментарий :
Пример Sass
/* определение основных цветов */
$primary_1: #a2b9до н.э;
$primary_2: #b2ad7f;
/*
используйте переменные */
.
main-header
{
фоновый цвет: $primary_1; // здесь можно разместить встроенный комментарий
}
❮ Предыдущий Далее ❯
НОВИНКА
Мы только что запустили
Видео W3Schools
Узнать
ВЫБОР ЦВЕТА
КОД ИГРЫ
Играть в игру
Лучшие учебники
Учебное пособие по HTMLУчебное пособие по CSS
Учебное пособие по JavaScript
How To Tutorial
SQL Tutorial
Python Tutorial
W3.CSS Tutorial
Bootstrap Tutorial
PHP Tutorial
Java Tutorial
C++ Tutorial
jQuery Tutorial
Top References
HTML ReferenceCSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference
Лучшие примеры
Примеры HTMLПримеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.
