π§ ΠΠ°ΠΊ Π½Π°ΡΡΡΠΎΠΈΡΡ ΠΊΠΎΠΌΠΏΠΈΠ»ΡΡΠΈΡ SCSS Π² VS Code π₯οΈ
ΠΠ»Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΠΊΠΎΠΌΠΏΠΈΠ»ΡΡΠΈΠΈ SCSS Π² VS Code, Π²Π°ΠΌ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ Live Sass Compiler. ΠΠΎΡ ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ:
- ΠΡΠΊΡΠΎΠΉΡΠ΅ VS Code ΠΈ ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π²ΠΎ Π²ΠΊΠ»Π°Π΄ΠΊΡ Extensions (Π Π°ΡΡΠΈΡΠ΅Π½ΠΈΡ).
- ΠΠ²Π΅Π΄ΠΈΡΠ΅ "Live Sass Compiler" Π² ΠΏΠΎΠ»Π΅ ΠΏΠΎΠΈΡΠΊΠ° ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅, ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½Π½ΠΎΠ΅ Ritwick Dey.
- ΠΠΎΡΠ»Π΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΡ ΠΏΠ΅ΡΠ΅Π·Π°ΠΏΡΡΡΠΈΡΠ΅ VS Code.
- ΠΡΠΊΡΠΎΠΉΡΠ΅ ΡΠ°ΠΉΠ» SCSS, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡΠΎΠ²Π°ΡΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, style.scss.
- Π©Π΅Π»ΠΊΠ½ΠΈΡΠ΅ ΠΏΡΠ°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡΡΠΈ Π²Π½ΡΡΡΠΈ ΡΠ°ΠΉΠ»Π° 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 Π² ΡΠ΅ΠΆΠΈΠΌΠ΅ ΡΠ΅Π°Π»ΡΠ½ΠΎΠ³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ ΠΏΡΠΈ ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ. Π§ΡΠΎΠ±Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΡΠΎ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅, ΡΠ»Π΅Π΄ΡΠΉΡΠ΅ ΡΡΠΈΠΌ ΠΈΠ½ΡΡΡΡΠΊΡΠΈΡΠΌ:
- ΠΡΠΊΡΠΎΠΉΡΠ΅ VS Code.
- ΠΠ°ΠΆΠΌΠΈΡΠ΅ Π½Π° Π·Π½Π°ΡΠΎΠΊ "Extensions" (ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΡ) Π² Π»Π΅Π²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈΠ»ΠΈ Π½Π°ΠΆΠΌΠΈΡΠ΅ Ctrl+Shift+X.
- ΠΠ²Π΅Π΄ΠΈΡΠ΅ "Live Sass Compiler" Π² ΠΏΠΎΠ»Π΅ ΠΏΠΎΠΈΡΠΊΠ°.
- ΠΡΠ±Π΅ΡΠΈΡΠ΅ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ "Live Sass Compiler" ΠΎΡ Π°Π²ΡΠΎΡΠ° "Ritwick Dey".
- ΠΠ°ΠΆΠΌΠΈΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ "Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ".
Π¨Π°Π³ 2: ΠΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΡ Live Sass Compiler
ΠΠΎΡΠ»Π΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΡ Live Sass Compiler Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ Π΅Π³ΠΎ Π΄Π»Ρ ΠΊΠΎΠΌΠΏΠΈΠ»ΡΡΠΈΠΈ Π²Π°ΡΠΈΡ SCSS-ΡΠ°ΠΉΠ»ΠΎΠ². Π§ΡΠΎΠ±Ρ ΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ, Π²ΡΠΏΠΎΠ»Π½ΠΈΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ:
- ΠΡΠΊΡΠΎΠΉΡΠ΅ ΡΠ°ΠΉΠ» Π½Π°ΡΡΡΠΎΠ΅ΠΊ VS Code (settings.json) ΡΠ΅ΡΠ΅Π· ΠΏΡΠ½ΠΊΡ ΠΌΠ΅Π½Ρ "File" (Π€Π°ΠΉΠ») - "Preferences" (ΠΠ°ΡΡΡΠΎΠΉΠΊΠΈ) - "Settings" (ΠΠ°ΡΡΡΠΎΠΉΠΊΠΈ) ΠΈΠ»ΠΈ Π½Π°ΠΆΠΌΠΈΡΠ΅ Ctrl+,.
- ΠΠ²Π΅Π΄ΠΈΡΠ΅ "Live Sass Compiler" Π² ΠΏΠΎΠ»Π΅ ΠΏΠΎΠΈΡΠΊΠ°, ΡΡΠΎΠ±Ρ Π½Π°ΠΉΡΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΡ.
- Π ΡΠ°Π·Π΄Π΅Π»Π΅ "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-ΡΠ°ΠΉΠ»Ρ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ:
- ΠΡΠΊΡΠΎΠΉΡΠ΅ ΡΠ°ΠΉΠ» SCSS Π² VS Code.
- Π‘ΠΎΡ ΡΠ°Π½ΠΈΡΠ΅ ΡΠ°ΠΉΠ» SCSS (Ctrl+S).
- Π Π°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ Live Sass Compiler Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² ΡΠ°ΠΉΠ»Π΅ SCSS ΠΈ ΡΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡΡΠ΅Ρ Π΅Π³ΠΎ Π² CSS.
Π‘ΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ CSS-ΡΠ°ΠΉΠ» Π±ΡΠ΄Π΅Ρ ΡΠΎΠ·Π΄Π°Π½ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠ°ΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΡΠΊΠ°Π·Π°Π»ΠΈ Π² ΡΠ°ΠΉΠ»Π΅ Π½Π°ΡΡΡΠΎΠ΅ΠΊ.
ΠΠ°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π»ΠΈ, ΠΊΠ°ΠΊ Π½Π°ΡΡΡΠΎΠΈΡΡ ΠΊΠΎΠΌΠΏΠΈΠ»ΡΡΠΈΡ SCSS Π² VS Code Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΡ Live Sass Compiler. Π’Π΅ΠΏΠ΅ΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ°Π·ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ ΡΠ²ΠΎΠΈ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΌΠΎΡΠ½ΡΠΉ ΠΈ Π³ΠΈΠ±ΠΊΠΈΠΉ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ SCSS.