Understanding Sass: A Beginner's Guide

What is SASS

Sass (short for "Syntactically Awesome Style Sheets") is a CSS preprocessor, which is a scripting language that extends CSS and provides more advanced features that are not available in plain CSS. Sass allows developers to write CSS more efficiently and with more organization by adding variables, nesting, mixins, functions, and other programming concepts to CSS syntax.

Using Sass, developers can write stylesheets with less repetition and greater modularity, making it easier to maintain and update large projects. Sass also provides a way to write more complex CSS logic, such as conditional statements and loops, which can help automate the generation of CSS.

Sass files must be compiled into standard CSS files before they can be used in a web project. This is typically done with a build tool or task runner, such as Grunt or Gulp, or with a standalone compiler like the Sass command-line tool. Once compiled, the resulting CSS can be used in any web project just like regular CSS.


History of SASS

SASS inventor
  • Sass was first created in 2006 by Hampton Catlin, a developer and author who wanted to make writing CSS code easier and more efficient.
  • The first version of Sass was written in Ruby and was based on a syntax similar to that of Haml, another popular Ruby-based markup language.
  • Sass quickly gained popularity among web developers, and in 2010, version 3 of Sass was released, introducing a new syntax that was more similar to standard CSS code.
  • In 2011, Sass was officially adopted by the CSS Working Group as a proposed extension to CSS, which helped to cement its position as a leading CSS preprocessor.
    • Today, Sass is widely used by front-end developers and is supported by a large community of developers and contributors.
  • In 2019, the original Sass maintainers announced that they would be stepping down from active development of Sass, but that the project would continue to be maintained by a new team of volunteers.
    • Sass has had a significant impact on the way that CSS is written and managed, and has helped to make front-end development more efficient and accessible for developers of all levels.


Prerequisites :

  • Basic knowledge of HTML and CSS
  • Familiarity with a command line interface (CLI) and package managers like npm
  • Understanding of programming concepts like variables, functions, and conditional statements
  • Understanding of web design and development best practices, such as responsive design and accessibility

Software :

  • A code editor like Visual Studio Code, Sublime Text, or Atom
  • Sass can be installed using a package manager like npm.
  • A web browser to test your code and see the changes in real-time.

Procedure to create SASS Project

SASS Folders
  • Open Visual Studio Code and open the terminal.
  • Type npm init -y in the terminal and press Enter to create a new project named SASS with default settings.
  • Open the package.json file and change the name to sass-app, add keywords and author name as Tutor Joes.
  • In the terminal, type npmi sass -D to install the Sass module in your project.
  • Create a list of folders in your project:
    • css for stylesheet
    • sass for .scss files.
  • In the SASS folder, create a new index.scss file and add your Sass code.
  • In the index.html file, link the stylesheet by adding <link rel="stylesheet" href="../css/style.css"> to the head section.
  • Install the Live Server extension in Visual Studio Code.
  • Click on the Go Live button on the bottom right corner of the Visual Studio Code window to run the project using the Live Server extension
  • Run project using the command npm start in visual studio code terminal. You can get compiled style in style.css file.

Configure SASS Project

Open package.json file and add the below code in script key.

"start": "sass ./sass/index.scss ./css/style.css && sass ./sass/index.scss ./css/style.min.css --style=compressed --no-source-map --watch"

SASS Code

Here's a breakdown of the command:

  • "start": The name of the script command.
  • "sass": The command to compile the Sass code.
  • ./sass/index.scss: The path to the Sass entry file that needs to be compiled.
  • ./css/style.css: The path where the compiled CSS file will be generated.
  • &&: The command separator that allows us to run multiple commands.
  • sass ./sass/index.scss ./css/style.min.css: This is the second Sass compilation command that generates the minified version of the CSS file.
  • --style=compressed: This option specifies that the output should be compressed, i.e., without any whitespace.
  • --no-source-map: This option specifies that no source map files should be generated.
  • --watch: This option tells Sass to watch for changes in the Sass file and recompile the CSS file whenever a change is detected.

List of Programs

Learn All in Tamil © Designed & Developed By Tutor Joes | Privacy Policy | Terms & Conditions