Learn SCSS by Examples
Sass 3.x+SCSS (Sassy CSS) is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). It adds power and elegance to the basic language.
These examples cover the core features of SCSS, including variables, nesting, mixins, and control directives, which help write more maintainable and scalable CSS.
Variables
Storing reusable values throughout stylesheets with this sample code demonstrating variable declaration using dollar sign syntax, global and local scope rules, and how variables compile away into regular CSS values.
Nesting
Mirroring HTML hierarchy in stylesheets with this code example showing nested selector syntax, parent selector reference using ampersand, pseudo-class nesting, and how nested rules compile to descendant selectors in CSS.
Mixins
Creating reusable CSS declaration blocks with this code example demonstrating mixin definition using @mixin directive, parameterized mixins with arguments, mixin inclusion with @include, and vendor prefix automation.
Functions
Computing values with custom and built-in functions through this sample code showing function definition with @function directive, @return statements, built-in color manipulation functions, and function invocation in property values.
Inheritance
Sharing styles between selectors with this code example demonstrating @extend directive for selector inheritance, how extended selectors are grouped in compiled CSS, and style override patterns for inherited properties.
Placeholders
Defining silent selectors for extension-only styles with this sample code showing placeholder syntax using percent sign, how placeholders are excluded from compiled CSS unless extended, and efficient style sharing patterns.
Imports
Organizing stylesheets into modular files with this code example demonstrating partial files using underscore prefix, @import directive for file inclusion, modern @use rule with namespacing, and module system architecture.
Operators
Performing calculations in stylesheets with this sample code demonstrating arithmetic operators for addition, subtraction, multiplication, division, modulo operations, unit compatibility rules, and string concatenation.
Conditionals
Adding logic to stylesheets with this code example showing @if, @else if, and @else directives for conditional compilation, comparison operators, logical operators, and compile-time conditional CSS generation.
Loops
Generating repetitive CSS programmatically with this sample code demonstrating @for loop with through and to keywords, @each loop for list iteration, @each with maps for key-value pairs, and interpolation syntax for dynamic selectors.