Upgrade SASS / SCSS to Use Latest CSS | Fix SASS / SCSS Compiler
10.3 هزار بار بازدید -
2 سال پیش
-
If your live sass compiler
If your live sass compiler not working in vscode, or you want to use latest SASS/SCSS and CSS properties, it is time to upgrade SASS/SCSS and here is how. Do you work with SASS or SCSS in your projects? It is time to upgrade or you will have broken CSS in your project. Web browser can not read SCSS. It can read CSS file. We have to compile SCSS code into CSS code before serving it to web browser. In VSCode we use extension that watches SCSS file and converts SCSS code in CSS code. And here lies the problem. I have a buttons partial file in project that I am importing in main SCSS file using import SASS rule. Hit watch Sass link from bottom of VSCode to auto compile SCSS to CSS code. It will work. How about using use rule instead of import in SCSS? The use rule is new and is the replacement for import rule which allows other stylesheets to use its variables, functions, and mixins.
SASS Compiler may not do anything if you use this new SASS rule. It may throw use at rule in CSS without compiling it into CSS code. It will not be usable in CSS. SASS Compiler failed. Live SASS compiler did not work. Also min function for CSS may not work. This property may throw compile error via live sass compiler. Go to extensions and see Live Sass Compiler extension. I am using 'Live Sass Compiler' extension to watch and compile SCSS code to CSS code. It is most popular VSCode extension to watch and convert SCSS into CSS. It has more than 2 million downloads and good ratings. But if we go look at it change log. This extension has not been updated from quite some time. It will not work with new SCSS and CSS properties, methods and functions. So we will disable this extension.
Search for Live SASS Compiler again from visual studio code. Install other extension with same name by Glen Marks. View change log for this extension. This extension is upgrade to older extension that we were using. It has latest features so it will work for latest CSS and SASS / SCSS. Now our code was compiled successfully. I have previously shared SASS / SCSS related tutorials. We should use this latest extension for SASS / SCSS to avoid CSS issues. Always check if important extensions are up-to-date for your code editor. We will be using this new 'Live SASS Compiler' extension in our coming tutorials.
More SASS / SCSS Videos:
- SCSS to CSS & Minify Hidden Settings | Missing Piece
SCSS to CSS & Minify Hidden Settings ...
- Auto Compile SCSS to CSS & Minify | Old Browsers Compatibility
Auto Compile SCSS to CSS & Minify | O...
Thank You!
👍 LIKE VIDEO
👊 SUBSCRIBE
🔔 PRESS BELL ICON
✍️ COMMENT
Channel: webstylepress
Website: https://www.webstylepress.com
FaceBook: Facebook: webstylepress
Twitter: Twitter: webstylepress
GitHub: https://github.com/webstylepress
#css #sass #scss #compiler #LiveSASSCompiler #WatchSASS #WebStylePress #extension #vscode #webdevelopment
SASS Compiler may not do anything if you use this new SASS rule. It may throw use at rule in CSS without compiling it into CSS code. It will not be usable in CSS. SASS Compiler failed. Live SASS compiler did not work. Also min function for CSS may not work. This property may throw compile error via live sass compiler. Go to extensions and see Live Sass Compiler extension. I am using 'Live Sass Compiler' extension to watch and compile SCSS code to CSS code. It is most popular VSCode extension to watch and convert SCSS into CSS. It has more than 2 million downloads and good ratings. But if we go look at it change log. This extension has not been updated from quite some time. It will not work with new SCSS and CSS properties, methods and functions. So we will disable this extension.
Search for Live SASS Compiler again from visual studio code. Install other extension with same name by Glen Marks. View change log for this extension. This extension is upgrade to older extension that we were using. It has latest features so it will work for latest CSS and SASS / SCSS. Now our code was compiled successfully. I have previously shared SASS / SCSS related tutorials. We should use this latest extension for SASS / SCSS to avoid CSS issues. Always check if important extensions are up-to-date for your code editor. We will be using this new 'Live SASS Compiler' extension in our coming tutorials.
More SASS / SCSS Videos:
- SCSS to CSS & Minify Hidden Settings | Missing Piece
SCSS to CSS & Minify Hidden Settings ...
- Auto Compile SCSS to CSS & Minify | Old Browsers Compatibility
Auto Compile SCSS to CSS & Minify | O...
Thank You!
👍 LIKE VIDEO
👊 SUBSCRIBE
🔔 PRESS BELL ICON
✍️ COMMENT
Channel: webstylepress
Website: https://www.webstylepress.com
FaceBook: Facebook: webstylepress
Twitter: Twitter: webstylepress
GitHub: https://github.com/webstylepress
#css #sass #scss #compiler #LiveSASSCompiler #WatchSASS #WebStylePress #extension #vscode #webdevelopment
2 سال پیش
در تاریخ 1401/01/06 منتشر شده
است.
10,326
بـار بازدید شده