SASS / SCSS

💅 What is SASS/SCSS?

SASS (Syntactically Awesome Style Sheets) is a CSS preprocessor that adds powerful features like variables, nesting, mixins, and functions. SCSS is the newer syntax that's fully compatible with CSS.


# Install SASS in Next.js
npm install sass

# Next.js automatically compiles .scss and .sass files
# Just import them in your components!

Key SASS Features

📦

Variables

Store reusable values

$primary-color: #3B82F6;
$spacing: 16px;

🪆

Nesting

Nest selectors for better organization

.card {
  .title { font-size: 24px; }
}

🎨

Mixins

Reusable style blocks

@mixin flex-center {
  display: flex;
  justify-content: center;
}

📂

Partials

Split styles into multiple files

@import 'variables';
@import 'mixins';

🔹 Using SCSS in Next.js

Import SCSS files directly into your Next.js components. Next.js has built-in SASS support, so you can start using SCSS immediately after installing the sass package.

/* styles/Home.module.scss */
$primary-color: #0070f3;
$border-radius: 8px;

.container {
  padding: 20px;
  background-color: $primary-color;
  border-radius: $border-radius;
  
  .title {
    font-size: 2rem;
    color: white;
    margin-bottom: 1rem;
  }
  
  .description {
    color: rgba(255, 255, 255, 0.9);
  }
}

// app/page.js
import styles from './Home.module.scss'

export default function Home() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Welcome</h1>
      <p className={styles.description}>Using SCSS in Next.js</p>
    </div>
  )
}

🔹 Variables and Nesting

Define reusable variables and nest selectors for cleaner code. Variables help maintain consistency across your styles, while nesting reflects your HTML structure for better readability.

/* styles/variables.scss */
$primary: #3B82F6;
$secondary: #10B981;
$danger: #EF4444;
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 24px;

/* styles/Card.module.scss */
@import './variables';

.card {
  padding: $spacing-md;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  
  .header {
    margin-bottom: $spacing-sm;
    
    .title {
      font-size: 1.5rem;
      color: $primary;
    }
  }
  
  .content {
    color: #666;
    line-height: 1.6;
  }
  
  &:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  }
}

🔹 Mixins for Reusable Styles

Create mixins to reuse common style patterns throughout your application. Mixins can accept parameters, making them flexible and powerful for creating consistent design systems.

/* styles/mixins.scss */
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin button($bg-color, $text-color) {
  padding: 12px 24px;
  background-color: $bg-color;
  color: $text-color;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    opacity: 0.9;
    transform: translateY(-2px);
  }
}

/* styles/Button.module.scss */
@import './mixins';

.primaryButton {
  @include button(#3B82F6, white);
}

.dangerButton {
  @include button(#EF4444, white);
}

.container {
  @include flex-center;
  height: 100vh;
}

🔹 Partials and Imports

Organize your styles into separate files using partials. Partials start with an underscore and are imported into main stylesheets, helping you maintain a clean and modular CSS architecture.

/* styles/_variables.scss */
$primary-color: #3B82F6;
$font-stack: 'Inter', sans-serif;

/* styles/_mixins.scss */
@mixin card-shadow {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* styles/_buttons.scss */
.btn {
  padding: 10px 20px;
  border-radius: 4px;
  
  &-primary {
    background: $primary-color;
    color: white;
  }
}

/* styles/main.scss */
@import 'variables';
@import 'mixins';
@import 'buttons';

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

🔹 Functions and Operations

Use SASS functions and mathematical operations to create dynamic styles. Functions help you manipulate colors, calculate values, and create more maintainable stylesheets.

/* styles/functions.scss */
$base-spacing: 8px;

@function spacing($multiplier) {
  @return $base-spacing * $multiplier;
}

/* Usage */
.container {
  padding: spacing(2);      // 16px
  margin: spacing(3);       // 24px
}

/* Color functions */
$primary: #3B82F6;

.button {
  background: $primary;
  
  &:hover {
    background: darken($primary, 10%);
  }
  
  &:active {
    background: darken($primary, 20%);
  }
}

/* Math operations */
.grid {
  width: 100% / 3;
  padding: 10px + 5px;
}

🔹 Extend and Inheritance

Share styles between selectors using @extend. This feature helps reduce code duplication by allowing one selector to inherit styles from another.

/* styles/extends.scss */
%button-base {
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}

.btn-primary {
  @extend %button-base;
  background: #3B82F6;
  color: white;
}

.btn-secondary {
  @extend %button-base;
  background: #6B7280;
  color: white;
}

.btn-outline {
  @extend %button-base;
  background: transparent;
  border: 2px solid #3B82F6;
  color: #3B82F6;
}

🔹 Responsive Design with SASS

Create responsive mixins for consistent breakpoints across your application. This approach makes it easy to maintain and update responsive styles throughout your project.

/* styles/responsive.scss */
$breakpoints: (
  'mobile': 640px,
  'tablet': 768px,
  'desktop': 1024px,
  'wide': 1280px
);

@mixin respond-to($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media (min-width: map-get($breakpoints, $breakpoint)) {
      @content;
    }
  }
}

/* Usage */
.container {
  padding: 16px;
  
  @include respond-to('tablet') {
    padding: 24px;
  }
  
  @include respond-to('desktop') {
    padding: 32px;
    max-width: 1200px;
    margin: 0 auto;
  }
}