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

Variables

  • Purpose: Store reusable values like colors, fonts, etc.
  • Syntax: Defined with the $ symbol, e.g., $primary-color: #333.
  • Advantage: Simplifies updates and maintains consistency.

$primary-color: #333
body
  color: $primary-color

Nesting

  • Concept: Allows CSS selectors to be nested within each other, mirroring HTML structure.
  • Caution: Over-nesting can lead to complicated and hard-to-maintain CSS.

nav
  ul
    margin: 0
    padding: 0
    list-style: none
  li
    display: inline-block
  a
    display: block
    padding: 6px 12px
    text-decoration: none

Partials

  • Function: Small snippets of CSS can be included in other Sass files.
  • Naming: Partial files are named with a leading underscore, e.g., _partial.sass.
  • Importing: Use the @use rule to include partials in other Sass files.

// In _partial.sass
$font-stack: Helvetica, sans-serif

// In main.sass
@use 'partial'
body
  font: 100% partial.$font-stack

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

Mixins

  • Purpose: Create reusable groups of CSS declarations.
  • Flexibility: Mixins can accept values to make them more dynamic.
  • Syntax: Defined with @mixin and included with @include.

@mixin border-radius($radius)
  -webkit-border-radius: $radius
  -moz-border-radius: $radius
  border-radius: $radius

.box
  @include border-radius(10px)

Inheritance and Extend

  • @extend: Share CSS properties between selectors.
  • Placeholder Classes: Special classes that only print when extended, keeping CSS neat.
  • Usage: Helps avoid repetitive class names in HTML.

%message-shared
  border: 1px solid #ccc
  padding: 10px
  color: #333

.message
  @extend %message-shared

.success
  @extend %message-shared
  border-color: green

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

SASS Role in Design:

In the design phase of any project, maintaining uniformity is extremely important for creating a polished look. SASS allows for this by allowing the use of variables to store and reuse colors, fonts, and other design elements.

This makes it so that there is a ____ theme applied throughout the entire project. SASS allows for visual cohesion.

Visual Concept as a Blueprint

Before going into the functional code, it is very important to create a visual concept or design mockup. This is a model for the project, which gives a clear visual representation for the final product. It allows for a scrum team to align on the aesthetics and overall design direction.

This also allows for feedback and ___. People can make adjustments to the visual elements without complexity of functional code, and it makes sure that all requirements are met.

These visual concepts also play a role in planning the ___ design. The team members can visualize how layouts and styles are adapted for different ____ _____, so that all users can have a great visual experience across all types of devices.

Hacks

Explore SASS documentation to discover any additional features not covered in the lesson and implement one or more of these features in your GH Pages project. Write a couple sentences explaining the feature and demonstrate it.