Sass/SCSS Complete Guide: Variables, Nesting, Mixins, Partials, Extends and Functions

What Is Sass/SCSS?

Sass (Syntactically Awesome Style Sheets) is a powerful CSS preprocessor that extends the capabilities of CSS. With features like variables, nested rules, mixins, functions, and modular architecture, it makes writing CSS more efficient, organized, and maintainable. Created in 2006 by Hampton Catlin and developed by Nathan Weizenbaum, Sass has become an essential tool in modern web development.

SCSS (Sassy CSS) is the CSS-compatible syntax variant of Sass. It adds Sass features on top of standard CSS, meaning you can use your existing CSS files directly as SCSS. The vast majority of modern web projects prefer the SCSS syntax.

Sass vs SCSS: Which Should You Use?

1. Variables

What Are SCSS Variables?

SCSS variables allow you to define repeating values (colors, fonts, spacing, breakpoints) in one place and use them throughout your project. When you need to change a value, you update it in a single location and it automatically reflects across the entire project.

Variable Types

• Color variables: $primary-color: #3498db; $danger-color: #e74c3c;
• Typography: $font-family-base: 'Inter', sans-serif; $font-size-lg: 1.25rem;
• Spacing: $spacing-unit: 8px; $container-max-width: 1200px;
• Breakpoints: $breakpoint-sm: 576px; $breakpoint-md: 768px;
• Z-index: $z-header: 1000; $z-modal: 2000; $z-tooltip: 3000;

Variable Scope

SCSS variables have two scope types:

1. Global scope: Variables defined at the top level of a file are accessible everywhere.
2. Local scope: Variables defined within a rule block are only valid within that block and its children.

SCSS variables are evaluated at compile-time, while CSS custom properties (--variable) are evaluated at runtime. Use CSS custom properties for dynamic theme changes and SCSS variables for static values.

2. Nesting

What Is Nesting?

Nesting allows you to write CSS rules in a nested structure that mirrors your HTML hierarchy. This improves code readability and eliminates repetitive selectors.

Nesting Best Practices

• Maximum 3-4 levels deep: Excessive nesting increases specificity and makes CSS brittle.
• & (parent selector): Use the & symbol to reference the parent selector. Works perfectly with BEM methodology.
• Media query nesting: Write responsive rules inside the relevant selector to maintain context.
• Pseudo-class and pseudo-element: The & is required for expressions like &:hover, &::before.

Nesting Warnings

Problems caused by excessive nesting:

1. High CSS specificity (difficulty overriding styles)
2. Large file size (long selector chains)
3. Poor performance (browsers match selectors right-to-left)
4. Maintenance difficulty (changes in deep structures are risky)

3. Mixins

What Is a Mixin?

Mixins allow you to define reusable CSS code blocks. They can accept parameters, making them extremely flexible. You define a mixin and call it with @include wherever needed.

Mixin Use Cases

• Responsive breakpoints: Define media queries as mixins for consistency across the project.
• Flexbox/Grid shortcuts: Encapsulate frequently used layout patterns.
• Typography settings: Create mixins for font-size, line-height, font-weight combinations.
• Animation templates: Define recurring animation patterns with parameterized mixins.
• Theme support: Manage dark/light theme variables through mixins.

Mixin vs Extend: When to Use Which?

4. Partials and Modular Architecture

What Are Partials?

Partials allow you to split your SCSS code into logical files. Files prefixed with an underscore (_) are treated as partials and are not compiled into standalone CSS files; they are only included in other files via @use or @import.

Recommended File Structure

The 7-1 Pattern file organization is widely used in professional projects:

• abstracts/: Variables, mixins, functions — files that produce no CSS output
• base/: Reset, typography, general HTML element styles
• components/: Independent components like buttons, cards, forms
• layout/: Header, footer, sidebar, grid system
• pages/: Page-specific styles
• themes/: Theme files (dark mode, light mode)
• vendors/: Third-party library styles
• main.scss: The main file that combines all partials

@use vs @import

In modern Sass, @import is being deprecated. @use and @forward are recommended instead:

1. @use: Loads a module and provides namespaced access
2. @forward: Exposes a module's members to the outside
3. Namespace support: Prevents naming conflicts
4. Private access: Allows hiding module members

5. @extend and Inheritance

What Is @extend?

@extend allows a selector to inherit all styles from another selector. In the CSS output, selectors are merged, preventing code duplication.

Placeholder Selectors (%)

Placeholder selectors are designed exclusively for use with @extend. Defined with the % symbol, they produce no CSS output on their own:

• Definitions like %flex-center are only included in CSS when extended
• Unused placeholders do not increase file size
• Unlike mixins, they group selectors instead of duplicating code

@extend Considerations

Remember that @extend does not work inside media query blocks. Additionally, it can create unexpected selector combinations in deeply nested structures. In complex projects, using @mixin generally produces more predictable results.

6. Functions

Built-in Functions

SCSS has a rich library of built-in functions:

• Color functions: lighten(), darken(), saturate(), desaturate(), mix(), adjust-hue()
• Numeric functions: percentage(), round(), ceil(), floor(), abs(), min(), max()
• String functions: quote(), unquote(), str-length(), str-insert(), to-upper-case()
• List functions: length(), nth(), append(), join(), index()
• Map functions: map-get(), map-merge(), map-keys(), map-values(), map-has-key()

Writing Custom Functions

You can define your own functions using the @function directive. Functions differ from mixins in that they return a value (via @return) and are used in CSS property values:

1. Unit conversion functions like px-to-rem
2. Color palette generation functions
3. Responsive spacing calculation functions
4. Type scale functions for typography

Sass/SCSS Project Integration

Usage with Build Tools

There are several ways to integrate SCSS into your project:

• Vite: Built-in Sass support, no additional configuration needed
• Webpack: Integration via sass-loader
• Gulp: Automatic compilation with gulp-sass plugin
• Next.js: Built-in Sass support, customizable via next.config.js
• Angular CLI: SCSS support by default

Performance Tips

1. Clean up unused mixins and variables
2. Prefer @mixin over @extend for predictability
3. Keep nesting depth to 3 levels
4. Disable source maps in production builds
5. Use CSS modules for scope isolation

Conclusion

Sass/SCSS is one of the indispensable tools of modern CSS development. With variables, you gain consistency; with nesting, readability; with mixins, reusability; with partials, modularity; with extend, the DRY principle; and with functions, computational power. The right combination of these features is the key to creating maintainable and manageable style files even in large-scale projects.