Sass Overview

What is Sass

Sass is a CSS preproccessor that can make writing CSS faster and more efficient. You can also say Sass is extension of CSS. This CSS extension allows you to use variables, nested rules, mixins, functions, and many other features, some of which are available in native CSS (such as variables), and some of which aren’t.

CSS preprocessor

A preprocessor is a program that takes a bit of code and compiles it into a different bit of code. In the case of CSS preprocessors, we’re compiling the Sass language into regular old CSS that the browser can interpret. Therefore, the code you use on your HTML page will be the same as with CSS; all the compiling will go on behind the scenes.

LESS vs Sass

LESS and Sass are both CSS popular preprocessors, that do the same thing with the same end goal. LESS runs on Node.js, and Sass runs on Ruby. Compare CSS PREprocessors is a very good source of information about the actual differences between the two, and a third option known as Stylus.

LESS and Sass are more similar than they are different. However, Sass is more popular, and more widely used across a number of projects and frameworks. Big names are turning to Sass - for example, Bootstrap is switching from LESS to Sass for their next big release.

Jekyll use Sass as well.

Sass implementation

Sass is a stylesheet language; it’s just the syntax and definition.

Dart-Sass and Node-Sass are implementations. According to the Sass language website Dart Sass is the primary implementation of Sass, which means it gets new features before any other implementation.

Dart-Sass, The Dart version. If runs in Dart VM: It is the fastest.
Node-Sass is just a wrapper over LibSass (the C implemented version of Sass).
Dart-Sass(JS), When Dart-Sass turn to JS compiled version: Not fast as Node-Sass.

LibSass and the packages built on top of it, including Node Sass, are deprecated.

If you’re a user of Node Sass, you can migrate to Dart Sass by replacing node-sass in your package.json file with sass or by running the following commands:

$ npm uninstall node-sass
$ npm install sass

Sass vs SCSS

Within Sass, there are two different preprocessors:

Sass - Syntactically Awesome StyleSheets: .sass extension
SCSS - Sassy CSS: .scss extension

SCSS is more widely used, and much easier to get started with and integrate with existing projects. In fact, if you take any .css file and save it as a .scss file, it is now a valid SCSS file.

SCSS uses all the syntax we’re familiar with in CSS: semi-colons and curly brackets.

p {
  font-size: 1em;
}

Sass does away with the syntax, and relies on forced indentation.

p
  font-size: 1em

SCSS is the vastly more popular choice.

SASS Features

The Sass Guide on their official documentation is a fantastic getting started guide to understanding what Sass can do. Here are some of important terms.

Variable - A variable is a storage container for a CSS value, such as a color or number. The syntax is written as $variable. You can use this code throughout the stylesheet after you have defined it.
Nesting - Nesting reduces repetition in code and makes writing CSS faster and easier.
Partials - Partials are SCSS files that begin with an underscore (_partial.scss) and are not compiled into their own CSS files, but are rather imported into a main file.
Import - Use @import to compile all your partials into one file.
Mixins - Use @mixin for CSS, such as when vendor prefixes are required.
Extend - Use @extend to change a few key aspects of otherwise identical elements - such as a group of buttons with different colors.
Operators - Operators allow you to use math calculations in your CSS - such as defining the width of various parts of a layout.

Mixin

Mixin makes it easy to re-use chunks of styles.

Mixin is using At-rule @mixin and @include!
Mixins are defined using the @mixin at-rule, which is written @mixin <name> { ... } or @mixin name(<arguments...>) { ... }. Mixins can be used to encapsulate styles that can be dropped into a single style rule; they can contain style rules of their own that can be nested in other rules or included at the top level of the stylesheet; or they can just serve to modify variables.
Mixins are included into the current context using the @include at-rule, which is written @include <name> or @include <name>(<arguments...>), with the name of the mixin being included.
Mixins can also take arguments!

SCSS Example:

@mixin replace-text($image, $x: 50%, $y: 50%) {
  text-indent: -99999em;
  overflow: hidden;
  text-align: left;

  background: {
    image: $image;
    repeat: no-repeat;
    position: $x $y;
  }
}
.mail-icon {
  @include replace-text(url("/images/mail.svg"), 0);
}

Turn to CSS:

.mail-icon {
  text-indent: -99999em;
  overflow: hidden;
  text-align: left;
  background-image: url("/images/mail.svg");
  background-repeat: no-repeat;
  background-position: 0 50%;
}

What is `.css.map` file

It is a JSON format file that links the CSS file to its source files. Normally, source files written in preprocessors (i.e., Less, Sass, Stylus, etc.). .map file is used for live debug to the source files from the web browser.

For preprocessors that support CSS source maps, DevTools lets you live-edit your preprocessor source files in the Sources panel, and view the results without having to leave DevTools or refresh the page. When you inspect an element whose styles are provided by a generated CSS file, the Elements panel displays a link to the original source file, not the generated .css file.

Sass project

One of the great things about Sass is being able to organize your project.

Instead of having one huge CSS file that becomes hard to maintain, you can compartmentalize all the components of your site into multiple files known as partials, and compile them into one, minified CSS file. Any change made to these partials will be detected, and the main file will be updated.

Adding Sass to React

Generally, React recommend that you don’t reuse the same CSS classes across different components. For example, instead of using a .Button CSS class in <AcceptButton> and <RejectButton> components, we recommend creating a <Button> component with its own .Button styles, that both <AcceptButton> and <RejectButton> can render (but not inherit).

Following this rule often makes CSS preprocessors less useful, as features like mixins and nesting are replaced by component composition. You can, however, integrate a CSS preprocessor if you find it valuable.

The steps to use Sass in React:

First install sass: $npm install sass. (dart-sass)
Create a Sass file the same way as you create CSS files.
Import the Sass file the same way as you imported a CSS file in your_react_file.js:
```
import './my-sass.scss';
```

Organize Sass in project

There is any number of ways you can organize your project - compiled css in a dist folder, and scss source code in a src folder is one way.

I’m going to create a css folder and a sass folder inside of one project for simplicity.

It’s good to organize and separate your content, but I also wouldn’t go overboard with creating so many files and directories that it becomes a task to find where something is. Everything should have a utility and be obviously named.

Important

Every file in your project will start with an underscore except for the main scss file.

css/
- main.css
sass/
- main.scss
- base/
  - _variables.scss
  - _mixins.scss
  - _reset.scss
- components/
  - _typography.scss
  - _grid.scss
  - _buttons.scss
  - _navigation.scss
  - _sections.scss

In this example, I’m putting all my global variables and mixins in the base directory, along with any resets I might need. In the components directory, I’ll put all the styles for grid, navigation, typography, etc. I’ll use _sections.scss to put my code for individual sections of the page. If your project is very large, you might create a more specific directories.

The main.scss file will import all the partials from all the directories. You won’t need to add the underscore or extension when importing the filenames - instead of “_variables.scss” you will simply write “variables”.

Here’s how the main.scss file will look for this particular project.

// Base
@import 'base/variables';
@import 'base/mixins';
@import 'base/reset';

// Components
@import 'components/typography';
@import 'components/grid';
@import 'components/buttons';
@import 'components/navigation';
@import 'components/sections';

Now I can watch this entire project and compile everything into one, minified CSS file with a single command. $sass --watch sass:css --style compressed

With this command, I’m watching the entire sass directory for changes, and telling it compile into the css directory, and compress the output.

> > > Sass is watching for changes. Press Ctrl-C to stop.

  write css/main.css
  write css/main.css.map

Any change in the directory will be registered.

> > > Change detected to: sass/components/\_grid.scss

  write css/main.css
  write css/main.css.map

What is Sass

CSS preprocessor

LESS vs Sass

Sass implementation

Sass vs SCSS

SASS Features

Mixin

What is `.css.map` file

Sass project

Adding Sass to React

Organize Sass in project

Important

Reference

Post Detail

Sass Overview

What is Sass

CSS preprocessor

LESS vs Sass

Sass implementation

Sass vs SCSS

SASS Features

Mixin

What is .css.map file

Sass project

Adding Sass to React

Organize Sass in project

Important

Reference

Post Detail

What is `.css.map` file