The Complete Guide To SCSS/SASS

Image for post
Image for post
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

Image for post
Image for post

Superset

Variables

Image for post
Image for post
Image for post
Image for post

Nested Rules

Image for post
Image for post
Image for post
Image for post
Sassy scope nesting looks less repetitious.

The & character

Image for post
Image for post
Image for post
Image for post

Mixins

Image for post
Image for post

Multiple Browsers Example

Image for post
Image for post
Image for post
Image for post

Arithmetic Operators

Addition

Image for post
Image for post

Subtraction

Image for post
Image for post

Multiplication

Image for post
Image for post

Division

Image for post
Image for post
Image for post
Image for post

Remainder

Image for post
Image for post
Creating Zebra stripes.
Image for post
Image for post
Image for post
Image for post

Comparison Operators

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Logical Operators

Image for post
Image for post
Image for post
Image for post

Strings

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Control-Flow Statements

if()

Image for post
Image for post

@if

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Checking If Parent Exists

Image for post
Image for post

@for

Image for post
Image for post
Image for post
Image for post

@each

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Sass Functions

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Sass Trigonometry

Writing your own functions in Sass

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Oscillator Animation

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

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