🤩 New Cool Developer Tools for you. Explore →
FREE JavaScript Video Series Start Learning →
FLAT 75% OFF All Interactive courses at flat ₹250 / $3.25 only. HURRRRRY!! Explore now
  Signup/Sign In
Tests
MCQs to test your knowledge.
Forum
Engage with the community.
Compilers
Compilers to execute code in browser.
SASS/SCSS logo
SASS/SCSS logo

SASS/SCSS Tutorial

LAST UPDATED: SEPTEMBER 16, 2024

SASS (Syntactically Awesome Style Sheets) is a powerful, extended version of CSS (Cascading Style Sheets) that enhances its capabilities by introducing features such as variables, nesting, mixins, inheritance, and more. SASS helps developers write more maintainable and modular CSS, making it easier to handle large-scale projects. Essentially, SASS is a preprocessor that compiles its code into standard CSS, meaning web browsers don’t directly interpret SASS code but instead the resulting CSS files.

There are two syntaxes of SASS i.e SCSS and SASS with two different file extensions ".scss" and ".sass".

Learn CSS first, using our Free CSS Course, where you learn CSS by writing code.

Importance of SASS

CSS is essential for styling web pages, but it can become difficult to manage as websites grow in complexity. SASS adds advanced features that make CSS more flexible and maintainable. It allows developers to reuse styles, reduce redundancy, and implement logic-based CSS, which isn’t possible with vanilla CSS. This makes SASS popular among developers working on modern web applications.

Tutorials List
Related Tutorials
JavaScript
CSS
CSS References

How SASS Works

SASS is written in its own syntax and then compiled into regular CSS using a SASS compiler. This compilation process ensures that any modern web browser can understand the final output. There are two syntaxes for writing SASS:

  1. SASS (Indented Syntax): This is the original syntax that omits semicolons and curly braces, relying on indentation to define code blocks. The file extension is .sass.

  2. SCSS (Sassy CSS): This syntax is more like traditional CSS, where curly braces and semicolons are used. It’s easier to transition from standard CSS to SCSS, and the file extension is .scss.

How to Run SASS

To run SASS, you’ll need a SASS compiler. There are various ways to compile SASS into CSS:

  1. Using Command Line: You can install SASS globally using Node.js by running npm install -g sass. Once installed, you can compile your .scss files into CSS by running a command like this:

    sass input.scss output.css

  2. Using Task Runners: Tools like Gulp or Grunt can automate the SASS compilation process as part of your project’s build process.

  3. Integrating with Code Editors: Some IDEs and code editors like Visual Studio Code, Sublime Text, and WebStorm offer plugins that automatically compile SASS when you save a file.

  4. Online SASS Compilers: There are also online tools where you can paste SASS code and get the compiled CSS in real time.

Versions of SASS

SASS has evolved over the years, with each version adding new features and improvements:

  • SASS 1.x: The early versions introduced basic functionalities like variables and mixins.

  • SASS 2.x: Added more advanced features like imports, nested rules, and partials.

  • SASS 3.x: Introduced the more CSS-like syntax called SCSS, making it easier for developers transitioning from plain CSS.

  • SASS 4.x: (Current version) Continues to build on the previous versions with enhancements to features like color functions, modularity, and better error handling.