Beginners guide to working with Sass

#webdev #css #beginners #tutorial

Sass is a popular CSS preprocessor that adds powerful features to traditional CSS, such as variables, mixins, and functions. It allows developers to write cleaner, more organized, and more maintainable stylesheets by allowing them to use the same set of styles in multiple places and avoid repetitive code.

To use Sass, you first need to install a Sass compiler, which will take your Sass code and convert it into regular CSS that can be interpreted by browsers. There are a number of different ways to install a Sass compiler, including using a command line tool like Ruby, npm, choco, brew or a standalone application like Koala.

How to install sass using npm

Npm is a node package manager which comes with nodejs. Once you have this installed you can open your terminal and type:
npm install -g sass
This would install the sass compiler globally on your system.

How to install sass compiler using Homebrew

This is suitable for Mac and Linux OS. You simply open up your terminal and type the command:
brew install sass/sass/sass

For more installation methods visit the sass documentation.

Once you have a compiler installed, you can start writing Sass by creating a .scss file and saving it with a .scss extension inside a project directory. Sass uses a syntax that is similar to CSS, but with some key differences. For example, Sass allows you to use variables to store values that can be reused throughout your stylesheet.

Here is an example of how you might use variables in Sass:

$primary-color: #333;
$secondary-color: #777;

body {
  background-color: $primary-color;
  color: $secondary-color;
}

In this example, we define two variables, $primary-color and $secondary-color, and then use them to set the background-color and color properties of the body element. This allows us to easily change the colors of our website by simply changing the values of the variables, rather than having to search through our stylesheet and update the values manually.

Sass also allows you to use mixins, which are reusable blocks of styles that can be included in multiple places throughout your stylesheet. Mixins are especially useful for creating complex styles that may need to be used in multiple places, such as styles for responsive layouts or CSS3 transitions and transformations.

Here is an example of how you might use a mixin in Sass:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.button {
  @include border-radius(5px);
}

In this example, we define a mixin called border-radius that applies a border radius to an element using vendor-prefixes to ensure compatibility with a variety of different browsers. We then use the @include directive to include the mixin in the .button class, which will apply the border radius to any element with the .button class.

Finally, Sass also includes a number of functions that can be used to perform calculations and manipulate values within your stylesheets. For example, you can use the lighten() function to lighten a color by a specified percentage, or the darken() function to darken a color.

Here is an example of how you might use functions in Sass:

$primary-color: #333;

.button {
  background-color: lighten($primary-color, 10%);
  color: darken($primary-color, 10%);
}

In this example, we use the lighten() and darken() functions to create a button with a background color that is 10% lighter than the $primary-color variable, and a color that is 10% darker.

How to compile sass files to css files

You open your terminal and navigate into your project directory and then type the command:

sass [PATH_TO_SASS_FILE]/[FILENAME].scss [PATH_TO_OUTPUT_CSS_FILE]/[FILENAME].css

And you are good to go. There are more flags you can add to the command to enhance it e.g. --watch. This keeps the compiler running and you don't have run the command everytime you make changes to your sass files.

Thank you for reading 💙