# Variables

Variables are defined by using the $ symbol
Like in any other programming language, you define/declare the variables first, after which you can use them in your Sass code
- A variable declaration looks like a property declaration: $variable: value;

$sasscolor: #cf649a;
$fontstack: Verdana, sans-serif;
$fontsize: 14px;

html {
  font-size: $fontsize;
}

body {
  font-family: $fontstack;
  line-height: 1.5;
}

h1 {
  color: $sasscolor;
}
 
        Copied!

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

READING TIP

Sass documentation: Variables (opens new window)

# Example 1A

REMARKS

The Sass examples in this course will be provided through embedded CodePens where possible
All examples can also be downloaded (sass-examples.zip) to experiment locally with them
- All examples have the same folder structure: the (main) Sass file scss/style.scss should be compiled to dist/css/style.css, as the latter is the CSS file which is linked to in the HTML page dist/index.html

# CodePen

In the embedded version, you can view the HTML code (tab 'HTML' in left pane) and Sass code (tab 'SCSS' in left pane)
If you want to see what the compiled CSS looks like, click on 'EDIT ON CODEPEN' in the top right corner
- After the CodePen window has opened, click on the right arrow in the top right corner of the CSS Editor to view the compiled CSS (and vice versa)
- If there is an error in the Sass code, click on the red exclamation mark shown in the bottom right corner to show additional error information

# Locally (using commands)

After extracting the files in sass-examples.zip, open the folder sass-examples in PhpStorm
Start live-server in a terminal
- In the corresponding browser window, a simple index page (with a list of links to all the examples) is shown
- Click on 'Example 1A' and the first example opens in a new browser tab
  - The page is unstyled because our Sass code (example1A/scss/style.scss) is not compiled yet, and thus, we link in example1A/index.html to a non-existing style sheet example1A/css/style.css
Open a second terminal (and change the folder to sass-examples/example1A). Compile the Sass code (in the file scss/style.scss) to CSS code (in the file dist/css/style.css) by using one of the commands
- sass scss/style.scss dist/css/style.css --watch
- sass scss:dist/css --watch
- If there is an error in the Sass code, additional error information is shown in the terminal window

# Locally (using npm scripts)

Within the project, you can also find the file package.json:

{
  "name": "sass-examples",
  "version": "",
  "description": "1ITF, Webdesign Advanced, Sass examples",
  "main": "",
  "scripts": {
    "watch": "live-server --port=8090",
    "example1A": "cd ./example1A && sass scss:dist/css --watch",
    "example1B": "cd ./example1B && sass scss:dist/css --watch",
    "example1C": "cd ./example1C && sass scss:dist/css --watch",
    "example1D": "cd ./example1D && sass scss:dist/css --watch",
    "example1E": "cd ./example1E && sass scss:dist/css --watch",
    "example2": "cd ./example2 && sass scss:dist/css --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
 
        Copied!

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

In this file, several scripts are defined:
- a script watch (line 7) to start live-server
- scripts example... (lines 8-13) to change the directory to the directory of the specific example and to start the Sass compilation (of the corresponding SCSS code)
These scripts can be launched
- using the the commands npm run <script-name> in a terminal window (in the project folder sass-examples)
- by double-clicking the corresponding scripts in the npm tool window (right-click within the editor window of package.json and choose Show npm Scripts)
- by clicking on the arrow ▶ before the scripts

REMARK

When examining the folder example1A/dist/css after compilation, you will notice the occurence of a file style.css.map. For now, you can ignore this file. It will become important when dividing our Sass code into different partials.

.map file