Introduction to SASS

SASS (Syntactically Awesome Stylesheets) is a powerful preprocessor scripting language that enhances CSS with advanced features. It’s compiled into standard CSS, making it a robust tool for modern web development.

Benefits Over Traditional CSS

Improved Code Organization

  • Nesting Capabilities: SASS allows you to nest your CSS selectors in a way that follows the same visual hierarchy of your HTML.
  • Modular Approach: You can split your CSS into multiple files (partials) and import them into a main file, making your project more organized.

Maintainability

  • Use of Variables: Define colors, fonts, and other CSS values as variables for easy updates and consistency across the project.
  • Mixins for Reusable Code: Create reusable pieces of code for things like buttons, forms, which can be included wherever needed.
  • Extend/Inheritance: Share a set of CSS properties from one selector to another, reducing the amount of code you need to write and maintain.

Advanced Features

  • Control Directives: Use if/else statements and for/each loops in your CSS, which are not possible in plain CSS.
  • Built-in Functions: SASS offers functions for color manipulation, mathematics and more, enhancing the functionality of CSS.
  • Compatibility: Automatically handles browser prefixing, ensuring that your styles work across different browsers without extra code.

SASS Basics

Preprocessing

  • Functionality: Sass enhances CSS with features like nesting, mixins, inheritance, and more.
  • Compilation: Sass files are preprocessed to generate standard CSS files.
  • Usage: Use the sass command in the terminal to compile Sass files. For example, sass input.sass output.css.
  • Watching Files: The --watch flag allows Sass to monitor files for changes and recompile automatically.
// Command to compile Sass
sass input.sass output.css

// Command to watch and compile Sass
sass --watch input.sass output.css

Modules

  • Splitting Code: Sass allows splitting code into multiple files.
  • @use Rule: Loads another Sass file as a module, enabling access to its variables, mixins, and functions.
  • Namespace: Refer to module contents using a namespace based on the filename.

// In _base.sass
$primary-color: #333

// In styles.sass
@use 'base'
.inverse
  background-color: base.$primary-color
  color: white

Operators

  • Math Operations: Sass supports standard math operators for calculations within CSS.
  • Example: Calculating widths for a fluid grid using operations like math.div().

.container
  display: flex
article[role="main"]
  width: 600px / 960px * 100%
aside[role="complementary"]
  width: 300px / 960px * 100%
  margin-left: auto

Partials and Modular Styling with SASS

Understanding SASS Partials:

SASS partials are separate files containing any specific style or component. They allow for better organization and modularization of styles. They play a very important role in organizing and modularizing styles.

Partials are named with a leading underscore (e.g., _variables.sass) to indicate that they are meant to be __ into another stylesheet.

Benefits of Using Partials:

  1. Modular Organization:
    • Partials break down stylesheets into smaller files, each focusing on a specific aspect (e.g., variables, typography, layout).
    • This modular approach improves code organization, making it easier to maintain and scale.
  2. Code Reusability:
    • Partials enable the reuse of styles across multiple files. For example, a _variables.sass partial may store color schemes and fonts, allowing for greater consistency.
  3. Readability and Collaboration:
    • Smaller files enhance code readability. Developers can quickly locate and understand specific styles.
    • Supports ____ development, allowing different team members to work on different partials simultaneously.

Importing Partials into a Main SASS File:

To use SASS partials, import them into a main SCSS file using the @import directive. The main file (e.g., main.sass) serves as the entry point for compiling styles.

Importing Partials into a Main SASS File:


// main.sass

// Importing variables partial
@use variables

// Importing typography partial
@use typography

// Importing layout partial
@use layout

// Importing components partial
@use components

Variables in SASS

Introduction to Variables:

SASS variables provide a way to store information for later use in a stylesheet. They offer several advantages, including enhanced maintainability and consistency, by allowing you to define values in __ location.

Variable Syntax:

In SASS, variables are declared using the ‘$’ symbol followed by the variable name. Once a variable is defined, its value can be reused throughout the stylesheet.

Variable Syntax:

// _variables.sass

// Define variables
$primary-color: #3498db
$secondary-color: #2ecc71

// Use variables
body
  background-color: $primary-color

.button
  background-color: $secondary-color
  color: #fff

SASS Variable Scope:

Variable scope is similar to the range in which a variable is accessible. By default, variables are local to the file in which they are defined. However, you can create a GLOBAL VARIABLE:

By default, variables are local to the scope in which they are defined. However, the !global flag can be used to create global variables. Global variables are accessible throughout the entire stylesheet.

Global Variables:

// _variables.sass

// Local variable
$local-font-size: 16px !default

// Global variable
$global-font-size: 18px !global

Variable Scope:


// styles.sass

// Importing variables partial
@use 'variables'

$font-size: 14px // Global variable

body
  font-size: $font-size // Accessing the global variable

.container
  $font-size: $local-font-size // Local variable within .container scope
  font-size: $global-font-size // Accessing the global variable

Nested techniques

Basic Nesting:


nav
  background-color: #333

  ul
    list-style: none
    padding: 0
    margin: 0

    li
      display: inline-block
      margin-right: 10px

      a
        text-decoration: none
        color: #fff

In this example, the CSS output will be:


nav {
  background-color: #333;
}

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

nav ul li {
  display: inline-block;
  margin-right: 10px;
}

nav ul li a {
  text-decoration: none;
  color: #fff;
}

Many CSS properties have the same prefix, like font-family, font-size and font-weight or text-align, text-transform and text-overflow.

With SASS you can write them as nested properties:


font:
  family: Helvetica, sans-serif
  size: 18px
  weight: bold

text:
  align: center
  transform: lowercase
  overflow: hidden

The SASS transpiler will convert the above to normal CSS:


font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;

text-align: center;
text-transform: lowercase;
text-overflow: hidden;

Flexbox and Grid Integration

Flexbox and Grid are two powerful layout systems in CSS that allow for responsive design and complex layouts with less effort.

Flexbox

  • Purpose: Designed for __-dimensional layouts (either __ or __).

Grid

  • Purpose: Designed for __ -dimensional layouts ( __ and __ together).

Simplifying Responsive Layouts with SASS

SASS enhances the use of Flexbox and Grid by allowing more organized and maintainable stylesheets.

  • Variables and Mixins: Use SASS variables and mixins to create reusable Flexbox and Grid styles.
  • Nesting: Nest media queries within selectors for responsive design.
  • Functions: Use SASS functions to calculate flexible dimensions and spacings.

Demonstration: Complex Flexbox Layout with SASS


// Define variables
$primary-color: #333
$secondary-color: #777
$padding: 10px

// Mixin for flex container
@mixin flex-container
  display: flex
  justify-content: space-between
  padding: $padding

// Main container
.main-container
  @include flex-container
  background-color: $primary-color

  // Nested items
  .item
    flex: 1
    margin: 5px
    background-color: $secondary-color
    &:hover
      background-color: darken($secondary-color, 10%)

Demonstration: Responsive Grid Layout with SASS


// Grid container
.grid-container
  display: grid
  grid-template-columns: repeat(3, 1fr)
  gap: 10px

  // Responsive adjustment
  @media (max-width: 600px)
    grid-template-columns: repeat(2, 1fr)

  // Grid items
  .grid-item
    background-color: $primary-color
    padding: $padding
    &:hover
      background-color: lighten($primary-color, 10%)

Hacks

Hack #1

Create a grid layout that automatically adjusts the number of columns based on the screen size, using SASS variables and functions.

Hack #2

Define a custom SASS function that uses a for loop in order to slightly decrease the saturation and increase the brightness of a color of your choosing and fill in those increasingly more white colors into a 3x3 array of equal height and width.

Example Image

pixil-frame-0 (1)