Использование последнего процесса настройки Sass в VS Code

внешний интерфейс Командная строка Ruby CSS

Простите меня за титульную партию, это правда. Сообщения в блогах, которые я нашел, представляют собой одно предложение, которое привело меня к этомуОфициальный сайтЗагрузите установочный пакет. (Ссылка на инсталляционный пакет помещена в конце статьи) После перепробования нескольких версий, загрузка все равно в половине случаев не удалась.Возможно качество моей лестницы не очень. Кроме того, это очень сбивает с толку: руководство сайта sass.hk, полученное путем поиска sass в поисковой системе, неверно..."gem sources -a https://ruby.taobao.org/", после ввода этого предложения в командной строке сразу будет сообщено об ошибке, извините, забыл сделать снимок экрана. Эффект в том, что команда неверна, почему бы вам не попробовать эту ссылку:https://gems.ruby-china.com/. Открыв его, я знал правильную позу для установки sass. Вроде неправильно, командную строку все-таки далиhttps://gems.ruby-china.org, из-за проблем с регистрацией вам все равно придется использовать доменное имя .com. Вот почему я использую слово «последние», технологии меняются, вы должны успевать за ними.

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

я используюsass, зачем устанавливатьRuby?потому чтоsassна основеRubyразработка языка, так что устанавливайтеsassнеобходимо установитьRuby. Ruby поставляется с Mac без установки.

После загрузки установочного пакета нажмите «Установить», и появится следующий интерфейс.

Вам не нужно проверять тот, у которого больше 744 м. Кроме того, есть один, который нужно проверить, «добавить исполняемые файлы ruby ​​​​в ваш PATH» (сейчас он, кажется, проверяется по умолчанию), чтобы добавить ruby ​​​​в системные переменные. После завершения установки появится диалоговое окно с вопросом, хотите ли вы напрямую открыть командную строку, чтобы установить что-то, не проверять это, а затем закончить. Когда я устанавливал его в первый раз, хватило и того, и другого, а потом я скачал несколько гигабайт инсталляционных пакетов в командной строке...

После того, как вы закончите, нажмите «Запустить командную строку с Ruby» на панели запуска, и вы войдете в нужный черный ящик.


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

$ gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
$ gem sources -l
# 此处是 l(list),不是1
https://gems.ruby-china.com
# 确保只有 gems.ruby-china.com

Затем установите последнюю версию Sass и Compass.

//安装如下(如mac安装遇到权限问题需加 sudo gem install sass)
gem install sass
gem install compass

В каждом из процессов установки вы увидите следующий вывод:

Fetching: sass-3.x.x.gem (100%)
Successfully installed sass-3.x.x
Parsing documentation for sass-3.x.x
Installing ri documentation for sass-3.x.x
Done installing documentation for sass after 6 secon
1 gem installed

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

sass -v
Sass 3.x.x (Selective Steve)

compass -v
Compass 1.x.x (Polaris)
Copyright (c) 2008-2015 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

Следующие команды sass часто используют update, view version, sass command help и другие команды:

//更新sass
gem update sass

//查看sass版本
sass -v

//查看sass帮助
sass -h

ОК, sass уже установлен. как использовать?

Здесь мы обсуждаем только использование в VS Code. Пишите код sass, потому что браузер не распознает код. Поэтому нам нужно использовать инструменты, которые помогут нам преобразовать sass в язык css, который распознают браузеры.

Найдите sass на панели плагинов VS Code, и вы увидите плагины, связанные с sass, инструменты компиляции, которые нам нужны. Возьмите Easy Sass в качестве примера. После завершения установки плагин настроен для вас. Но иногда нам не нужно компилировать в два формата, просто напишите свою конфигурацию справа, чтобы перезаписать конфигурацию слева. Кроме того, есть также путь хранения файлов после завершения компиляции.Как правило, наши проекты будут иметь каталог css, поэтому вы можете установить путь хранения скомпилированных файлов в ./css/. Но вот директорию надо создать самому, иначе он подскажет, что директории не существует.

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


После этого вы можете с удовольствием использовать sass.

Установочный файл Windows: ссылка:share.weiyun.com/5Je7HEf(пароль: MRag)

Примечание. Часть об установке sass с помощью команд в этой статье относится к веб-сайту sass.hk.