πŸ”§ Как Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΏΠΈΠ»ΡΡ†ΠΈΡŽ SCSS Π² VS Code πŸ–₯️

Для настройки компиляции SCSS Π² VS Code, Π²Π°ΠΌ понадобится ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ Live Sass Compiler. Π’ΠΎΡ‚ ΠΊΠ°ΠΊ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ:

  1. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ VS Code ΠΈ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π²ΠΎ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ Extensions (Π Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ).
  2. Π’Π²Π΅Π΄ΠΈΡ‚Π΅ "Live Sass Compiler" Π² ΠΏΠΎΠ»Π΅ поиска ΠΈ установитС Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½Π½ΠΎΠ΅ Ritwick Dey.
  3. ПослС установки Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ пСрСзапуститС VS Code.
  4. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Ρ„Π°ΠΉΠ» SCSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. НапримСр, style.scss.
  5. Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ„Π°ΠΉΠ»Π° SCSS ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΎΠΏΡ†ΠΈΡŽ "Compile Sass -> CSS" Π² контСкстном мСню.

ПослС этого Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ Live Sass Compiler автоматичСски скомпилируСт ваш Ρ„Π°ΠΉΠ» SCSS Π² CSS ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π΅Π³ΠΎ сохраняСтС. Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ компиляции Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π² Ρ‚ΠΎΠΉ ΠΆΠ΅ ΠΏΠ°ΠΏΠΊΠ΅ с ΠΈΠΌΠ΅Π½Π΅ΠΌ style.css.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€:
/* Π’Π°Ρˆ SCSS ΠΊΠΎΠ΄ */
$primary-color: #ff0000;

body {
  background-color: $primary-color;
}
/* Π‘ΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ CSS ΠΊΠΎΠ΄ */
body {
  background-color: #ff0000;
}

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡΠΏΠ΅ΡˆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΏΠΈΠ»ΡΡ†ΠΈΡŽ SCSS Π² VS Code с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ Live Sass Compiler. Π£Π΄Π°Ρ‡ΠΈ Π² Ρ€Π°Π±ΠΎΡ‚Π΅!

Π”Π΅Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΎΡ‚Π²Π΅Ρ‚

Как Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΏΠΈΠ»ΡΡ†ΠΈΡŽ SCSS Π² VS Code

ΠšΠΎΠΌΠΏΠΈΠ»ΡΡ†ΠΈΡ SCSS (Sassy CSS) – это процСсс прСобразования Ρ„Π°ΠΉΠ»ΠΎΠ² SCSS Π² ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Π΅ CSS-Ρ„Π°ΠΉΠ»Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡŽΡ‚ ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ Π½Π° Π²Π΅Π±-страницС. Π­Ρ‚ΠΎ Π²Π°ΠΆΠ½Ρ‹ΠΉ шаг Π² Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ SCSS ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Π±ΠΎΠ»Π΅Π΅ Π³ΠΈΠ±ΠΊΠΎΠ΅ ΠΈ ΠΌΠΎΡ‰Π½ΠΎΠ΅ синтаксис, Ρ‡Π΅ΠΌ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Π΅ CSS-Ρ„Π°ΠΉΠ»Ρ‹.

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ рассмотрим, ΠΊΠ°ΠΊ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΏΠΈΠ»ΡΡ†ΠΈΡŽ SCSS Π² Visual Studio Code (VS Code), ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· популярных ΠΈΠ½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… срСд Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ (IDE) для Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ.

Π¨Π°Π³ 1: Установка Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ Live Sass Compiler

ΠŸΠ΅Ρ€Π²Ρ‹ΠΌ шагом являСтся установка Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ Live Sass Compiler для VS Code. Π­Ρ‚ΠΎ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ позволяСт нСпосрСдствСнно ΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ SCSS-Ρ„Π°ΠΉΠ»Ρ‹ Π² CSS Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ ΠΏΡ€ΠΈ сохранСнии ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ. Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ это Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅, слСдуйтС этим инструкциям:

  1. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ VS Code.
  2. НаТмитС Π½Π° Π·Π½Π°Ρ‡ΠΎΠΊ "Extensions" (Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ) Π² Π»Π΅Π²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈΠ»ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Ctrl+Shift+X.
  3. Π’Π²Π΅Π΄ΠΈΡ‚Π΅ "Live Sass Compiler" Π² ΠΏΠΎΠ»Π΅ поиска.
  4. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ "Live Sass Compiler" ΠΎΡ‚ Π°Π²Ρ‚ΠΎΡ€Π° "Ritwick Dey".
  5. НаТмитС ΠΊΠ½ΠΎΠΏΠΊΡƒ "Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ".

Π¨Π°Π³ 2: ΠšΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΡ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ Live Sass Compiler

ПослС установки Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ Live Sass Compiler Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π΅Π³ΠΎ для компиляции Π²Π°ΡˆΠΈΡ… SCSS-Ρ„Π°ΠΉΠ»ΠΎΠ². Π§Ρ‚ΠΎΠ±Ρ‹ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ дСйствия:

  1. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Ρ„Π°ΠΉΠ» настроСк VS Code (settings.json) Ρ‡Π΅Ρ€Π΅Π· ΠΏΡƒΠ½ΠΊΡ‚ мСню "File" (Π€Π°ΠΉΠ») - "Preferences" (Настройки) - "Settings" (Настройки) ΠΈΠ»ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Ctrl+,.
  2. Π’Π²Π΅Π΄ΠΈΡ‚Π΅ "Live Sass Compiler" Π² ΠΏΠΎΠ»Π΅ поиска, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΠΉΡ‚ΠΈ настройки Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ.
  3. Π’ Ρ€Π°Π·Π΄Π΅Π»Π΅ "Live Sass Compile: Settings" (Настройки Live Sass Compiler) Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠΈΠΊΠΎΠ½ΠΊΡƒ "Edit in settings.json" (Π Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π² settings.json).

ΠžΡ‚ΠΊΡ€ΠΎΠ΅Ρ‚ΡΡ Ρ„Π°ΠΉΠ» "settings.json", Π³Π΄Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΏΠΈΠ»ΡΡ†ΠΈΡŽ SCSS. Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ настроСк:

{
  "liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "/css"
    }
  ],
  "liveSassCompile.settings.generateMap": false
}

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅:

  • "formats" ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π½Π° Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ SCSS-Ρ„Π°ΠΉΠ»Ρ‹. Π’ Π΄Π°Π½Π½ΠΎΠΌ случаС, SCSS-Ρ„Π°ΠΉΠ»Ρ‹ Π±ΡƒΠ΄ΡƒΡ‚ ΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π² CSS с Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ΠΌ ".css" ΠΈ ΡΠΎΡ…Ρ€Π°Π½ΡΡ‚ΡŒΡΡ Π² ΠΏΠ°ΠΏΠΊΡƒ "/css".
  • "generateMap" ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Π½ΡƒΠΆΠ½ΠΎ Π»ΠΈ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚Ρ‹ источников (source maps) для SCSS-Ρ„Π°ΠΉΠ»ΠΎΠ². Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ SCSS-Ρ„Π°ΠΉΠ»Ρ‹ Π±Ρ‹Π»ΠΈ связаны с Ρ„Π°ΠΉΠ»Π°ΠΌΠΈ исходного ΠΊΠΎΠ΄Π° Π² инструмСнтах Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, установитС это Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π² "true". Π’ ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС, установитС Π² "false".

Π¨Π°Π³ 3: ΠšΠΎΠΌΠΏΠΈΠ»ΡΡ†ΠΈΡ SCSS-Ρ„Π°ΠΉΠ»ΠΎΠ²

Π’Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ установили ΠΈ настроили Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ Live Sass Compiler, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°Ρ‡Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ свои SCSS-Ρ„Π°ΠΉΠ»Ρ‹. Для этого Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ дСйствия:

  1. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Ρ„Π°ΠΉΠ» SCSS Π² VS Code.
  2. Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ» SCSS (Ctrl+S).
  3. Π Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ Live Sass Compiler автоматичСски ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΡ‚ измСнСния Π² Ρ„Π°ΠΉΠ»Π΅ SCSS ΠΈ скомпилируСт Π΅Π³ΠΎ Π² CSS.

Π‘ΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ CSS-Ρ„Π°ΠΉΠ» Π±ΡƒΠ΄Π΅Ρ‚ создан Π² соотвСтствии с настройками, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΡƒΠΊΠ°Π·Π°Π»ΠΈ Π² Ρ„Π°ΠΉΠ»Π΅ настроСк.

Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ рассмотрСли, ΠΊΠ°ΠΊ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΏΠΈΠ»ΡΡ†ΠΈΡŽ SCSS Π² VS Code с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ Live Sass Compiler. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ свои Π²Π΅Π±-прилоТСния, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΌΠΎΡ‰Π½Ρ‹ΠΉ ΠΈ Π³ΠΈΠ±ΠΊΠΈΠΉ синтаксис SCSS.

Π’ΠΈΠ΄Π΅ΠΎ ΠΏΠΎ Ρ‚Π΅ΠΌΠ΅

SASS SCSS компиляция Π² VS Code. Плагин Live Sass Compiler

Настройка SASS(SCSS) компилятора Π² VS CODE

Как ΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ SASS Π² VS Code с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Live Sass Compiler

ΠŸΠΎΡ…ΠΎΠΆΠΈΠ΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ:

Как ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠΈΡ‚ Π² git: ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Π΅ совСты ΠΈ сСкрСты

πŸ”§ Как Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΏΠΈΠ»ΡΡ†ΠΈΡŽ SCSS Π² VS Code πŸ–₯️

πŸ”₯ Π§Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ ΠΊΠΎΠΌΠ°Π½Π΄Π° git rm? ΠŸΠΎΠ½ΡΡ‚Π½ΠΎΠ΅ руководство для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ…!

🌿 Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π²Π΅Ρ‚ΠΊΡƒ Π² Git с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ PyCharm? ВсС просто!