SCSS Syntax and Structure

This tutorial explains SCSS's syntax and structure and helps you understand and utilize its features for writing clean, maintainable, and reusable styles.

SCSS Syntax

SCSS syntax is similar to CSS but includes additional capabilities. SCSS files use the .scss extension and support all CSS properties. SCSS allows nested rules, variables, mixins, and functions, making it a straightforward and powerful tool for writing styles.

Variables

Variables store reusable values, such as colors and fonts, using the $ symbol.

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

body {
    color: $primary-color;
    font-family: $font-stack;
}

Nesting

Nesting aligns your CSS selectors with the HTML hierarchy, enhancing readability.

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

    li {
        display: inline-block;
    }

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

Partials and Import

Partials are SCSS files prefixed with an underscore and imported into other SCSS files.

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

// styles.scss
@import 'variables';

body {
    color: $primary-color;
}

Mixins

Mixins create reusable code blocks. They accept arguments for flexibility.

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

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

Extend/Inheritance

The @extend directive allows one selector to inherit another's styles, promoting DRY (Don't Repeat Yourself) principles.

.message {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
}

.success {
    @extend .message;
    border-color: green;
}

.error {
    @extend .message;
    border-color: red;
}

Operators

SCSS supports standard math operators for calculations.

$base-font-size: 16px;
$line-height: 1.5;

body {
    font-size: $base-font-size;
    line-height: $base-font-size * $line-height;
}

Implementation Example

Combining SCSS features in a practical example:

_variables.scss

$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-stack: Helvetica, sans-serif;

_mixins.scss

@mixin box-shadow($shadow) {
    -webkit-box-shadow: $shadow;
    -moz-box-shadow: $shadow;
    box-shadow: $shadow;
}

_base.scss

body {
    color: $primary-color;
    font-family: $font-stack;
}

_buttons.scss

.button {
    display: inline-block;
    padding: 10px 20px;
    text-align: center;
    color: #fff;
    background-color: $secondary-color;
    @include box-shadow(0 0 5px rgba(0, 0, 0, 0.5));
    &:hover {
        background-color: darken($secondary-color, 10%);
    }
}

styles.scss

@import 'variables';
@import 'mixins';
@import 'base';
@import 'buttons';

Output CSS

When compiled, the SCSS will output a single CSS file:

body {
  color: #3498db;
  font-family: Helvetica, sans-serif;
}

.button {
  display: inline-block;
  padding: 10px 20px;
  text-align: center;
  color: #fff;
  background-color: #2ecc71;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.button:hover {
  background-color: #27ae60;
}

Conclusion

This tutorial covered SCSS's essential syntax and structure, including variables, nesting, partials, mixins, inheritance, and operators. SCSS extends CSS with powerful features that facilitate better code organization, reuse, and maintainability for efficient and scalable stylesheets.