More Cons than Pros of using SASS on a new MVC website?

curiouswebster
curiouswebster used Ask the Experts™
on
Pros and more Cons of using SASS on a new MVC website?

I have not used SASS but hear it produces perfect CSS files. One downside is that everyone who needs to create classes must learn the SASS scripting language. Another may be that debugging time is much higher.

Are there, instead, good coding practices that all developers can follow, so they can avoid the negatives of using SASS and get some of the benefits of using standardized CSS?

(I am not sure if the MVC site will use the Razor View Engine, but does this change your opinion of using SASS?)

Thanks
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
First off, you can write standard CSS in your SASS files. For the most part, SASS is much the same as CSS.

It does however add in some programming style functionality to your CSS ( you can use functions / variables etc). You can also nest your CSS and create a modular CSS systems - create a SASS file for colours / one for layout / one for typography / one for forms elements etc, and compile them into a single, minified CSS fie. In theory, it actually makes handling your site's styles easier (you want to update your sites colour scheme - edit a single color variables file). Checkout the Source code for how BootStrap organises it's SASS files to see this in action.

It doesn't create perfect CSS in the same way that CSS doesn't create perfect CSS.

As for debugging, it shouldn't add any time to your site. If you set it up correctly and add in a watcher, when you change any of your SASS files, it can automatically recompile the CSS.

There is a slight learning curve, but fundamentally it's just CSS, so most CSS devs can adapt pretty quickly and easily.
curiouswebsterSoftware Engineer

Author

Commented:
What do you mean by Watcher?
Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
A watcher is a process that runs in the background and keeps on an eye on your files. You can, for example configure it to run a particular script when any .scss files change to recompile your SASS. You can config it to watch js files and concat and uglify them. Config it to watch your images folder to optimize them.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

curiouswebsterSoftware Engineer

Author

Commented:
that's a new word for me: uglify

do tell...

is the watcher to help notify other developers that something may have changed?
Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
haha. It's a great word :)

Basically, it means to minify (reduce the size) or your Javascript files. It removes all unnecessary whitespace and renames variables names to shorter ones. Once it's done, it's very difficult to read (hence the term uglify I guess). Usually, an uglified file has the min added to the filename, so your myscripts.js would normally become myscripts.min.js

A watcher isn't to tell other developers that files have changed - it's used to trigger an action (such as running a SASS compiler / JS Uglifier / CSS Minifier) automatically. It's kind of like an automated build tool.

Usually, you'd use a version control system (such as Git) to inform developers that files have changed and keep everyone in sync.
curiouswebsterSoftware Engineer

Author

Commented:
thank you.
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
No worries

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial