Upgrade SASS / SCSS to Use Latest CSS | Fix SASS / SCSS Compiler

Upgrade SASS / SCSS to Use Latest CSS | Fix SASS / SCSS Compiler

Upgrade SASS / SCSS to Use Latest CSS | Fix SASS / SCSS 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 \u0026 Minify Hidden Settings | Missing Piece
   • SCSS to CSS \u0026 Minify Hidden Settings …  
- Auto Compile SCSS to CSS \u0026 Minify | Old Browsers Compatibility
   • Auto Compile SCSS to CSS \u0026 Minify | O…  

Thank You!
👍 LIKE VIDEO
👊 SUBSCRIBE
🔔 PRESS BELL ICON
✍️ COMMENT

Channel:    / webstylepress  
Website: https://www.webstylepress.com
FaceBook:   / webstylepress  
Twitter:   / webstylepress  
GitHub: https://github.com/webstylepress
#css #sass #scss #compiler #LiveSASSCompiler #WatchSASS #WebStylePress #extension #vscode #webdevelopment


Content

0.72 -> welcome to web style press do you work with sass  or scss in your projects it is time to upgrade or  
7.12 -> you will have broken css in your project web  browser cannot read as css or says it can  
15.04 -> read css file only in case of styles we have to  compile scss code into css code before serving  
24.16 -> it to web browser in vs code we use extensions  that watch sas files or scss files and convert  
32.48 -> scss code into css code and here lies the problem  we've got custom.scss file and we've got the  
41.2 -> partial buttons.scss and this is our custom.css  file here will be output for this custom dot  
50.24 -> scss file let's import this buttons.scss file in  our main scss file by using import rule click this  
63.04 -> watch sass button now the sass file is  being watched save and here is the output
76.72 -> it worked how about use instead of import
83.92 -> save and here is the output it is use rule  as is this output should have been here  
94.88 -> the used role is new and is the replacement for  import rule which allows other style sheets to  
102.08 -> use its variables functions and mixins in case  of use rule compiler didn't do anything it just  
110.56 -> through use role in css and we all know that it  will not be usable in css so compiler failed also  
122.08 -> here is another css code save  
125.76 -> and we have got the error incompatible units  ram and percent that is because we used this min
137.92 -> let's go to extensions search for live sass  compiler i am using this light size compiler  
145.92 -> it is most popular vs code extension to watch  and convert scss into css it has got 2 million  
153.2 -> plus downloads and good rating but if we go  and look at change log for this extension
162.4 -> last update date for this extension was 11  7 2018 this extension has not been updated  
171.36 -> from quite some time it will not work  with the new scss properties and methods  
177.44 -> so we will disable this extension
181.44 -> reload
185.44 -> search for live sass compiler again
190.16 -> and this is live size compiler but by glenn marks
196 -> we have got this old live size compiler and  this new live size compiler by glenn marks  
203.6 -> we will enable this extension let's go see its  
206.96 -> change log this extension was  updated recently so it is updated
217.36 -> this extension is upgrade to older extension  that we were using it has latest features so  
224.24 -> it will work so let's go to our sass file click  watch says save the file and this time code was  
235.2 -> compiled successfully partial was compiled and  this property was compiled without any compiler  
242.64 -> errors i have previously shared sass / scss  related tutorials i will link those in description  
250.24 -> we should use this latest extension  for sass / scss to avoid css issue  
256.56 -> live says compiler by glenn marks make sure  you check the update date in change log area  
264.96 -> so always check if important  extensions are up to date  
268.96 -> for your core editor we will be using this  new live sass compiler extension from now on  
276.24 -> okay i hope it helped like here subscribe  and i will see you in the next video

Source: https://www.youtube.com/watch?v=Ld1zK-n2DGU