SCSS Roadmap
20 sections • 354 topics
- 1. SCSS vs Sass Syntax - Differences and Usage
- Example: SCSS vs Sass comparison
- 2. Nesting Rules and Selector Specificity
- Example: Proper nesting with depth limit
- 3. Parent Selector (&) - Pseudo-classes and BEM Patterns
- Example: Parent selector (&) patterns
- 4. Property Nesting and Shorthand Syntax
- Example: Property nesting examples
- 5. Comments (// single-line vs /* */ multi-line)
- Example: Comment types and usage
- Silent Comments (//)
- Loud Comments (/* */)
- 6. File Extensions (.scss vs .sass) and @import Conventions
- Example: File structure and import conventions
- 1. Variable Declaration ($variable: value) Syntax
- Example: Variable declaration and usage
- 2. Variable Scope (global, local, !global flag)
- Example: Variable scope demonstration
- 3. Variable Interpolation #{ } Syntax
- Example: Variable interpolation patterns
- 4. Default Values (!default flag) and Overrides
- Example: !default flag usage
- 5. Data Types (numbers, strings, colors, booleans, lists, maps, null)
- Example: Variable data types
- Type Checking Functions
- Null Behavior
- 6. CSS Custom Properties (--var) vs SCSS Variables ($var)
- Example: SCSS variables vs CSS custom properties
- When to Use Which?
- 1. List Creation and Manipulation (comma, space-separated)
- Example: List creation patterns
- 2. List Functions (nth(), length(), append(), join(), index())
- Example: List function usage
- 3. Map Creation ($map: (key: value)) and Operations
- Example: Map creation and structure
- 4. Map Functions (map-get(), map-merge(), map-remove(), map-keys(), map-values())
- Example: Map function operations
- 5. Multi-dimensional Lists and Nested Maps
- Example: Multi-dimensional data structures
- Example: Map Pattern
- Example: List of Maps Pattern
- 6. List and Map Iteration with @each and @for Loops
- Example: Iteration patterns
- Iteration Best Practices
- 1. Mixin Definition (@mixin name { }) Syntax
- Example: Mixin definitions
- 2. Mixin Inclusion (@include name) Usage
- Example: Mixin inclusion patterns
- 3. Mixin Arguments ($param: default) and Parameters
- Example: Argument patterns and defaults
- 4. Variadic Arguments ($args...) and Rest Parameters
- Example: Variadic arguments and rest parameters
- 5. Content Blocks (@content directive) for Flexible Mixins
- Example: @content directive patterns
- Example: Without @content
- Example: With @content
- 6. Dynamic Mixin Libraries and Utility Patterns
- Example: Dynamic mixin patterns
- Mixin Best Practices
- 1. Custom Function Definition (@function name() { @return })
- Example: Custom function basics
- 2. Function Arguments ($param) and @return Values
- Example: Advanced function arguments
- 3. Color Functions (lighten(), darken(), mix(), adjust-hue())
- Example: Color manipulation functions
- 4. Math Functions (abs(), ceil(), floor(), round(), min(), max())
- Example: Math function applications
- 5. String Functions (quote(), unquote(), str-length(), to-upper-case())
- Example: String manipulation
- 6. Type Checking (type-of(), unit(), unitless(), comparable())
- Example: Type checking and validation
- Function Best Practices
- 1. @if, @else if, @else Conditional Statements
- Example: Conditional statements in action
- 2. @for Loop ($i from 1 through 10) Syntax
- Example: @for loop applications
- 3. @each Loop ($item in $list) for Iteration
- Example: @each loop patterns
- 4. @while Loop for Complex Iterations
- Example: @while loop use cases
- 5. Conditional Logic Patterns and Performance
- Example: Best practices demonstration
- 6. Dynamic CSS Generation with Control Directives
- Example: Complete utility generation system
- Control Flow Summary
- 1. %Placeholder Selectors (%name) and Silent Classes
- Example: Placeholder selectors in practice
- 2. @extend Directive and Inheritance Chains
- Example: @extend directive usage
- 3. @extend vs @include - Performance and Output Comparison
- Example: Output size comparison
- When to Use Each
- 4. Multiple Inheritance (@extend %class1, %class2) Patterns
- Example: Multiple inheritance patterns
- 5. @extend Limitations and Anti-patterns
- Example: Common anti-patterns and solutions
- 6. Modern Alternatives (@mixin, CSS custom properties)
- Example: Modern alternatives in practice
- Extends Summary and Recommendations
- 1. @use Directive ('file' as namespace) for Module Import
- Example: Basic @use directive
- 2. @forward Directive for Module Re-export
- Example: @forward for module organization
- 3. Module Namespaces (@use 'file' as *) and Aliasing
- Example: Namespace and aliasing patterns
- 4. Private Members ($_variable, @mixin _name) and Encapsulation
- Example: Private members and encapsulation
- 5. Module Configuration (@use 'file' with ($var: value))
- Example: Module configuration patterns
- 6. Migration from @import to @use/@forward
- Example: Migration guide and patterns
- Module System Best Practices
- 1. sass:color Module (adjust(), scale(), change())
- Example: sass:color module usage
- 2. sass:list Module (nth(), join(), append(), zip())
- Example: sass:list module operations
- 3. sass:map Module (get(), merge(), deep-merge())
- Example: sass:map module utilities
- 4. sass:math Module (div(), percentage(), clamp())
- Example: sass:math module calculations
- 5. sass:meta Module (type-of(), inspect(), keywords())
- Example: sass:meta reflection and introspection
- 6. sass:selector Module (append(), extend(), parse())
- Example: sass:selector manipulation
- 7. sass:string Module (quote(), slice(), insert())
- Example: sass:string processing
- Built-in Modules Summary
- 1. Arithmetic Operators (+, -, *, math.div(), %)
- Example: Arithmetic operations
- 2. Comparison Operators (==, !=,
- Example: Comparison operations
- 3. Boolean Operators (and, or, not) for Conditionals
- Example: Boolean logic
- 4. String Concatenation (+) and Interpolation #{ }
- Example: String operations and interpolation
- 5. Color Operations (color + color, color * number)
- Example: Color arithmetic (legacy)
- 6. Unit Conversion and calc() Calculations
- Example: Unit operations and conversions
- Operators Summary
- 1. Deep Nesting Patterns and BEM Methodology Integration
- Example: BEM methodology with SCSS
- 2. Selector Functions (selector-append(), selector-nest())
- Example: Dynamic selector generation
- 3. Pseudo-class Nesting (&:hover, &:focus, &::before)
- Example: Pseudo-selector patterns
- 4. Media Query Nesting (@media inside selectors)
- Example: Responsive design with nested media queries
- 5. Keyframe (@keyframes) Animation Nesting
- Example: Keyframe animations in SCSS
- 6. At-rule Nesting (@supports, @container) for Modern CSS
- Example: At-rule nesting and layout systems
- Advanced Nesting Summary
- 1. Partial Files (_filename.scss) and Underscore Convention
- Example: Partial files organization
- 2. Import Order (@use order) and Dependency Management
- Example: Proper import order
- 3. File Structure Patterns (7-1 Architecture, ITCSS)
- Example: 7-1 Architecture pattern
- 4. Index Files (_index.scss) and Barrel Exports
- Example: Index files and barrel patterns
- 5. Dynamic Imports and Conditional @use Loading
- Example: Conditional and dynamic imports
- 6. Glob Patterns and Bulk Imports (with build tools)
- Example: Bulk import strategies
- File Organization Summary
- 1. Breakpoint Maps ($breakpoints) and Responsive Mixins
- Example: Comprehensive breakpoint system
- 2. Mobile-first vs Desktop-first @media Strategies
- Example: Mobile-first vs Desktop-first comparison
- 3. Container Queries (@container) Integration
- Example: Modern container queries
- 4. Responsive Typography (clamp(), fluid type scale)
- Example: Fluid responsive typography
- 5. Responsive Grid Systems and Layout Mixins
- Example: Responsive grid systems
- 6. Print Media (@media print) and Alternative Types
- Example: Print styles and alternative media
- Responsive Design Summary
- 1. Color Palette Maps ($colors) and Theme Variables
- Example: Comprehensive color palette system
- Example: Advanced nested theme structure
- 2. Color Scheme Generation (sass:color functions)
- Example: Automatic color scheme generators
- Example: Material Design-style palette generator
- 3. Dark Mode (@media prefers-color-scheme) Implementation
- Example: CSS custom properties approach (recommended)
- Example: SCSS mixin-based theme system
- Example: Advanced dark mode with elevation
- 4. Accessibility Color Contrast (WCAG AA/AAA) Functions
- Example: Contrast ratio calculation and validation
- Example: Auto-adjust colors for accessibility
- Example: Accessibility validation mixin
- 5. Dynamic Color Manipulation (adjust(), scale())
- Example: Advanced color manipulation utilities
- Example: Color harmony and relationship functions
- Example: State color generation
- 6. Design Tokens and Design System Integration
- Example: Three-tier token system
- Example: Design system integration with Style Dictionary
- Example: Multi-brand token system
- Example: Token documentation generator
- Color Management Best Practices
- 1. Output Styles (compressed, expanded, compact, nested)
- Example: CLI output style configuration
- Example: Package.json scripts configuration
- Example: Node.js API configuration
- 2. Source Maps (--source-map) Generation and Debugging
- Example: Source map configuration for different environments
- Example: Webpack sass-loader configuration
- Example: Browser DevTools debugging workflow
- 3. Build Tools (Webpack sass-loader, Vite, Parcel) Integration
- Example: Vite configuration (recommended for modern projects)
- Example: Webpack 5 comprehensive configuration
- Example: Parcel zero-config setup
- Example: esbuild plugin configuration (fastest build)
- 4. Compilation Speed (Dart Sass vs LibSass) Optimization
- Example: Migration to @use for better performance
- Example: Webpack caching configuration
- Example: Optimized file structure for fast compilation
- 5. CSS Output Size Reduction and Tree Shaking
- Example: Placeholder selectors for size optimization
- Example: PurgeCSS integration for unused CSS removal
- Example: Complete optimization pipeline
- 6. Watch Mode (--watch) and Live Reloading
- Example: Sass CLI watch mode
- Example: Vite with HMR (Hot Module Replacement)
- Example: Browser-sync with Sass watching
- Example: Custom watch script with live reload
- Performance Optimization Summary
- 1. @debug Directive for Development Logging
- Example: Basic debugging with @debug
- Example: Advanced debugging techniques
- Example: Debug breakpoint in compilation
- 2. @warn Directive for Deprecation Warnings
- Example: Deprecation warnings
- Example: Value validation warnings
- Example: Configuration and environment warnings
- 3. @error Directive for Custom Error Messages
- Example: Parameter validation with @error
- Example: Range and value validation
- Example: Configuration and dependency validation
- 4. Stack Trace Reading and Error Resolution
- Example: Reading a typical Sass error
- Example: Understanding nested stack traces
- Example: Common error patterns and solutions
- 5. Debugging Tools (VS Code, DevTools) Integration
- Example: Chrome DevTools debugging workflow
- Example: VS Code SCSS debugging setup
- Example: Source map debugging techniques
- 6. Common SCSS Compilation Errors and Fixes
- Example: Error prevention patterns
- Example: Debugging helpers library
- Example: Error recovery strategies
- Error Handling Best Practices
- 1. Grid Template Generation (@for loops, grid-template)
- Example: Generate grid column classes
- Example: Advanced grid template generation
- Example: Complex grid area templates
- 2. Flexbox Utility Mixins (flex-center, flex-between)
- Example: Comprehensive flexbox utility library
- Example: Advanced flexbox patterns
- Example: Flexbox utility class generator
- 3. Layout Component Mixins (card, sidebar, hero)
- Example: Essential layout component mixins
- Example: Grid-based layout components
- Example: Complex layout patterns
- 4. Responsive Layout Mixins with @media Queries
- Example: Responsive auto-grid (RAM pattern)
- Example: Responsive flex patterns
- Example: Grid template area reorganization
- 5. CSS Subgrid (grid-template-rows: subgrid) Support
- Example: CSS Subgrid implementation
- Example: Advanced grid techniques
- Example: Complex grid patterns
- 6. Container Queries (@container) and Intrinsic Design
- Example: Container query patterns
- Example: Container query component library
- Example: Intrinsic sizing patterns
- Grid and Flexbox Integration Summary
- 1. @keyframes Mixins and Animation Libraries
- Example: Basic keyframe animation mixins
- Example: Animation library with mixin helpers
- Example: Advanced animation library patterns
- 2. Dynamic Animation Generation (@each, animation maps)
- Example: Map-based animation system
- Example: Timing function and duration scales
- Example: Complex animation sequences with maps
- 3. Transition Mixins (transition: all 0.3s ease)
- Example: Transition utility mixins
- Example: Timing function library with presets
- Example: Advanced transition patterns
- 4. Transform Utilities (rotate(), scale(), translate())
- Example: Transform utility mixins
- Example: Complex transform combinations
- Example: Transform animation sequences
- 5. Animation State Management with Classes
- Example: Animation state control mixins
- Example: Animation orchestration
- Example: Event-driven animation states
- 6. Performance-optimized Animations (GPU-accelerated)
- Example: GPU-accelerated animations
- Example: Accessibility and reduced motion
- Example: Performance monitoring and optimization
- Animation Best Practices
- 1. Bootstrap 5 SCSS Customization (variables, mixins)
- Example: Bootstrap customization setup
- Example: Selective Bootstrap imports for smaller bundles
- Example: Advanced Bootstrap customization patterns
- 2. Foundation Framework SCSS Integration
- Example: Foundation customization setup
- Example: Foundation XY Grid customization
- Example: Foundation Motion UI integration
- 3. CSS-in-JS (Emotion, styled-components) Compatibility
- Example: SCSS utilities for CSS-in-JS migration
- Example: Styled Components with SCSS mixins
- Example: Migrating SCSS utilities to CSS-in-JS
- 4. Component Styling (React CSS Modules, Vue scoped, Angular)
- Example: React with CSS Modules and SCSS
- Example: Vue Single File Component with SCSS
- Example: Angular component styling with SCSS
- 5. Styled Components vs SCSS - Use Cases
- Example: Same component in SCSS vs Styled Components
- Example: Performance considerations
- 6. Design Tokens (Style Dictionary, Theo) Integration
- Example: Style Dictionary configuration
- Example: Advanced token transformations
- Example: Semantic tokens and theming
- Framework Integration Summary
- 1. Linting (stylelint-scss plugin) Configuration
- Example: Complete stylelint configuration for SCSS
- Example: Custom stylelint rules for team standards
- Example: Stylelint ignore patterns and overrides
- 2. Prettier Formatting (prettier-plugin-sass) Setup
- Example: Prettier configuration for SCSS
- Example: EditorConfig for consistent formatting
- Example: Integration with stylelint and Prettier
- 3. VS Code Extensions (Sass, SCSS IntelliSense)
- Example: VS Code workspace settings for SCSS
- Example: Recommended VS Code extensions list
- Example: Custom VS Code snippets for SCSS
- 4. Git Hooks (husky, lint-staged) and Pre-commit
- Example: Husky and lint-staged setup
- Example: Advanced pre-commit workflow
- Example: Custom validation scripts
- 5. CI/CD Pipeline Integration (GitHub Actions, GitLab CI)
- Example: GitHub Actions workflow
- Example: GitLab CI pipeline
- Example: Build optimization and caching
- 6. Package Managers (npm install sass, yarn, pnpm)
- Example: Complete package.json for SCSS project
- Example: pnpm workspace configuration
- Example: Monorepo with Yarn workspaces
- Development Workflow Best Practices