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;
}

html {
  font-size: 14px;
}

body {
  font-family: Verdana, sans-serif;
  line-height: 1.5;
}

h1 {
  color: #cf649a;
}

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

    
<main>
    <h1>Sass</h1>
    <p><a href="https://sass-lang.com/">Sass</a> (short for Syntactically Awesome Style Sheets) is a preprocessor scripting language that is interpreted or
        compiled into Cascading Style Sheets (CSS).</p>
    <p>Sass exists in 2 syntax variants:</p>
    <ul>
        <li>The original syntax, called "the indented syntax," uses indentation to separate
            code blocks and newline characters to separate rules.
        </li>
        <li>The newer syntax, "SCSS" (Sassy CSS), uses block
            formatting like that of CSS. It uses braces to denote code blocks and semicolons to separate rules within a
            block.
        </li>
    </ul>
    <p>The indented syntax and SCSS files are traditionally given the extensions .sass and .scss, respectively.</p>
</main>
<footer>
    <p>Based on the information found on <a
            href="https://en.wikipedia.org/wiki/Sass_(stylesheet_language)">Wikipedia</a>, The Free Encyclopedia.
        Retrieved January 19, 2021.
    </p>
</footer>

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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: $fontsize;
}

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

main, footer {
  padding: 0 1rem;
}

h1 {
  color: $sasscolor;
  background-color: inherit;
}

h1, p, ul {
  margin-bottom: 1rem;
}

li {
  margin-left: 2rem;
}

• 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"
}

• 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.