Конвертируем файл .SCSS в файл .CSS (в командной строке выполним: "sass 1.scss:1.css")

Programming, development, testing

→

SCSS файл (с помощью компилятора SASS получаем CSS файл)

→

Конвертируем файл .SCSS в файл .CSS (в командной строке выполним: "sass 1.scss:1.css") | node.js

Looked at 4143 times

Конвертируем файл .SCSS в файл .CSS (в командной строке выполним: "sass 1.scss:1.css") | node.js

last updated: 17 June 2020

Я буду использовать Node.js
So if you have not installed Node.js, then install Node.js ...

Шаг 1. В командной строке выполним: npm install -g sass . Эта команда проинсталирует в windows системе sass конвертер

Эта команда выполняется один раз за все время существования системы Windows на своем компьютере.

npm install -g sass

Шаг 2. Создадим файл 1.scss на диске d:/

Файл 1.scss

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
font: 100% $font-stack;
color: $primary-color;
}

Шаг 3. Находясь в директории D:/ в командной строке выполним: sass 1.scss:1.css . Эта команда конвертирует файл 1.scss в файл 1.css

Command Prompt (Win Console)

sass 1.scss:1.css

Примеры конвертаций: конвертация файла, всех файлов в директории, автоматическая конвертация при изменении .scss файла (опция --watch)

Исходный файл .scss

выполним в командной строке

результат

Файл D:/1.scss

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
font: 100% $font-stack;
color: $primary-color;
}

Конвертация одного файла

Command Prompt (Win Console)

sass 1.scss:1.css

Объяснение: после выполнения этой команды
• создастся файл 1.css (конвертация из файла 1.scss)
• создастся файл 1.css.map (не знаю зачем это файл нужен)

Создадутся файлы:

Файл D:/1.css

body {
font: 100% Helvetica, sans-serif;
color: #333;
}

/*# sourceMappingURL=1.css.map */

Файл D:/1.css.map

{"version":3,"sourceRoot":"","sources":["1.scss"],"names":[],"mappings":"AAGA;EACK;EACA,OAJW","file":"1.css"}

Файл D:/1.scss

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
font: 100% $font-stack;
color: $primary-color;
}

Конвертация одного файла

Command Prompt (Win Console)

sass --no-source-map 1.scss:1.css

Объяснение: после выполнения этой команды
• создастся файл 1.css (конвертация из файла 1.scss)

опция --no-source-map не создает .map файл

Файл D:/1.css

body {
font: 100% Helvetica, sans-serif;
color: #333;
}

Файл D:/src/files_scss/hello.scss

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
font: 100% $font-stack;
color: $primary-color;
}

Конвертация всех файлов в директории

Command Prompt (Win Console)

sass --no-source-map
src/files_scss/:dest/files_css/

Объяснение: после выполнения этой команды
• все файлы .scss в директории src/files_scss
конвертируются
в файлы .css в директорий dest/files_css/

опция --no-source-map не создает .map файл

Файл D:/dest/files_css/hello.css

body {
font: 100% Helvetica, sans-serif;
color: #333;
}

Файл D:/src/files_scss/hello.scss

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
font: 100% $font-stack;
color: $primary-color;
}

Находимся в ожидании при этом происходит автоматическая конвертация .scss файла как только он поменялся

Command Prompt (Win Console)

sass --no-source-map --watch
src/files_scss/:dest/files_css/

Объяснение: после выполнения этой команды
• любой файл .scss в директории src/files_scss
который поменялся конвертируются
в файл .css в директорий dest/files_css/

опция --watch режим ожидания (отслеживает изменение файла)
опция --no-source-map не создает .map файл

Файл D:/dest/files_css/hello.css

body {
font: 100% Helvetica, sans-serif;
color: #333;
}

← Previous topic
Что такое SCSS файл ?

Next topic →
Конвертируем файл .SCSS в файл .CSS (в командной строке выполним: "npm run EvgenConvertCSS" . EvgenConvertCSS это скрипт конвертирует файл 1.scss в файл 1.css. Скрипт EvgenConvertCSS находится в файле package.json) | npm, node.js

Your feedback ... Comments ...

Экскурсии по Москве: пешеходные, автобусные и речные прогулки на любой вкус

Объявления

• Что такое SCSS файл ?

Вариант 1. Конвертируем файл .SCSS в файл .CSS (вариант очень простой)

• Конвертируем файл .SCSS в файл .CSS (в командной строке выполним: "sass 1.scss:1.css") | node.js

Вариант 2. Конвертируем файл .SCSS в файл .CSS (используем файл package.json)

• Конвертируем файл .SCSS в файл .CSS (в командной строке выполним: "npm run EvgenConvertCSS" . EvgenConvertCSS это скрипт конвертирует файл 1.scss в файл 1.css. Скрипт EvgenConvertCSS находится в файле package.json) | npm, node.js