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.