The Complete Guide To SCSS/SASS

In this tutorial Sassy, Sass and SCSS will refer to roughly the same thing. Conceptually, there isn’t much difference. You will learn the difference as you learn more, but basically SCSS is the one most people use now. It’s just a more recent (and according to some, superior) version of the original Sass syntax.

Let’s Begin!

Sass Pre-Processor

New Syntax

Prerequisites

Superset

Variables

Nested Rules

Sassy scope nesting looks less repetitious.

The & character

Mixins

Multiple Browsers Example

Arithmetic Operators

Addition

Subtraction

Multiplication

Division

Remainder

Creating Zebra stripes.

Comparison Operators

Logical Operators

Strings

Control-Flow Statements

if()

@if

Checking If Parent Exists

@for

@each

Sass Functions

Sass Trigonometry

Writing your own functions in Sass

Oscillator Animation

Check out CSS Visual Dictionary — a visual atlas of all CSS properties

Issues. Every webdev has them. Published author of CSS Visual Dictionary https://amzn.to/2JMWQP3 few others…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store