The Complete Guide to SCSS/SASS

Let’s Begin!

  1. Nested Rules: Nest your CSS properties within multiple sets of {} brackets. This makes your CSS code a bit more clean-looking and more intuitive.
  2. Variables: Standard CSS has variable definitions. So what’s the deal? You can do a lot more with Sass variables: iterate them via a for-loop and generate property values dynamically. You can embed them into CSS property names themselves. It’s useful for property-name-N { … } definitions.
  3. Better Operators: You can add, subtract, multiply and divide CSS values. Sure the original CSS implements this via calc() but in Sass you don’t have to use calc() and the implementation is slightly more intuitive.
  4. Functions: Sass lets you create CSS definitions as reusable functions. Speaking of which…
  5. Trigonometry: Among many of its basic features (+, -, *, /), SCSS allows you to write your own functions. You can write your own sine and cosine (trigonometry) functions entirely using just the Sass/SCSS syntax just like you would in other languages such as JavaScript. Some trigonometry knowledge will be required. But basically, think of sine and cosine as mathematical values that help us calculate the motion of circular progress bars or create animated wave effects, for example.
  6. Code Flow and Control Statements: You can write CSS using familiar code-flow and control statements such as for-loops, while-loops, if-else statements similar to another languages. But don’t be fooled, Sass still results in standard CSS in the end. It only controls how property and values are generated. It’s not a real-time language. Only a pre-processor.
  7. Mixins. Create a set of CSS properties once and reuse them or “mix” together with any new definitions. In practice, you can use mixins to create separate themes for the same layout, for example.

Sass Pre-Processor

New Syntax

Prerequisites

  • SASS (.sass) Syntactically Awesome Style Sheets.
  • SCSS (.scss) Sassy Cascading Style Sheets.
Convert files between .scss and .sass formats using Sass pre-processor command sass-convert.

Superset

Variables

Basic $variable definitions
Sass $variables can be assigned to any CSS property

Nested Rules

Nesting with standard CSS
Nested Rules - Sassy scope nesting looks less repetitious.

The & character

Usage of & character directive
Result - SCSS converted to CSS

Mixins

Mixins

Multiple Browsers Example

Browser-agnostic @mixin for specifying angle of rotation.
Rotate in compliance with all browsers.

Arithmetic Operators

Addition

Adding values without using calc() function

Subtraction

Subtracting different type of values

Multiplication

Multiplication and Division

Division

Remainder

Creating Zebra stripes.
HTML source code for this mixin experiment.
Zebra stripe generated by the zebra mixin.

Comparison Operators

Comparison Operators
Comparison operators in action.
Result of the conditional spacing mixin

Logical Operators

Logical Operators.
Using Sass Logical Operators

Strings

Combining regular CSS property values with Sass/SCSS strings.
This example will not work.
This example will not work, either. Solution?
Strings containing spaces must be wrapped in quotes.
Adding multiple strings.
Adding numbers and strings.

Control-Flow Statements

if()

@if

Example of using a single if-statement and an if-else combo.

Checking If Parent Exists

@for

for-loop iterating over 5 items.

Conclusion

--

--

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