SCSS (Sassy CSS) is a CSS preprocessor, an extension of the syntax of CSS, and one of Sass (Syntactically Awesome Style Sheets) syntaxes. Files using SCSS syntax have the .scss extension.
SCSS syntax is in many ways similar to that of CSS: both use braces, semi-colons, the same sign for variables ($), and the same assignment sign (:). However, SCSS offers more options: nesting CSS selectors, making imports without creating HTTP requests, using mixins and extends. But first things first.
How to Install SCSS
To install SCSS, you need just two things — Ruby and the command line.
1. Install Ruby
Ruby is the programming language Sass is built on. You can download the Ruby Installer on the website rubyinstaller.org/downloads. Go to the “Without Devkit” section and look for the newest version with “x64” on it. Then run the installer and follow the setup steps.
2. Install Sass using the command line (CMD)
To open the CMD, press Windows Key + R, type ”CMD” (if needed) and press Enter. Once the command prompt is open, type the following command: gem install sass, like this:
Microsoft Windows [Version 10.0.17763.437]
(c) 2018 Microsoft Corporation. All rights reserved.
C:\Users\Shark>gem install sass
Then hit Enter and wait for Sass to be installed. It will take a few seconds. When it’s done, your command prompt will look like this:
Microsoft Windows [Version 10.0.17763.437]
(c) 2018 Microsoft Corporation. All rights reserved.
C:\Users\Shark>gem install sass
Successfully installed sass-3.7.3
1 gem installed
Installing ri documentation for sass-3.7.3…
Installing RDoc documentation for sass-3.7.3…
C:\Users\Shark>_
That’s it! Sass is now installed on your computer.
How to Compile SCSS
Since browsers don’t understand SCSS, you need to compile .scss files to .css files. There are several ways to do it. Here you’ll find just two: 1) with the help of the CMD and 2) with an Atom package.
How to Compile SCSS Using the CMD
To compile SCSS with the help of the command line, follow these steps:
1. Create a folder and create inside of it a file with .scss extension.
2. Type “cd” and the folder’s location (or drag & drop the folder) in the command line and press Enter:
C:\Users\Shark>cd C:\Users\Shark\Documents\Sample
3. Make Sass watch your SCSS file. You can watch and output to directories by using folder paths as your input and output, and separating them with a colon. To do so, type the following command in the CMD:
sass --watch scss:css
Your CMD should look like this:
C:\Users\Shark>cd C:\Users\Shark\Documents\Sample
C:\Users\Shark\Documents\Sample>sass --watch scss:css
>>> Sass is watching for changes. Press Ctrl-C to stop.
Sass would watch all files in the scss folder for changes, and compile CSS to the css folder.
4. Type some SCSS code in the .scss file and watch Sass compile it into a .css file.
How to Compile SCSS if You Use Atom as Your CSS Editor
To compile SCSS by installing an Atom package, follow these steps:
1. Install Node.js. Go to the website nodejs.org, download Node.js files on your computer and run the setup.
2. Install node-sass. Type in the CMD the following command: npm install node-sass -g:
C:\Users\Shark>npm install node-sass -g
3. Install sass-autocompile package for Atom. Go to this page — atom.io/packages/sass-autocompile — and hit the button “Install”. Once you do it, your .scss file will be automatically compiled to a .css file every time you save it.
SCSS File Structure
SCSS allows splitting the code over several files without impacting performance. You put rules for each component and layout element into its own file and create different files for fonts, variables, and mixins. It helps to make your code easier to maintain and reuse.
Below is an example of how your file architecture can look like:
css/
|
|-- helpers/ // Special files
| |-- _variables.scss
| |-- _mixins.scss
|
|-- base/ // Base files
| |-- _reset.scss
| |-- _grid.scss
| |-- _fonts.scss
|
|-- layout/ // Files with page elements’ styles
| |-- _header.scss
| |-- _navigation.scss
| |-- _footer.scss
| |-- _sidebar.scss
| |-- _form.scss
|
|-- components/ // Smaller components’ styles
| |-- _buttons.scss
| |-- _dropdown.scss
| |-- _popup.scss
| |-- _carousel.scss
|
|–- pages/ // Page specific styles
| |–- _home.scss
| |–- _contact.scss
| |–- _about.scss
|
|– vendors/ // Vendors’ files (Bootstrap, jQuery UI, etc.)
| |–- _bootstrap.scss
| |–- _jquery-ui.scss
|
'- main.scss // Main SCSS file where you import all other SCSS files
Pay attention: all your SCSS files (except for the main SCSS file with imports) should start with an underscore symbol (“_”). Otherwise, all SCSS files would be duplicated with compiled CSS files.
The main SCSS file (its name should not start with an underscore symbol) includes only imports of all other SCSS files. It may look like this:
@import 'helpers/variables'; // The file with variables should be imported first
@import 'helpers/mixins'; // The file with mixins should come after the variables but before other files
@import 'base/reset';
@import 'base/grid';
@import 'base/fonts';
@import 'layout/header';
@import 'layout/navigation';
@import 'layout/footer';
@import 'layout/sidebar';
@import 'layout/form';
@import 'components/buttons';
@import 'components/dropdown';
@import 'components/popup';
@import 'components/carousel';
@import 'pages/home';
@import 'pages/contact';
@import 'pages/about';
@import 'vendors/bootstrap';
@import 'vendors/jquery-ui';
For the sake of readability, you’d better omit file extensions and underscores in the main file. Also, use one file per import, one @import per line, and add a new line after the last import from a folder.
SCSS Syntax
SCSS syntax is pretty straightforward. To start using it, it’s enough for you to know about just four basic things: nesting, variables, extends, and mixins.
Nesting
Sass allows CSS rules to be nested within one another. The inner rule only applies within the outer parent’s selector. For example:
main {
width: 60%;
margin: 0 auto;
.article {
background-color: #fff;
}
h1 {
text-align: center;
}
}
It’s the same thing as creating separate rules for main .article and main h1 elements. By nesting elements, SCSS syntax makes the code much simpler and more readable.
It’s recommended to have a maximum of 2 or 3 levels of nesting (like in the example above) and 50 lines maximum. Otherwise, your code risks getting less readable, not easy to reuse, and too reliant on HTML structure.
Also, you can write pseudo-classes in a much less repetitive way using the ampersand (&):
.button {
color: #000;
&:hover {
color: #fff;
}
}
The ampersand is also useful when employing a naming methodology (i. e. BEM) which uses classes with a dash or underscore:
.menu {
&__item {}
&__logo {}
}
It’s compiled to:
.menu {}
.menu__item {}
.menu__logo {}
Variables
Variables allow reusing styles without having to copy them over and over again. Use a variable if the value is repeated at least twice and is likely to be updated at least once. To declare a variable, use a dollar sign ($):
$color-font: #333;
After that, you can call this variable anywhere in the SCSS files of your project:
color: $color-font;
SCSS allows creating multiple variables or maps. For instance, you can create a nested map to define breakpoints:
$breakpoints: (
'small': 320px,
'medium': 768px,
'large': 1200px,
);
To style the element for the specific breakpoint, use the following syntax:
@media (min-width: map-get($breakpoints, medium)) {
// Here goes your code which will be applied for devices with the width 768px or more
}
Variables are usually lowercase and hyphen-delimited. For instance, “$font-main”, “$color-highlight”.
Extends
Extends make it possible to extend styles of one selector to the styles of another one. You can only extend properties of elements with a similar functionality (e. g., buttons, titles, elements of a form, etc.). For example:
h1 {
font-family: 'Calibri', sans-serif;
color: #333;
}
h2 {
@extend h1;
border-bottom: 1px solid #222;
}
h3 {
@extend h1;
padding-bottom: 15px;
}
h2 and h3 have the same font-family and color properties but have their own border-bottom and padding-bottom properties.
If two or more properties repeat several times in your code for a reason, you can group them using a percentage symbol (%) and then extend these properties:
%title {
font-family: 'Calibri', sans-serif;
color: #333;
}
h1 {
@extend %title;
}
h2 {
@extend %title;
border-top: 1px solid #222;
}
Keep in mind that you may not @extend an outer selector from within @media.
Mixins
Mixins allow defining styles that can be reused throughout the stylesheet. If you find a group of CSS properties that always appear together for a reason, you can put them in a mixin.
For example, you can use this mixin to center a block element without having to worry about if there is any top or bottom margin already applied:
@mixin push-auto {
margin: {
left: auto;
right: auto;
}
}
.box {
@include push-auto;
}
You can also combine mixins with variables, like the below example shows:
$style1: 100%, 50px, #7eb4e2;
$style2: (background: #f69ec4, width: 100%, height: 100px);
@mixin box($width, $height, $background) {
width: $width;
height: $height;
background-color: $background;
}
.left {
@include box($style1...);
}
.right {
@include box($style2...);
}
This is the minimum you should know about SCSS. If you want more, visit this website: sass-lang.com/documentation.