Меню Рубрики

Установка sass в проект

Установка 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, запустите команду sass —version чтобы быть уверенным, что установка прошла успешно. Если эту команду выполнить, то в ответ вы получите версию Sass 1.5.1 . Также вы можете запустить команду sass —help для получения информации по использованию Sass в командной строке.

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

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

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

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

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

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

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

источник

Как установить SASS в проект через npm?

Здравствуйте. Моё знакомство с node и установка чего-то через консоль началась с установки Vue через webpack. Там всё было несложно для новичка : установка vue-cli, затем npm init webpack-simple, затем установка зависимостей : npm i. И на десерт запуск вотчера : npm run dev. Теперь при сохранении в текстовом редакторе, страница автоматически обновляется. На том моё знакомство с node закончилось и можно было вытирать пот со лба. Сегодня захотел попробовать установить только sass, подсмотрев в одном видео уроке такую команду

npm install sass-loader node-sass style-loader —save-dev

И хотя автор устанавливал sass после установки vue, но судя по команде, тут просто ставится sass. Я попробовал, и конечно же sass не заработал. Видимо, дело в зависимостях и чего-то ещё не хватает. Подскажите, пожалуйста, что ещё нужно, чтобы в проект подключился sass-loader? До этого я пользовался программой Koala. Но хочется потихонечку перебарывать лёгкие пути и медленно понимать node.
Так что хотелось бы иметь возможность использовать sass в проекте и чтобы страница могла автоматически обновляться. А там уже может и дальше пойдёт. Я стараюсь делать всё пошагово и не хотелось бы сейчас вникать во всю внутреннюю кухню node. Любая новая информация даётся с большим трудом. Мне бы в обычный пустой проект просто установить sass и запускать npm run dev — хотя это из одного видео. В другом, автор использовал npm start. И пока всё на том. Что для этого нужно? Заранее спасибо.

В документации все написано. В ютубе полно роликов про webpack 4. Пример установки лоадера показан вот здесь https://webpack.js.org/concepts/loaders/#example . Пример установки sass-loader написан прямо в npm. Чтобы настроить перезагрузку страницы при изменениях, то нужно настроить dev сервер в вебпаке. Готовых конфигов, если не хочется вникать, в интернете полно.

Документация отвечает на все вопросы на 100%. Вкратце, нужно указать в webpack.config.js точку входа (это главный js файл), и точку выхода (куда ложить файлы после обработки вебпаком). Импортировать модули-лоадеры, для обработки каждого нужного файла (изначально вебпак ничего не умеет), и добавить их в конфиг. Если нужно, то добавить еще модули-плагины. И настроить dev сервер. Запускать вебпак через командную строку, или прописать в package.json новый скрипт, например такой:

И просто писать npm run dev для запуска.

Пример настройки лоадеров, с описанием, что делает каждый, взято с npm:

Большое спасибо за развёрнутый ответ. К сожалению, любая документация даётся с большим трудом, т.к. мне сложно визуально воспринимать техническую информацию в силу рядя причин. К тому же, с английским языком я не на «ты». Мне легче понять аудио информацию с живым примером. И как вариант — просто увидеть некое готовое решение : пример того, что нужно ввести в командную строку, чтобы добиться желаемого результата. Если не вдаваться в подробности, то это, конечно, сугубо моя проблема, но в данный момент легче задать вопрос, чем попытаться почитать документацию, в процессе прочтения которой, пропадёт всякое желание что-либо делать, утратится концентрация внимания и захочется спать )

Читайте также:  Установка вкладышей шатунных подшипников

Именно живой пример и живое объяснение простыми словами — понятно, в отличие от сухого языка документации.

Спасибо, буду разбирать ваш ответ

nakree
Я правильно понял, что в файле package.json описаны все зависимости проекта и если взять какой-то готовый package.json и в командной строке запустить npm i, то установятся все зависимости ?

Я взял package.json из другого проекта, в который устанавливал Vue, через npm init webpack-simple и здесь удалил лишнее (что связано со Vue и Babel :

Теперь после команды npm i всё это дело установится, правильно понимаю ? И вебпак и sass лоадер. Значит можно иметь один такой готовый package.json с нужными мне библиотеками, модулями и просто закидывать его в проект и устанавливать все ништяки ?

boga-net, да, так можно. Только желательно перед этим удалить папку node_modules, на всякий случай.
Чтобы заработало, еще нужно добавить этот плагин для создания сss файла и webpack-cli.

Если нужен готовый пример, то вот мой package.json, лишнее убрал:

nakree, Спасибо. Всё работает, кроме определения стилей. Всё это время пытался разобраться в вебпаке. Всё хорошо, но стили не определяются из файла scss. Всматриваляс десяток раз в код, всё сверял, пробовал разные варианты и стили работают только в теге style в index.html

В общем, решил забить на это дело до лучших времён )
Ещё раз спасибо

На всякий случай прилагаю код, чтобы показать, что всё сделал так же

источник

Установка SASS

В официальной документации содержатся разные инструменты и предложения по компиляции SASS файлов (мы будем рассматривать SCSS синтаксис). При этом какой инструмент предпочтительнее и четкой последовательности действий вы там к сожалению не найдете. Сейчас в мире веб-разработки наибольшее количество разрабочиков собирают свои проекты при помощи node.js и gulp. Почему так происходит?

Специальные приложения (prepros, koala, codeKit) можно использовать если вы начинающий разработчик, но как правило в приличных компаниях разработка осуществляется на сервере компании. Работать с ним вы будете через командную строку, и данные программы вы там физически запустить не сможете.

Если вы попробуете компилировать SASS файлы при помощи «ruby on rails», то столкнетесь с проблемами, если путь к компилируемым файлам содержит русские буквы. Ко всему прочему этот способ мягко говоря медленный. Как правило при верстки собираются не только стили, но и javaScript-файлы. На данный момент времени лучшего способа собрать JS чем «webpack» просто не существует. По нормальному связать «webpack» и «ruby on rails» у вас не получится.

Перед началом установки, я рекомендую вам установить какой-нибудь файловый менеджер. Я использую double commander. Могу сказать, что он бесплатный, кроссплатформенный, существует его портативная версия. С ним работать будет проще, но можно его и не устанавливать.

Итак, приступим к установки.

  1. 1. Для начала идем на официальный сайт node.js (Рис. 1) и скачиваем его дистрибутив. Качаем его LTS-версию, иначе некоторые плагины могут не запуститься. После того, как мы его уснановили, стоит проверить работает ли он. Для этого жмем «Win+r» (если у вас windows), в появившемся окне набираем «node» (Рис. 2), и жмем «Enter». Если все прошло успешно, то должно появиться вот такое окно (Рис. 3). Если вы начинающий разработчик, то можете использовать его как калькулятор, хотя node.js это полноценный сервер, не хуже чем «apache». Если же он не появился, то скорее всего у вас какие-то проблемы с правами. В операционных системах Windows Vista и Windows 7-8 нужно запускать инсталятор с правами администратора.
  2. 2. Дальше идем на мою страничку github и качаем мой пример, если вы не умеете пользоваться git-ом, то вы можете скачать его ZIP-архив (Рис. 4). После того как вы скачали данный пример, его нужно где-нибудь распоковать. Поскольку пример учебный, я его распакую на диске «C:\» (Рис. 5). Вам я советую сделать так-же, в последующем имеет смысл создать папку для проектов, к примеру «projects» и все ваши проекты класть туда.
  3. 3.

Теперь поставим сборщик проектов gulp, и некоторые плагины к нему. Я рекомендую вам посмотрить документацию по gulp.

Из документации следует, что сперва нам нужно установить «gulp-cli», а затем и сам «gulp». В моем примере нужно будет установить только «gulp-cli», сам сборщик проектов gulp, и все плагины для него установятся автоматически. Запустите «double commander» и перейдите в корень нашего проекта (в распакованный ранее архив из 2 пункта выше). Когда вы в него перейдете, то запустите в данном проекте терминал. Сделать это можно щелкнув на соответствующую иконку, она вторая слева (Рис. 6). Если вы не устанавливали «double commander», то запустите консоль и перейдите в наш проект. С «double commander» работать с консолью будет значительно проще (будет проще запускть консоль в нужном месте).

Дальше в консоли следует набрать «npm install —global gulp-cli», начнется процесс установки. Все будет зависеть от скорости интернета, но в среднем установка занимает не более 5 минут. После того как вы установите «gulp-cli» наберите в консоли команду «npm install», у вас запустится установка (Рис. 7). После установки вы должны увидеть что-то вроде этого (Рис. 8). В проекте появится папка «node_modules», в ней лежат плагины которые будут компилировать наши SASS файлы.

Могу вас поздравить установка завершена. Давайте проверим, что у нас получилось.

  1. 1. Перейдите в наш проект, запустите в нем консоль, и введите в консоли команду «gulp». У вас должно появиться вот такое вот окошечко (Рис. 9). Это окошко говорит о том, что у нас запустился локальный сервер по адресу «http://localhost:8080/» и скомпилировались наши стили.
  2. 2. В нашем проекте есть папка «scss», в ней лежит файл «main.scss». Он называется «сборочным-файлом» (еще я где-то читал он называется файлом-акселератором). В нем осуществляется подключение всех необходимых файлов. На выходе мы получим файл «main.css», который будет выводиться по следующему пути «public/css/main.css», так-же мы будем компилировать его сжатую версию по адресу «public/css/min/main.css». Наша сборка автоматически будет подставлять в выходном CSS «автопрефиксы», и будет группировать медиазапросы. То, что у нас отобразится в браузере будет лежать в папке «public». Я сделал простенький пример.
  3. 3. Итак перейдите по адресу http://localhost:8080/.
  4. 4. Откройте файл «_example.scss» из папки «scss» в каком-нибудь редакторе. Я советую вам пользоваться Visual Studio Code, sublime text, или atom. Тут как говорится выбирайте сами.
  5. 5. В данном файле у нас находится четыре переменных $mainFontSize , $mainBg , $padding , $margin . Переменная $mainFontSize служит для задания размера шрифта нашего документа. Переменная $mainBg служит для задания фона документа. Переменная $padding служит для задания внутренних отступов слева, и справа нашего документа. Переменная $margin служит для задания внешних отступов у абзацев нашей страницы. Впринципе это нужно нам для примера, поэтому усложнять не имеет смысла, суть будет ясна. Давайте попробуем поменять наши переменные.
  6. 6. Замените переменную $mainFontSize на 20px . Посмотрите как увеличился текст на странице, вместе с ним должны увеличиться и все отступы (Рис. 10).
  7. 7. Для #wrapper замените параметр #darken($mainBg, 30%) на #darken($mainBg, 80%) . Посмотрите как изменится текст документа (Рис. 11). Все изменения происходят в режиме реального времени. Нам не нужно перезагружать браузер. Впринципе компилятор мы настроили, дальше экспериментируйте с переменными сами.
  8. 8. А теперь давайте попробуем сломать наш проект. В файле » _example.scss » замените переменную $margin на $margins , мы должны увидеть следующее окошко Рис. 12. Оно нам говорит, что в строке 25 объявлена не используемая переменная. Очень важно уметь читать данные ошибки. Впринципе все, дальше попробуйте сами поменять переменные. Поломайте проект. Посмотрите, что будет.
  9. 9. Для того, чтобы прекратить сборку, щелкните мышкой на консоль, и нажмите «Ctrl»+»C». Дальше введите «Y».

Принцип работы

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

источник

WebComplex – самостоятельное создание сайтов

Все о самостоятельном создании сайта

Подключаем SASS к проекту

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

Создаем проект

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

Теперь в этом файле вы будете писать все стили для вашего сайта, а SASS все будет компилировать в стандартный формат.
В случае, если у вас нет проекта, то вам стоит создать новый, вот скрин структуры моего демо-проекта:

Создайте папку css внутри вашего проекта и в ней два пустых файла: style.scss и style.css.
После того как мы создали пустой проект со всеми необходимыми для работы файлами, мы можем подключать SASS.

Как подключить SASS к проекту?

1. Запускаем командную строку, зажав комбинацию клавиш Win+R, появится такое окошко:

в нем вводим команду cmd и жмем ОК.

Откроется командная строка:

Теперь нам необходимо перейти в папку вашего проекта в которой находятся файлы style.scss и style.css.
Вводим букву диска на котором находится ваш проект, моем случае – это Х и после буквы диска ставим двоеточие, жмем Enter.

Пишем команду cd и путь к к папке с файлами стилей, жмем Enter.

Команда cd – изменяет текущую папку (change directory)

Теперь мы можем сказать SASS отслеживать все изменения в файле style.scss и вносить их в файл style.css.
Для этого нужно написать следующую команду:
sass –watch style.scss:style.css

После того как вы ввели эту команду, на экране появится уведомление, что SASS отслеживает изменения. (как на картинки выше)

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

Как видим из примера на картинке выше, в SASS есть принцип наследование и не только он, а много другого о чем мы поговорим в следующих статьях 😉

источник

Подробная установка Sass/Scss

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

Если вы уже знакомы с Sass/Scss, установили его и готовы начать пользоваться им, то вы можете прочитать вот эту запись — «Основы Sass/Scss». В ней я описываю все тонкости препроцессора, а так же как правильно пользоваться им.

Что такое Sass?

Sass — это разновидность препроцессора, который поможет вам во время разработки front-end части. Факт в том, что CSS файлы становятся все больше и больше и через некоторое время с ними становится сложнее работать.

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

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

Как установить Sass?

Чтобы начать использовать Sass вам нужно скачать и установить Ruby с официального сайта, прописать одну команду в консоль (чтобы установить Sass) и все готово. Ниже весь процесс расписан поэтапно.

  1. Устанавливаем Ruby. Заходим на официальный сайт в раздел загрузки, выбираем билд (версию) Windows и скачиваем. Например, я использую Windows 7 (64 битовую), поэтому я буду скачивать Ruby 2.2.4 (x64).
  2. Следуйте всем указаниям установщика.
  3. После успешной установки Ruby откройте Windows консоль и пропишите gem install sass и после этого запустится процесс установки Sass. Если во время установки у вас выдает ошибку, то попробуйте поменять gem на sudo и в итоге у вас должна получиться вот такая строка sudo gem install sass .

Тестируем

После того как вы установили Sass, вам нужно убедиться, что вы сделали все правильно. Сделать это можно в два простых этапа.

  1. Откройте командную строку Windows
  2. Пропишите туда sass -v . Если вы все правильно установили, то у вас должно появиться что-то вроде такой строки Sass 3.4.19 (Selective Steve) .

PS. Если у вас ничего не выводиться, возможно вы не находитесь в правильной директории. Для начала вам нужно прописать cd и дальше путь до того места куда вы установили Ruby. В моем случае это будет вот так cd D:\Programs\Ruby22\bin\ . После того как вы попадете в эту директиву, вам нужно прописать sass -v . Если у вас все равно ничего не показывает, то повторите процесс установки с самого начала и после чего вернитесь снова сюда.

Применяем Sass в работе

Для начала давайте создадим простой файл, который будет называться style.scss и внутри мы напишем следующее:

Обратите внимание, что формат файла .scss, а не .css. Для .scss используется немного другой синтаксис, но он элементарный и вполне понятный с самого начала (если вы раньше когда-либо использовали css). А если вы читаете эту статья, я ожидаю, что вы уже знакомы с ним.

И так продолжим с style.css:

  1. Откройте Windows консоль, с помощью cd команды вам нужно переместиться в папку с Ruby, которая называется bin , (выше я уже описывал как это можно сделать)
  2. Внутри консоли пропишите sass —watch и далее перетащите файл style.scss в консоль и она автоматически вставить путь до style.scss файла и уже после нажмите Enter.
    В итоге должно получиться примерно так же как показано на скриншоте выше.

    PS.
    Конечно же у вас папки и путь могут различаться.
  3. После ввода команды из второго этапа, на экрана у вас должно появиться что-то похожее на это:

Это будет означать, что Sass скомпилировал SCSS файл, создал из него два других. Первый это style.css и второй — style.css.map. И теперь вы можете зайти в папку где лежит style.scss и проверить наличие этих файлов и если вы откроете style.css, то вы должны увидите следующее:

Как вы можете заметить, Sass взял все содержимое файла style.scss и сделал из него обычный CSS файл.

Так же обратите внимание, что в scss, все стили пишутся в древовидном виде (то есть класс внутри класса).

Конечно же SCSS намного удобнее.

Вот некоторые из плюсов SCSS:

  • Группирование стилей
  • Возможность быстро найти нужный класс/id
  • Использование одних и тех же стилей в нескольких местах

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

PS. Если у вас уже имеется скомпилированая версия CSS в той же папке где и style.scss, то он их перезапишет на более новую.

Важные моменты

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

Совет 1

Для того, чтобы создать CSS файл, изначально нужно создать SCSS файл в котором указывать стили для компиляции CSS.

Совет 2

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

источник

Добавить комментарий