Style your own lemonade stand's website by compiling Sass and learning to use variables and nests.

Your First Sass Stylesheet

Sass can't be directly interpreted by your browser, so it must first be converted, or _compiled_, to CSS before the browser can directly understand it.

_Compiling_ refers to converting code to lower level code so that it can be executed. By compiling SCSS to CSS, it can be interpreted by your browser and the results will appear on a webpage.

Before we dive into writing Sass, let's first learn how to compile it to CSS by typing the following command in the terminal and pressing enter: 

```bash
sass main.scss main.css
```

The `sass` command above takes in two arguments: 

1. The input (**main.scss**) 
2. The location of where to place that output (**main.css**)

Make sure to look closely at the extensions of each file in the command above.

Compiling Sass

_Variables_ in SCSS allow you to assign an identifier of your choice to a specific value. 

Why is that useful?  Unlike in CSS, if you need to tweak a value, you'll only have to update it in one place and the change will be reflected in multiple rules.

In Sass, `$` is used to define and reference a variable:

```scss
$translucent-white: rgba(255,255,255,0.3);
```

**Note:** It's important to stick to one naming convention for variables when you first build out your codebase. This will help you reference them easily in the future. 

Variables In Sass

Let's get started! Sass has many perks that enable us to write succinct, readable code. In this lesson we will explore three concepts:

+ Variables
+ Mixins
+ Nests

In the process, you'll use Sass to style your very own website for a lemonade stand.

Sass: Overview

There are different _data types_ you can assign to a variable in CSS.

In addition to the _color_ data type we have seen, there are also:

1. _Numbers_, such as `8.11`, `12`, and  `10px`. Notice that while `10` has a unit of `px` associated with it, it is still considered a number.

2. _Strings_ of text, with and without quotes. Some examples are `"potato"`, `'tomato'`, `span`.

3. _Booleans_, or simply `true` and `false`.

4. _null_, which is considered an empty value.

Sass(y) Types

**Sass**, or Syntactically Awesome Style Sheets, is an extension language for CSS. With Sass, you can write clean, sustainable CSS code and solve the common repetition and maintenance challenges present in traditional CSS.

In addition to being a valuable skill for any front-end developer, transitioning from CSS to Sass is pretty smooth due to the familiar syntax. For this reason, we will be learning the  **SCSS** (Sassy CSS) syntax.

If you are new to HTML and CSS, we recommend you take our [Learn HTML](https://www.codecademy.com/learn/learn-html) and [Learn CSS](https://www.codecademy.com/learn/learn-css) courses first.

Why Sass?

Congrats, you've written your first nested selectors! 

In SCSS, nesting is not limited only to selectors. You can also nest common CSS properties if you append a `:` colon suffix after the name of the property. 

For example, the following SCSS code:

```scss
.parent {
  font : {
    family: Roboto, sans-serif;
    size: 12px;
    decoration: none;
  }
}
```

will compile to the following CSS:

 ```css
.parent {
  font-family: Roboto, sans-serif;
  font-size: 12px;
  font-decoration: none;
}
```

Nesting Properties

The first Sass construct we will learn about is _nesting_. 

_Nesting_ is the process of placing selectors inside the _scope_ of another selector: 

- In programming, a variable's scope is the context in which a variable is defined and available to use. 

- In Sass, it's helpful to think of the scope of a selector as any of the code between its opening `{` and closing `}` curly brackets. 
 
- Selectors that are _nested_ inside the scope of another selector are referred to as _children_. The former selector is referred to as the _parent_. This is just like the relationship observed in HTML elements.


```scss
.parent {
  color: blue;
  .child {
    font-size: 12px;
  }
}
```

In the example above `.child` is the child selector and `.parent` is the parent selector.

The above SCSS would compile to the following, equivalent CSS:

```css
.parent {
  color: blue;
}

.parent .child {
    font-size: 12px;
}
```

Nesting allows you to see the clear DOM relationship between two selectors while also removing the repetition observed in CSS.

Nesting Selectors

In addition to color, numbers, strings, booleans, and null, Sass also has two other data types, _lists_ and _maps_.

* _Lists_ can be separated by either spaces or commas. For example, the following list denotes font properties, such as: 

```scss
1.5em Helvetica bold;
``` 

or 

```scss
Helvetica, Arial, sans-serif;
```

**Note:** You can also surround a list with parentheses and create lists made up of lists.

* _Maps_ are very similar to lists, but instead each object is a key-value pair. The typical map looks like:

```scss
(key1: value1, key2: value2);
```

**Note:** In a map, the value of a key can be a list or another map.

Maps & Lists

Congratulations! You completed your first Sass StyleSheet and learned some powerful new concepts:

1\. **Nesting** is the process of placing child selectors and properties in the scope of a parent selector. This allows a programmer to draw DOM relationships and avoid repetition.

2\. **Variables** make it easy to update code and reference values by allowing you to assign an identifier to a value.

3\. Sass **Data Types** include:

* Numbers 
* Strings
* Booleans
* null
* Lists
* Maps

Nesting and variables are just two ways that Sass keeps stylesheets clean. In the next unit, you'll learn about other Sass constructs that serve the same purpose.