Hi there,
I have doubts or lack of clarity regarding the usage of sass,
.css or .scssSASS is typically in scss files, not css files (don’t know if that’s required or not though)
That’s correct, the browser can’t handle SASS files. You need to compile them yourself and deploy the generated css file.
See the answer to #2. You’re deploying the css file, not the SASS (.scss) file.
SASS is a development tool, not a deployed tool to your website. But a warning - if you don’t have the basics of css down, be very wary of using SASS. The more complex you work with in the beginning, the bigger mess you’re going to make for maintenance down the road.
So sass is an optimized and pretty way of writing CSS to avoid repetition, but during deployment, it needs to be pure css in .css extension? And during its deployment after conversion its conciseness, optimiation is lost?
A browser only understands CSS. It doesn’t know anything about SASS.
SASS is something you use to make life easier to write CSS. It allows for things like loops and variables and grouping (and other things) that can make life simpler for the developer. However once you have written your SASS it then gets compiled into CSS which is what you deploy on the server.
There are tools to help with this and to keep track as you never edit the css files but maintain the sass files instead. I must admit even though I have used SASS i;m not that keen on it but I see how ir can be useful. @RyanReese uses preprocessors all the time and swears by them so would be better at answering this question. 
You can play around with SASS in codepen by just selecting from the css panel. here’s an example in codepen where I used SASS (and haml) as I had to add 100 different values to a demo.
If you click the little arrow in the CSS panel you can view the compiled CSS that the browser actually uses.
I use SASS as I find it easier to use because you don’t have a lot of repetitive typing, plus using partials you don’t have to hunt for the CSS that you are working on.
It should also be noted that many of the things that people originally used Sass for, are finding their way into regular CSS. For example:
Over on SitePoint’s blog, we’ll be publishing an article on this some time in the next few weeks.
Thanks.
Are you asking about the generated CSS?
E.g. if I use a loop in sass, it can be a couple lines. When your compiler converts this to SCSS, it converts the looped code gets converted to regular CSS. Look at Pauls example - that generated CSS will be far greater than the condensed SCSS. The generated output file will be ugly - but who cares? You aren’t working in the generated CSS file, but rather the SCSS file. You could also minify it to reduce the file size a bit if you want.
The goal is SASS is to work within these files, and not the generated CSS file.
It’s not about being optimized or pretty, but rather it gives you access to features not available in CSS. The generic examples include SASS variables (CSS variables is now a thing because of SASS variables). Loops, if/else, etc. I’ve always said, that a small project won’t get much benefit from SASS. If I had a way to start a brand new site with a SASS template to start with, then that’d be great. If I had to set up SASS from scratch to do a small site, then I’d probably skip it and code straight CSS.
Probably the most important thing to understand is what Dave said here. Your code can get quite sloppy in SASS.
We use SCSS at work and I can’t imagine doing the work my company does without SASS. It allows great flexibility and customization. I was against SASS in general, a long time ago. The more I worked with SASS and saw how it can be deployed in larger projects, and the flexibility it offered, I changed my mind. It 100% saves time if you use SASS in the right situations.
(SCSS is the most recent “SASS” version and has the .scss extension. Actual “SASS” has a .sass extension but most people just use SCSS.)
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.