Archived video

This video is archived and won't be updated. We're keeping it online for now as a courtesy.

Sass Variables

Video loading...

Transcripts: 
Transcript file: 
f3497dc1-5236-42ad-8a44-85fed5cbb2c1---eng.srt
Transcript language code: 
eng

Join Drupalize.Me to watch this video

Join today and gain instant access to our entire video library.

Log in Sign up
  • 0:05
    One of the biggest advantages to using Sass is the ability to reuse your code.
  • 0:10
    The simplest way to do that in Sass is to use variables.
  • 0:14
    So a variable is simply giving a name to something
  • 0:17
    and then assigning it a value that should be printed out in that name's place.
  • 0:21
    So for example, let's say we a standard color blue that we always wanted to use on our site.
  • 0:26
    We can create a variable with the name blue, and then we can assign it
  • 0:31
    a hex value for that color that we want to use.
  • 0:35
    Then we use the word blue throughout all of our code.
  • 0:37
    This comes in handy when, let's say, we want to change that shade of blue.
  • 0:42
    Instead of having to go back and individually find all of those instances of that color,

Learning Sass and Compass

Loading ...

Sass Variables

Loading...
16 minutes 6 seconds // HDCC //

One of the big advantages to using Sass is being able to reuse code. The simplest form of this is using variables. Variables in Sass work just like they do in other scripting languages. You simply assign a value to a variable name and then you can use that variable name anywhere you like. This is super helpful for doing things like defining the hex value for the color "blue" and then you can use the name "blue" wherever you want to use that hex value. This makes it easy to update that value in one place instead of having to find every instance of it and update all of them.

Additional resources: 

Sass Operations Documentation