# Basic Syntax

# Variables

Variables in Sass act like containers for storing values, which is a concept you're already familiar with from Python. Here's what you need to know:

Variables can store any CSS value, such as colors, font stacks, etc.
These values can be reused throughout your stylesheet.
All Sass variables start with a $ symbol.

Example code:

$text-color: #F04C25;
$background-color: #00283C;
$border-radius: 15px;

article {
    text-color: $text-color;
    background-color: $background-color;
    border-radius: $border-radius;
    margin: 0;
    padding: 20px;
}

1
2
3
4
5
6
7
8
9
10
11

# Nesting

Nesting in Sass is just like nesting in HTML. It provides several advantages:

Organizes your code by reflecting the hierarchy of HTML elements.
Increases readability by clearly displaying the relationships between styles and HTML elements.
Saves time by avoiding the need to write repetitive selectors.

In this example, you can see how Sass allows you to nest ul inside nav, li inside ul, and so on, making your code cleaner and easier to read.

nav {
  background-color: #333;
  
  ul {
    list-style: none;
    
    li {
      display: inline-block;
      
      a {
        text-decoration: none;
        color: white;
      }
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# Example

Let's look at an example that demonstrates nesting, while also using a variable for color.

# Nesting with Hover Effect

You already know that Sass allows for easy nesting of styles, though some aspects like hover effects can seem a bit trickier at first. Nesting hover effects in Sass still streamlines your code and keeps related styles close together. This example illustrates how to use the &:hover syntax in Sass to nest hover effects.

TIP

The & lets us put the hover effect right inside the .button section by referencing the parent selector. This makes it turn into a .button:hover in CSS, showing the hover effect.

# Partials

Partials in Sass are like submodules of your stylesheets. Here are some key points:

A partial is a Sass file you can include in other Sass files.
It helps modularize your CSS and makes it easier to maintain.
To create a partial, simply name a Sass file with a leading underscore _.
The underscore signals to Sass that the file is a partial and shouldn't be converted into a CSS file.

TIP

When importing a partial file into another Sass file, use the @import directive. There's no need to include the file extension .scss or the leading underscore.

# Example

WARNING

Partials may seem unnecessary at first, but they're invaluable for managing and organizing your stylesheets as your project grows. Their correct usage can greatly enhance your coding efficiency!