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

Обновлено: 02.12.2024

В этом руководстве по Sass/SCSS мы узнаем, как настроить полную среду разработки с помощью Node и NPM, Visual Studio Code и Sass.

Мы также расскажем, как настроить рабочее пространство, инициализировать проект и работать с терминалом.

Среда разработки Sass/SCSS

Прежде чем мы сможем начать писать какой-либо код Sass, нам нужно настроить среду разработки.

Для этого курса наша среда разработки будет состоять из следующих технологий:

Диспетчер пакетов узла (NPM)

Каждая установка Node.js поставляется в комплекте с npm, который нам понадобится для установки, запуска и сборки наших скриптов Sass/SCSS. Мы также используем его для работы с PostCSS позже.

note Если вам это нужно, Sass можно легко интегрировать в другие языки, такие как C, Rust и Python, через LibSass.

note К сожалению, реализация Sass на Ruby подошла к концу в марте 2019 года. Ruby больше нельзя использовать для Sass.

MS Visual Studio Code в качестве нашего редактора кода.

VS Code – это бесплатная интегрированная среда разработки для Windows, Mac и Linux со встроенной поддержкой Sass. Он имеет встроенный терминал, а также несколько дополнительных расширений, которые сделают нашу жизнь немного проще.

Если вы не хотите использовать VS Code в качестве редактора кода, вы можете попробовать одну из альтернативных IDE в конце урока.

Локальная установка Sass.

Пакет Sass можно установить как глобально (он будет доступен в любом проекте в нашей системе), так и локально (он будет доступен только для текущего проекта).

Мы всегда должны устанавливать Sass локально, чтобы избежать конфликтов между проектами.

Установите Node.js

Node.js — это среда выполнения, которая может выполнять код JavaScript вне веб-браузера.

Node поставляется вместе с Node Package Manager (NPM), который позволяет нам легко устанавливать и управлять пакетами Javascript, такими как Sass.

Если у вас еще не установлен Node.js, выполните следующие действия, чтобы установить его в своей системе.

Windows:

Откройте в браузере страницу загрузок Node.js.
Убедитесь, что вы выбрали вкладку LTS (долгосрочная поддержка).
Выберите установщик .msi для 32- или 64-разрядной версии в зависимости от используемой версии Windows.
После завершения загрузки запустите программу установки и следуйте инструкциям мастера установки.

Mac:

Откройте в браузере страницу загрузок Node.js.
Убедитесь, что вы выбрали вкладку LTS (долгосрочная поддержка).
Выберите установщик .pkg для 64-разрядной версии.
После завершения загрузки запустите программу установки и следуйте инструкциям мастера установки.

Линукс:

Перейдите на Nodesource и следуйте инструкциям по установке.

Nodesource предоставляет официальные двоичные дистрибутивы Node.js.

Подтвердить:

Чтобы убедиться, что Node.js установлен, выполните в терминале следующую команду. Любой номер версии означает, что установка прошла успешно.

Установите код MS Visual Studio

Чтобы настроить код MS Visual Studio, выполните следующие действия.

Перейдите в браузере на страницу загрузок Visual Studio Code.
Выберите загрузку в зависимости от вашей операционной системы и установите VSCode после завершения загрузки.

Примечание для пользователей Windows: если вы используете общий компьютер, выберите User Installer. В противном случае выберите Установщик системы.

Если у вас возникли проблемы с установкой VSCode, обратитесь за помощью к официальной документации.

Рабочее пространство

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

Создайте на рабочем столе одну папку под названием «LearningSass».
Откройте папку как проект/рабочее пространство в IDE.

Если вы работаете в Visual Studio Code, выберите «Файл» > «Открыть папку», затем перейдите к папке «LearningSass» на рабочем столе и выберите «Открыть папку».

Терминал

С этого момента мы начнем работать в терминале.

Если вы работаете в Visual Studio Code, выберите «Терминал» > «Новый терминал», чтобы запустить новый экземпляр терминала в нижней панели IDE.

Он будет автоматически указан в папке «LearningSass», поэтому нет необходимости переходить к нему. Это также означает, что вы можете перейти к следующему разделу .

Если вы не работаете с VS Code или редактором со встроенным терминалом, вам придется открыть терминал и вручную перейти в папку «LearningSass».

Windows:

Нажмите кнопку Windows, введите cmd и нажмите Enter, чтобы запустить командную строку.

Mac:

Откройте Приложения > Утилиты и дважды щелкните Терминал.

Линукс:

Нажмите Ctrl Alt T, чтобы открыть терминал.

Чтобы перейти к каталогу на компьютере, мы используем команду cd (изменить каталог), за которой следует путь к каталогу, в который мы хотим перейти.

Приведенная выше команда сообщает терминалу, что мы хотим перейти на рабочий стол, а затем в папку «LearningSass».

Совет. Если вы хотите перейти в родительский каталог, используйте команду ../.

Если мы находимся в каталоге «Desktop/LearningSass», приведенная выше команда переместится на один уровень вверх в «Desktop».

Оттуда легко вернуться в папку «LearningSass».

Оказавшись в папке «LearningSass», мы можем инициализировать наш проект и создать файл package.json.

Инициализация NPM и package.json

В любом проекте, использующем Node.js, должен быть файл package.json, и когда мы инициализируем проект с помощью команды init, мы создаем этот файл.

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

Чтобы инициализировать проект, выполните одну из следующих команд в терминале в каталоге вашего проекта.

Если вы добавите к команде флаг --yes, он немедленно инициализирует проект, не запрашивая у вас сведений о вашем проекте.

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

Если вы не добавите флаг, консоль попросит вас ввести определенные сведения о вашем проекте. Если вы хотите пропустить один из вопросов, просто нажмите Enter.

После инициализации проекта вы должны увидеть файл package.json в папке «LearningSass».

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

Установите Sass

Наконец мы готовы установить Sass.

Как упоминалось ранее, мы установим Sass локально. Это означает, что он будет доступен только в текущем проекте, что позволит избежать конфликтов или осложнений из-за глобальной установки.

Для этого выполните следующую команду в терминале в каталоге вашего проекта.

Пока идет установка, давайте выполним приведенную выше команду.

Первая часть — это способ установки любого пакета NPM.

Часть [package] заменяется названием того, что мы хотим установить, в данном случае sass .

Следующая часть — это флаг, определяющий дополнительные параметры.

Этот конкретный флаг сообщает NPM, что мы хотим сохранить Sass как зависимость разработки.

У нас также есть возможность сохранить Sass как зависимость времени выполнения, изменив флаг.

Но Sass не является средой выполнения, поэтому мы не сохраняем ее как таковую.

После завершения установки Sass в проекте должна появиться новая папка с именем «node_modules». Эта папка содержит Sass и все его собственные зависимости.

Файл package.json также изменился.

Мы видим новую запись под названием devDependencies с версией sass под ней.

Это означает, что все, кто работает с этим проектом, должны будут установить эти зависимости.

В качестве примера давайте представим, что мы хотим поделиться этим проектом с кем-то. Нам нужно будет включить всю папку «node_modules», чтобы другой человек, работающий над ней, имел те же инструменты.

Проблема в том, что папка «node_modules» в некоторых случаях может стать очень большой.

Если мы указываем наши зависимости для среды выполнения и разработки, нам не нужно включать папку «node_modules», когда мы делимся проектом (или добавляем его в систему управления версиями).

Затем другой человек может установить все эти зависимости в своей системе с помощью всего одной команды.

Для демонстрации давайте удалим всю папку «node_modules» из нашего проекта.

Чтобы переустановить все зависимости из файла package.json, нам просто нужно выполнить следующую команду.

После завершения установки папка «node_modules» вернется вместе с Sass.

Бонус: альтернативы IDE

Вы можете найти список альтернативных IDE ниже, если не хотите использовать Visual Studio Code.

Инструкции по установке можно найти в руководстве по летной эксплуатации Atom.

При желании терминал можно добавить с помощью пакета терминала PlatformIO IDE.

Инструкции по установке можно найти в официальной документации для Windows или Mac.

Любая версия выше 16.3 имеет встроенный терминал.

Инструкции по установке можно найти в неофициальной документации.

При желании терминал можно добавить с помощью пакета Terminus.

Инструкции по установке можно найти в разделе "Помощь" .

Webstorm имеет встроенный терминал.

Есть также несколько приложений с графическим интерфейсом, которые помогут вам быстро начать работу с Sass.

Наконец, существуют веб-сервисы, позволяющие работать с Sass.

Инструкции по использованию препроцессора можно найти в документации.

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

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

Когда я впервые начал работать с Sass, CSS-переменные не имели значения, поэтому для этого я тоже использовал SCSS.

В то время я использовал сочетание CodeKit, хорошо поддерживаемого приложения, которое также включает актуальные префиксы поставщиков. Однако это означало открытие двух приложений ( CodeKit и SublimeText ) для каждого сеанса кодирования.

Теперь, когда я изучаю JavaScript и React, я вижу, что "все" используют VS Code. Какое-то время я сопротивлялся и начал использовать SublimeText 4 (бета). Меня немного смущает моя нелояльность, но я, наконец, уступил давлению новых компьютерных игрушек и переключился на VS Code.

Изучая возможности компилятора SASS для VS Code, статьи и видео, которые я находил, постоянно приводили меня к компилятору Live Sass от Ритвика Дейя. Этот компилятор также устанавливает расширение под названием Live Server. Установка прошла гладко, и я настроил файлы .scss.

Я использую партиалы для организации своего CSS. Частицы, которые содержат меньшие сегменты CSS, хранятся в файлах, начинающихся с подчеркивания. Например, _global.scss или _header.scss. Они группируются вместе в файле с помощью правила @, которое затем компилируется в файл CSS.

До сегодняшнего утра я думал, что должен использовать правило @import, которым всегда пользовался и которое прекрасно скомпилировалось в CSS с помощью расширения.

Однако при просмотре документации Sass я обнаружил, что теперь они предлагают проприетарное правило под названием @use вместо @import. Это связано с относительно новой функцией, называемой модулями. что является темой для другой статьи.

Выйти из полноэкранного режима

Однако когда я попытался использовать правило @rule, компилятор просто скопировал его прямо в файл .css. Он не скомпилировался.

Отправка отряда

Часто задаваемые вопросы по поддержке Live Sass Compiler находятся в разделе «Проблемы» репозитория GitHub. Поиску помощи сильно мешал тот факт, что большинство вопросов были озаглавлены "Проблема с расширением!" Это должно быть заголовком по умолчанию в системе GitHub, и это отличный пример того, как нельзя писать заголовки запросов в службу поддержки!

Я упорствовал и, просматривая и просматривая, наконец нашел проблему под названием "ЭТО РАСШИРЕНИЕ БОЛЬШЕ НЕ ПОДДЕРЖИВАЕТСЯ".

На момент написания этой статьи прошло всего несколько недель с тех пор, как Гленн Маркс опубликовал этот выпуск. Он активно поддерживает свою версию на рынке.

Я удалил и Live Sass Compiler, и Live Server без происшествий. Затем я последовал инструкции Гленна, чтобы установить его версию, открыв палитру Quick Open в VS Code ( cmd+P на Mac) и набрав

Выйти из полноэкранного режима

Сейчас я изучаю генератор статических сайтов Hugo, поэтому у меня уже есть работающая серверная среда. В новой версии Glenn говорится, что она имеет функцию перезагрузки браузера в реальном времени. Привело ли это к конфликту? Затаив дыхание, я скомпилировал свои существующие файлы .scss, используя правило @use. и это сработало! С тех пор я добавил больше частей и стилей, и он все еще работает.

Итог: Live SASS Compiler от Ritwick Dey больше
не поддерживается. Используйте расширение Гленна Маркса,
поддерживающего ответвление оригинала при поддержке Ритвика Дейя . Смотрите обновление в комментариях.

Я рад узнать, что могу использовать новейшие функции Sass, и с нетерпением жду продолжения своего проекта завтра.

Слава, Гленн! Спасибо.

Разное

SublimeText по-прежнему отличный редактор кода. На данный момент я использую его как текстовый редактор. Такое ощущение, что он открывается намного легче, чем другие.

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

Сейчас самое время наверстать упущенное в CSS. Например, теперь я использую переменные CSS вместо переменных SCSS.

SASS расшифровывается как "Syntactically Awesome Style Sheets" и является расширением CSS, которое помогает нам писать более гибкие стили, другими словами, это препроцессор CSS.

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

Примечание. Как работает SASS?

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

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

Другими словами, SASS помогает нам организовывать большие таблицы стилей более удобным для сопровождения способом. В этой статье вы научитесь настраивать среду разработки для SASS в Visual Studio Code.

Как настроить среду разработки SASS в VS Code

Теперь следуйте пошаговым инструкциям, чтобы начать работу с SASS внутри VS Code:

Шаг 1. Загрузите Visual Studio Code (VS Code) и установите его в своей системе.

Шаг 2. Откройте VS Code и перейдите на вкладку "Расширения".

Шаг 3. Найдите компилятор DartJS Sass и Sass Watcher от CodeLios и установите их.

Это расширение станет волшебной частью SASS в вашем проекте, совместимом с последней версией Dart SASS.

Шаг 4. Затем установите Live Server из VS Code Marketplace.

Это расширение позволяет браузеру автоматически перезагружаться.

Шаг 5. Создайте каталог с именем «SASS-DEV» в VS Code.

Шаг 6. В корневом каталоге создайте файл index.html, а затем добавьте следующий HTML-код:

Текущая структура каталогов и HTML-код будут выглядеть так, как показано на рисунке:

Шаг 7. Затем создайте каталог с именем «sass» в корневом каталоге проекта. Затем в каталоге «sass» создайте еще один файл с именем «style.scss».

.scss или .sass?

В SASS есть два способа записи — .scss и .sass — однако после компиляции они генерируют одинаковый вывод.

.scss — это современный стандарт. Его синтаксис очень похож на CSS, поскольку в нем используются скобки и точки с запятой. Даже обычный CSS допустим в этом синтаксисе.

.sass – это старый синтаксис, в котором основное внимание уделяется отступам для разделения блоков кода и символам новой строки для разделения правил.

Шаг 8. Теперь давайте сразу напишем код в «style.scss».

Затем сохраните файл, нажав CTRL + S, чтобы автоматически сгенерировать файлы «style.css», «style.css.map», «style.min.css» и «style.min.css.map».

Во время написания кода вам нужно только написать код в «style.scss», и он автоматически сгенерирует для вас простой CSS в файле «style.css».

Примечание. Никогда не добавляйте код в файл css, иначе он будет автоматически удален компилятором SASS.

Шаг 9. После завершения настройки нажмите «Go Live» в строке состояния кода VS, после чего запустится браузер Chrome, чтобы открыть Live-сервер с IP-адресом и портом. Вы можете начать создавать свой проект вместе со всеми активами. Любые изменения файла, такие как «index.html», будут автоматически перезагружены в вашем открытом браузере.

Вот как результат выглядит в браузере Google Chrome:

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

Для SASS доступно несколько приложений, но мы рекомендуем два лучших приложения:

Prepros: этот инструмент компилирует SASS с автоматическим префиксом CSS и включает встроенный сервер для кросс-браузерного тестирования. Все его функции доступны с бесплатной неограниченной пробной версией и бонусом, который работает на Mac, Windows и Linux.

Koala: это приложение с графическим интерфейсом также является кроссплатформенным и обеспечивает компиляцию в реальном времени. Koala работает на Mac, Windows и Linux.

Эта фиксация не принадлежит ни к одной из веток в этом репозитории и может принадлежать ответвлению за пределами репозитория.

Открыть с рабочего стола
Просмотреть в необработанном виде
Копировать исходное содержимое Копировать необработанное содержимое

Копировать необработанное содержимое

liveSassCompile.settings.format

liveSassCompile.settings.savePath

liveSassCompile.settings.extensionName

[НОВОЕ] liveSassCompile.settings.formats : для настройки формата (стиля), имени расширения и места сохранения для экспортируемого css [поддерживается несколько форматов].

Формат может быть расширенным , сжатым , сжатым или вложенным . По умолчанию расширен .

Имя расширения может быть .css или .min.css . По умолчанию — .css .

[Новое] Место сохранения относительно корня рабочей области или ваших файлов Sass.

Значение по умолчанию — null . ( null означает, что он будет генерировать CSS в местоположении scss/sass. Кстати, это null , НЕ "null" ).

"/" обозначает относительно корня.

"~ " обозначает относительно каждого файла sass. - Сложный сценарий. (Ознакомьтесь с примером)

liveSassCompile.settings.excludeList: для исключения определенных папок. Все файлы Sass/Scss внутри папок будут игнорироваться.

Вы можете использовать шаблон отрицательного шара.

Пример: если вы хотите исключить все файлы, кроме file1.scss и file2.scss, из каталога пути/подпути, вы можете использовать выражение -

liveSassCompile.settings.includeItems: этот параметр полезен, когда вы имеете дело только с несколькими файлами sass. Будут включены только упомянутые файлы Sass.

ПРИМЕЧАНИЕ. Нет необходимости включать частичные файлы sass.
Значение по умолчанию – null
Пример:

liveSassCompile.settings.generateMap : установите значение false, если вы не хотите использовать файл .map для скомпилированного CSS.

liveSassCompile.settings.autoprefix : автоматически добавлять префиксы поставщиков к неподдерживаемым свойствам CSS (например, transform -> -ms-transform ).

Укажите, на какие браузеры ориентироваться, с помощью массива строк (использует список браузеров).

Читайте также: