Intermediate

SASS Intermediate: Reusability and Organization

Moving beyond the basics, SASS offers powerful tools for creating reusable code patterns and organizing large stylesheets effectively.

1. Partials and @import

• Partials: SASS files named with a leading underscore (e.g., _variables.scss, _buttons.scss). They are not compiled into separate CSS files on their own.
• @import: Used to include the contents of one SASS file (often a partial) into another.
• Benefit: Break down large stylesheets into smaller, manageable, and modular files based on features or components. Note: Newer projects often prefer @use (see Advanced note).

Example File Structure:

styles/
|-- main.scss         # Main file, imports others
|-- _variables.scss   # Contains variable definitions
|-- _base.scss        # Basic styles (reset, typography)
|-- _components/
|   |-- _buttons.scss
|   |-- _cards.scss

main.scss:

// Import variables first
@import 'variables';

// Import base styles
@import 'base';

// Import components
@import 'components/buttons';
@import 'components/cards';

// Styles specific to main.scss
body {
  background-color: #f0f0f0;
}

2. Mixins (@mixin, @include)

• @mixin: Defines a reusable block of styles, similar to a function in programming. Can accept arguments for flexibility.
• @include: Includes the styles defined by a mixin into a selector.
• Benefit: Perfect for applying common patterns (like vendor prefixes, complex backgrounds, or common layout structures) without duplicating code.

Example:

// Define a mixin for centering content
@mixin flex-center($direction: row) { // Argument with a default value
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: $direction;
}

// Define a mixin for transitions
@mixin transition($property: all, $duration: 0.3s, $timing: ease) {
  transition: $property $duration $timing;
  -webkit-transition: $property $duration $timing; // Example vendor prefix
}

// Use the mixins
.container {
  @include flex-center(column); // Use column direction
}

.button {
  @include flex-center; // Use default direction (row)
  @include transition(background-color); // Use specific property
}

3. Extend (@extend)

• @extend: Allows one selector to inherit the styles of another selector.
• Benefit: Groups selectors that share the exact same style block in the final CSS, potentially reducing file size.
• Placeholder Selectors (%): Selectors starting with % (e.g., %message-shared) are not output in the CSS unless they are extended. Ideal for creating base styles intended only for inheritance.

Example:

// Define a placeholder for shared alert styles
%alert-base {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}

.alert-success {
  @extend %alert-base; // Inherit base styles
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.alert-danger {
  @extend %alert-base; // Inherit base styles
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}

Compiled CSS Output (Simplified):

/* %alert-base styles are merged into extending selectors */
.alert-success, .alert-danger {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}

.alert-success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}

Caution with @extend: Overuse, especially across different files or with complex selectors, can sometimes lead to unexpected generated CSS and large selector groups. Mixins are often preferred for complex reusable patterns.

---

Backlinks

• Sass Scss