The descriptions below are a brief overview of the topic. Go through the recommended resources to get in-depth explanations of Sass.
Introduction
A preprocessor is a program that processes its input data to produce output that is used as input to another program (Wikipedia).
A CSS preprocessor is a program that lets you generate CSS from the preprocessor’s own unique syntax. There are many CSS preprocessors to choose from, however most CSS preprocessors will add some features that don’t exist in pure CSS, such as mixin, nesting selector, variables, functions, inheritance selector, and so on.
Sass is the most mature, stable, and powerful professional-grade CSS extension language in the world. — sass-lang.com
What is a CSS Preprocessor (Sass)?
Sass (short for Syntactically Awesome Style Sheets) is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). … The newer syntax, “SCSS” (Sassy CSS), uses block formatting like that of CSS. It uses braces to denote code blocks and semicolons to separate rules within a block.
Sass is a stylesheet language that’s compiled to CSS. It allows you to use variables, nested rules, mixins, functions, mathematical operations, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects. It plugs the holes in CSS as a language, allowing you to write DRY code that’ll be faster, more efficient, and easier to maintain.
Why use Sass?
CSS can get unorganized, cluttered, etc.
Sass is clean, easy to organize, and very beautiful.
A “.scss” or “.scss” file is a preprocessed file that will later be converted to a “.css’” file your browser can understand
Smaller file sizes = optimized UX
Benefits of Sass
Time-saving
Very easy syntax to learn which will make you wonder why you didn’t use it earlier
Features like mixins, nesting selector, variables, functions, imports, etc.
If you know Sass, you can customize Bootstrap 510x more efficient workflow
It has a large community and is well documented
Sass can be written in two different methods or file extensions which are Scss (.scss) and Sass (.sass). The differences between these two methods are listed below.
What is the difference between Scss and Sass?
Scss (short for Sassy CSS) is the main syntax for Sass which builds on top of the existing CSS syntax, Scss is like vanilla CSS on steroids whereas Sass is itself a scripting language Its typing discipline is dynamic with a new syntax
Scss resembles more to CSS style and the use of curly braces and semicolons are mandatory which means no new syntax to learn (valid CSS == valid Scss whereas Sass has a loose syntax with white space and no curly braces and semicolons
Scss has no strict indentation whereas Sass follows strict indentation
Scss file extension is .scss whereas Sass file extension is .sass
Scss is more commonly used. If you’re not sure which to use, I suggest using Scss, which is what I’ll be using for the projects below. I used this because it is more compatible with CSS and I wouldn’t have to learn any new syntax. Then again, this is based on my own discretion, we can use any syntax we are most comfortable with.
I have completed 90 days in the 100 Days of Code Challenge. Below is a recap of everything I accomplished during this ninth chapter.
Projects
The majority of my coding for this chapter was for two main projects.
E-commerce Landing Page
For this project, I used a live Sass compiler which is an extension of Visual Studio Code (text editor) to precompile my scss file to a CSS file by clicking on the watch sass button at the bottom right corner of the text editor. We can use other methods for this as well, like gulp.
Side note: We must always link our HTML file to our CSS file, remember that the browser only reads the CSS file and not the sass/scss file. We should also make sure when writing/editing our code we are doing it all on the scss/sass file, not on the CSS file.
I started with the navbar, after which I gave the page background color, then I separated the two sections using flexbox and also using some of the sass features like nesting, variables, mixins, functions. You can check out this project on GitHub
Bank Landing Page
For this project, I used the same compiling method as the first project. I stored some variables, mixins and I also used some functions in this project. I started with the navbar, created a clip-path blue background, then separated both sections using flexbox. As you might expect, you can also find this project on GitHub
Recommended Resources
What’s Next?
My plans for the next chapter are:
Working on FreeCodeCamp Responsive Websites and building projects on them.
Continue learning JavaScript.
Conclusion
I am writing this post to help other beginners like myself understand this topic better. I hope you enjoyed this post and that reading it provided some useful information.
I have only been coding for a few months now, so there is still a lot for me to learn. I would love it if you could give me any feedback on my projects.
Also, if you know any other recommended resources not mentioned on the list and you want to share, please feel free to drop the link in the comment section.
To see my daily progress on the #100DaysofCode challenge, follow me on Twitter @lanre__waju
Top comments (0)