The Project | About Us | Contribute | Donations | License

HOME

Introduction

Sass (Syntactically Awesome Stylesheets) is a CSS preprocessor that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax.

Key Concepts

Variables

Variables in Sass allow you to store values that you can reuse throughout your stylesheet. This makes it easier to manage and update your CSS.

// Define variables
$primary-color: #3498db;
$font-stack: Helvetica, sans-serif;

// Use variables
body {
  font: 100% $font-stack;
  color: $primary-color;
}

Nesting

Sass allows you to nest your CSS selectors in a way that follows the same visual hierarchy of your HTML.

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

  li { 
    display: inline-block; 
  }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Partials and Import

Partials are Sass files that are meant to be included in other Sass files. They help you modularize your CSS.

// _reset.scss
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

// main.scss
@import 'reset';

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

Mixins

Mixins allow you to create reusable chunks of CSS that you can include in other selectors.

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { 
  @include border-radius(10px); 
}

Functions

Sass functions allow you to create reusable pieces of code that return values.

@function calculate-rem($size) {
  @return $size / 16px * 1rem;
}

body {
  font-size: calculate-rem(18px);
}

Extends

The @extend directive lets you share a set of CSS properties from one selector to another.

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

Practical Example

Let's create a simple Sass file that demonstrates the use of variables, nesting, mixins, and partials.

Step 1: Create Partials

_variables.scss

$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-stack: Helvetica, sans-serif;

_mixins.scss

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

Step 2: Main Sass File

main.scss

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

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

.container {
  @include flex-center;
  height: 100vh;
  background-color: $secondary-color;

  .content {
    text-align: center;
    padding: 20px;
    background: white;
    border-radius: 10px;
  }
}

Exercise

Task

Create a Sass file that uses variables, nesting, mixins, and partials to style a simple webpage with a header, main content area, and footer.

Solution

_variables.scss

$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-stack: Helvetica, sans-serif;

_mixins.scss

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

main.scss

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

body {
  font-family: $font-stack;
  color: $primary-color;
  margin: 0;
  padding: 0;
}

header, footer {
  background-color: $primary-color;
  color: white;
  padding: 20px;
  text-align: center;
}

main {
  @include flex-center;
  height: calc(100vh - 160px); // Adjust height considering header and footer
  background-color: $secondary-color;

  .content {
    text-align: center;
    padding: 20px;
    background: white;
    border-radius: 10px;
  }
}

Conclusion

In this lesson, you learned the basics of Sass, including variables, nesting, partials, mixins, functions, and extends. These features make your CSS more maintainable and scalable. Practice using these features in your projects to become proficient in Sass.

Sass Basics

Introduction

Key Concepts

Variables

Nesting

Partials and Import

Mixins

Functions

Extends

Practical Example

Step 1: Create Partials

Step 2: Main Sass File

Exercise

Task

Solution

Conclusion

CSS Mastery: From Beginner to Advanced

Module 1: Introduction to CSS

Module 2: Text and Font Styling

Module 3: Box Model and Layout

Module 4: Positioning and Floating

Module 5: Flexbox

Module 6: CSS Grid

Module 7: Advanced CSS Techniques

Module 8: Responsive Design

Module 9: Preprocessors and Frameworks

Module 10: Best Practices and Optimization

Module 11: Project: Building a Responsive Website