This workshop (and everyone else, ever) actually uses SCSS, referred to on the website as 'Sassy CSS'. Sass was the original syntax, SCSS is the new version.
The terms 'Sass' and 'SCSS' will be used interchangeably throughout this tutorial to refer to 'SCSS'. More on this Stackoverflow post
Updated 17/5/2020
- Your want to be able to manage and organise stylesheets for your projects as they get larger
- You are getting tired of finding and replacing repeated css values, such as colours
- You like DRYer code, and techniques that allow you to write it
- You know a few programming features (e.g. arrays, loops, conditional statements), and feel you could apply them to writing css in a more efficient way
- You want to be able to use ui libraries such as Material UI, which use SCSS to work
- You want to prime yourself to use technologies such as React Styled Components, which borrow concepts and syntax used in SCSS
- This workshop comes from the Martin Bagshaw, who probably wasn't using SCSS to it's full potential at the time, and since has become a React developer, more or less.
- This tutorial therefore serves as an overview of some of the basics of SCSS to get you started and please, don't blame the author if things go wrong.
- This contains no solutions files, just a few tips and code examples to help you along the way.
For this workshop, we will be taking a plain css file, and refactoring it to be compiled with scss.
With each step, don't go too crazy, just sample the feature. Some are more useful than others.
+ Tasks can be found highlighted in green textBefore we proceed you should bear in mind the following points:
Sass is a css preprocessor. This means that styling is still controlled by a css file, which sass compiles as you edit your scss files. You still link your css file in your html as you always have done.
Sass extends the functionality of css. Valid css is valid sass.
- The Watch Command
- Partials (and imports)
- Comments in sass
- Nesting
- Use of the ampersand (&)
- a) In referencing variations of the same element (or with a similar name)
- b) In referencing the parent element
- Variables
- Extends and Placeholders
- Mixins
- Interpolation
- For loops
1. Clone the project
2. Install Sass. I personally run a standalone version of sass that I installed a long time ago. There is now a node version, which also may be of interest.
3. Split up the css. Looking at the starting css, decide which parts might logically split off into separate files. For example:
- reset
- typography
- forms
- header
- etc...
4. Partials and Imports:
a) Copy and paste the different parts of the css into new partial files. These are declared by starting the filename with an underscore, e.g. _forms.scss.
A file structure might be:
css/
- style.css (this file is empty to start with)
scss/
- style.scss (this file compiles to style.css)
- _reset.scss
- _variables.scss
- _base.scss
- _nav.scss
...b) Create a file to import partial files, e.g. style.scss. This file will compile the partials to css in the next step.
An import file might contain:
@import "./reset.scss";
@import "./variables.scss";
@import "./base.scss";
@import "./nav.scss";NOTE: Use of the
@importrule has, since the writing of this tutorial, been discouraged by the maintainers of Sass, as it imports everything globally. The@userule is now favoured over@import
5. Watch Command:
Go to your terminal, and run the sass --watch command, to compile your partial files into one style.css file:
sass --watch scss/style.scss:css/style.cssYou will see the terminal respond to changes as you edit your scss, with green text if css is compiling ok, and red text if it is erroring. To stop compiling, press ctrl + c.
Nice! Time for a tea break
With your css split up into logical partials, it's time to get sassy. First things first...
1. Comments: To write comments in scss, you can also use double forward slashes, as you do in JavaScript. If it don't work, tell others what you are trying to achieve. If it does, still tell them!
\\ this is a one line comment
\*
this is a multi-
line
comment.
*\+ Your Task: Write some comments2. Nesting:
In scss, you can nest child elements within parent elements. For example: before:
ul {
list-style: none;
}
ul li {
line-height: 2;
}
ul li a {
font-size: 1.5rem;
font-weight: bold;
text-decoration: none;
color: red;
}after:
ul {
list-style: none;
li {
line-height: 2;
}
a {
font-size: 1.5rem;
font-weight: bold;
text-decoration: none;
color: red;
}
}+ Your Task: Nest some Sass3. Using the Ampersand: (&)
Also known as the parent selector Parent selector: documentation
a) In referencing variations of the same element or similarly named classes The Ampersand can be used to chain css selectors together, such as:
- multiple classes on one element
- psuedo classes
- classes that begin with the same text (a common pattern in the BEM, or Block Element Modifier style)
For example this:
.profile {
background-color: white;
}
.profile-details {
width: 60%;
margin: 1rem 0 2rem;
padding: 1rem;
border-radius: 0.5rem;
background-color: skyblue;
}
.profile-item {
font-size: 1.5rem;
color: white;
}
.profile-item:hover {
border-bottom: 2px solid;
}
.profile-item.red {
color: red;
}
.profile-item.red:hover {
color: dark-red;
}Would become this (with a bit of nesting):
.profile {
background-color: white;
&-details {
width: 60%;
margin: 1rem 0 2rem;
padding: 1rem;
border-radius: 0.5rem;
background-color: skyblue;
}
&-item {
font-size: 1.5rem;
color: white;
&:hover {
border-bottom: 2px solid;
}
&.red {
color: red;
&:hover {
color: dark-red;
}
}
}
}
+Your Task: Use the ampersand to chain selectors togetherb) In referencing the parent element You can use the ampersand after the selector to style an element based on it's context. For example this:
.heading {
.enter-details & {
color: skyblue;
}
}...would compile to this:
.enter-details .heading {
color: skyblue;
}**Your Task**: Use the ampersand to style an element based on it's context / parent selector
Phew! Time for another tea break.
1. Variables:
Sass variables can make it easier to keep track of repeated css values, such as colours, fonts, gradients, icons, and shadows. A common way to organise variables is to group them together in a _partial file, then import the variables partial at the top of your file.
You can declare and use sass variables like so:
$light-black: #363636;
$font-main: 'Mukta', sans-serif;h1 {
color: $light-black;
font-family: $font-main;
}
+ Your Task: Make a new partial with some useful variables, and apply them to the rest of your scss partialsMore useful things you can do with colour variables can be found here
2. Extends and Placeholders:
An extend extends the styles (css property: value pairs) of an element like so:
.heading {
font-size: 3rem;
color: black;
line-height: 1.5;
}
h2 {
@extend .heading;
// you can add styles specific to h2 element here...
}...will compile to:
.heading {
font-size: 3rem;
color: black;
line-height: 1.5;
}
h2 {
font-size: 3rem;
color: black;
line-height: 1.5;
/* extra styles can be compiled to here */
}A placeholder will work in exactly the same way, but not output the original css. A placeholder is generated with a % sign like so:
%heading {
font-size: 3rem;
color: black;
line-height: 1.5;
}
h2 {
@extend %heading;
}...will compile to:
h2 {
font-size: 3rem;
color: black;
line-height: 1.5;
}+Your Task: Try out `@extend` combined with placeholders3. Mixins
Imagine you have:
- Multiple styles of heading: different font sizes, weights, colours and line heights.
- Three styles of button: One which includes an icon, one which includes an unusual hover transition, and one which is pretty plain.
Mixins are ideal for this situation. They are like a cookie-cutter, or constructor function for your css, taking in values (perhaps in the form of variables), and outputting css.
Though extends and placeholders are useful, mixins do tend to have the edge over them most of the time.
SCSS Mixin Example:
@mixin header($sm-size, $lg-size, $line){
font-size: $sm-size;
font-weight: $bold;
line-height: $line;
margin: 0 0 1rem;
@media only screen and (min-width: 600px) {
font-size: $lg-size;
}
@content;
}
h1 {
@include header(2rem, 3.25rem, 1.6);
text-align: center;
}here, the @content directive allows you to pass extra styles to an element when using a mixin
Resulting CSS:
h1 {
font-size: 2rem;
font-weight: 700;
line-height: 1.6;
margin: 0 0 1rem;
text-align: center;
}
@media only screen and (min-width: 600px) {
h1 {
font-size: 3.25rem;
}
}+Your Task: Write an `@mixin`, and include it in mulitple places with `@include`
Time for tea, Bertie!
1. Interpolation:
Interpolation is simply string concatenation. In this case, we are making css selectors from arguments you enter into mixins. This is very similar to the template literal / backtick syntax in es6+ JavaScript.
For example, in a button mixin:
// variables from another partial
$green: #1f7736;
$green-hover: #0ed642;
$yellow: #fcbc00;
$yellow-hover: #b98b00;
...etc
// the mixin
@mixin btnColour($name, $colour, $hover){
&.#{$name} {
background-color: $colour;
&:hover,
&:focus {
background-color: $hover;
}
}
}
// and it's application:
.button-submit {
/*
... default button styles to go here
*/
@include btnColour('login', $green, $green-hover);
@include btnColour('logout', $yellow, $yellow-hover);
@include btnColour('date-sort', $green, $green-hover);
@include btnColour('history', $blue, $blue-hover );
}
And the resulting css:
.button-submit.login {
background-color: #1f7736;
}
.button-submit.login:hover,
.button-submit.login:focus {
background-color: #0ed642;
}
.button-submit.logout {
background-color: #fcbc00;
}
.button-submit.logout:hover,
.button-submit.logout:focus {
background-color: #b98b00;
}
... you get the idea2. For loops:
So you like mixins, but think they are overkill for the task at hand. Say you have a dashboard and have a load of labels, each with different background colours. With the mixin, you would end up doing an @include for each version of the label. Not very DRY. ☔
Enter the for loop:
// variables from another partial
$red: #e34c26;
$yellow: #f1e05a;
$blue: #40b1dc;
$green: #1f7736;
$languages : 'english', 'spanish', 'french', 'german';
$colour_codes : $red, $yellow, $blue, $green;
@for $i from 1 through length($languages) {
.label.#{nth($languages, $i)} {
background-color : nth($colour_codes, $i);
color: white;
padding: 0.2rem;
}
}Note: the above uses an array-like structure called a Sass list
This will output the following css:
.label.english {
background-color: #e34c26;
color: white;
padding: 0.2rem;
}
.label.spanish {
background-color: #f1e05a;
color: white;
padding: 0.2rem;
}
...etc
You got the Sass