Convert the . SCSS into a . CSS (at the command line, run: "sass 1.scss:1.css")

Компьютер, программы

→

SCSS file (using the SASS compiler to get a CSS file)

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

посмотрели 5249 раз

обновлено: 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
What is an SCSS file?

Next topic →
Convert the . SCSS into a . CSS (at the command line, run: "npm run EvgenConvertCSS" . EvgenConvertCSS is a script that converts the 1.scss file to an 1.css file. The EvgenConvertCSS script is located in the package.json) | npm, node.js

Your feedback ... Comments ...

Объявления

• What is an SCSS file?

Option 1. Convert the . SCSS into a . CSS (the option is very simple)

• Convert the . SCSS into a . CSS (at the command line, run: "sass 1.scss:1.css") | node.js

Option 2. Convert the . SCSS into a . CSS (use package.json file)

• Convert the . SCSS into a . CSS (at the command line, run: "npm run EvgenConvertCSS" . EvgenConvertCSS is a script that converts the 1.scss file to an 1.css file. The EvgenConvertCSS script is located in the package.json) | npm, node.js