Getting Started with Sass (Syntactically Awesome Stylesheets)

Sass (Syntactically Awesome Style Sheets) is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). It extends CSS with features like variables, nesting, and mixins, making it easier to write and maintain stylesheets. This tutorial will introduce you to Sass and its various features with examples.

Table of Contents

1. Installation
2. Basic Syntax
3. Variables
4. Nesting
5. Mixins
6. Control Directives
   • If Statements
   • For Loops
7. Functions
8. Imports
9. Extend/Inheritance
10. Example Project Structure

1. Installation

To use Sass, you need to have Ruby installed on your system. Sass can be installed via RubyGems, the Ruby package manager. Open your terminal or command prompt and run:

gem install sass

2. Basic Syntax

Sass syntax is similar to CSS, but with a few additional features. The basic syntax includes:

/* This is a Sass comment */

// This is also a Sass comment

body
  font-family: Arial, sans-serif
  color: #333
  background-color: #f4f4f4

3. Variables

Variables allow you to define reusable values throughout your stylesheet. They are declared with a dollar sign $:

$primary-color: #3498db
$secondary-color: #e74c3c

.btn
  color: $primary-color
  background-color: $secondary-color

4. Nesting

Nesting allows you to nest your CSS selectors, making your stylesheets more readable and maintainable:

.navbar
  background-color: #333
  color: #fff

  ul
    list-style: none
    padding: 0

    li
      display: inline-block
      margin-right: 10px

5. Mixins

Mixins allow you to define reusable styles that can be included wherever needed:

@mixin button-styles($bg-color, $text-color) {
  background-color: $bg-color
  color: $text-color
  padding: 10px 20px
  border: none
  border-radius: 5px
  cursor: pointer

  &:hover
    background-color: darken($bg-color, 10%)
}

.btn-primary
  @include button-styles($primary-color, #fff)

.btn-secondary
  @include button-styles($secondary-color, #fff)

6. Control Directives

If Statements

$is-admin: true

.btn
  @if $is-admin
    background-color: #f39c12
  @else
    background-color: #3498db

For Loops

@for $i from 1 through 3
  .col-#{$i}
    width: 100px * $i

7. Functions

Sass also supports functions, which can be useful for calculations:

@function calculate-area($width, $height) {
  @return $width * $height
}

.rectangle
  width: 100px
  height: 50px
  area: calculate-area(100px, 50px)

8. Imports

You can split your styles into multiple files and import them into a main Sass file:

// _variables.scss
$primary-color: #3498db
$secondary-color: #e74c3c

// _buttons.scss
@mixin button-styles($bg-color, $text-color) {
  background-color: $bg-color
  color: $text-color
  // other styles...
}

// main.scss
@import 'variables'
@import 'buttons'

.btn-primary
  @include button-styles($primary-color, #fff)

.btn-secondary
  @include button-styles($secondary-color, #fff)

9. Extend/Inheritance

Sass allows for selector inheritance, reducing repetition in your styles:

%button-styles
  padding: 10px 20px
  border: none
  border-radius: 5px
  cursor: pointer

.btn-primary
  @extend %button-styles
  background-color: $primary-color
  color: #fff

.btn-secondary
  @extend %button-styles
  background-color: $secondary-color
  color: #fff

10. Example Project Structure

Here’s an example folder structure for a Sass project:

sass-project/
│
├── sass/
│   ├── _variables.scss
│   ├── _buttons.scss
│   ├── _navbar.scss
│   └── main.scss
│
└── css/
    └── main.css

In this structure:

• _variables.scss, _buttons.scss, _navbar.scss are partial Sass files.
• main.scss is the main Sass file where you import all partials and compile to main.css.

To compile your Sass files into CSS, run the following command:

sass sass/main.scss css/main.css

This will compile main.scss and its imports into main.css in the css/ directory.

This tutorial covers the basic features of Sass, including variables, nesting, mixins, control directives, functions, imports, and extend/inheritance. Sass can greatly improve the efficiency and readability of your CSS stylesheets, making styling web applications more organized and maintainable.