Understanding SASS/SCSS Syntax

1. Introduction

1.1 Goal of the Tutorial

This tutorial aims to provide a comprehensive introduction to the syntax of SASS (Syntactically Awesome Stylesheets) and its superset, SCSS. By the end of this tutorial, you'll understand how to use and implement SASS/SCSS in your web projects.

1.2 Learning Outcomes

You will learn about:
- Variables in SASS/SCSS
- Nesting in SASS/SCSS
- Mixins in SASS/SCSS
- Inheritance in SASS/SCSS

1.3 Prerequisites

Basic knowledge of CSS is required. Familiarity with CSS pre-processors would be beneficial but is not mandatory.

2. Step-by-Step Guide

2.1 Variables

SASS/SCSS allows the use of variables, which helps maintain consistency and makes your code more manageable. A variable name begins with a $ sign.

$primary-color: #3cb371;

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

2.2 Nesting

SASS/SCSS enables you to nest your CSS selectors in a way that follows a visual hierarchy.

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

2.3 Mixins

A mixin is a block of code that lets you group CSS declarations you might want to reuse throughout your site.

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

.box { @include border-radius(10px); }

2.4 Inheritance

The @extend directive allows a selector to inherit the styles of another one.

.button {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 3px;
}

.primary-button {
  @extend .button;
  background-color: #39f;
}

3. Code Examples

3.1 Example 1: Using Variables

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

In this example, $font-stack and $primary-color are variables. The body font is set to the $font-stack variable and the text color to $primary-color.

3.2 Example 2: Nesting

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

This example shows how to nest selectors. The ul, li, and a selectors are nested within the nav selector, reflecting the HTML structure.

3.3 Example 3: Mixins

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

.box { @include transform(rotate(30deg)); }

This example defines a mixin transform that applies the transform CSS property with vendor prefixes. The mixin is then included in the .box class using @include.

4. Summary

In this tutorial, you've learned about SASS/SCSS syntax, including variables, nesting, mixins, and inheritance. The next step is to practice using these concepts in real-world scenarios.

For further study, you may refer to the SASS Documentation.

5. Practice Exercises

5.1 Exercise 1

Write SCSS code to style a .button class with a background color of #f00, a border radius of 5px, and padding of 10px.

5.2 Exercise 2

Create a mixin that sets the font size, font weight, and line height, then include it in a .text class.

5.3 Exercise 3

Create a .warning class that extends the .button class from Exercise 1, but changes the background color to #ff0.

5.4 Solutions

Exercise 1

.button {
  background-color: #f00;
  border-radius: 5px;
  padding: 10px;
}

Exercise 2

@mixin font-settings($size, $weight, $line-height) {
  font-size: $size;
  font-weight: $weight;
  line-height: $line-height;
}

.text { @include font-settings(16px, bold, 1.5); }

Exercise 3

.warning {
  @extend .button;
  background-color: #ff0;
}

Remember to keep practicing and experimenting with different SASS/SCSS features. Happy coding!