Version Comparison
Feature
v1.38
v3.49
v123456
Color Functions
Basic
Basic + HSL
Full HSL + RGB
Full HSL + RGB + CMYK
Nesting Syntax
Basic
Basic + Placeholder
Full Selector Nesting
Full Nested Selectors
Output Style
Uncompressed
Uncompressed
Expanded
Compressed
CSS Modules
No
No
Partial Support
Full Support
Migration Steps
1. Install New Version
Replace your current SASS compiler with the latest version:
npm uninstall sass
npm install sass@123456
2. Update Configuration
If using custom configurations, update your sass.config file:
// sass.config.js
module.exports = {
includePaths: ['styles'],
precision: 10,
functions: {
'addition($n1, $n2)': 'return $n1 + $n2;'
}
}
3. Review Code Changes
Use the deprecation checker for old syntax:
sass --check-deps src/
Common Migration Issues
Error: Unexpected token
Replace deprecated syntax like:
// Old
.rounded($radius)
// New
@function rounded($radius) { ... }
Warning: Missing Function
Import the new standard library functions:
@import 'color'
@import 'functions'
Example Upgrade
Old Code
$primary: blue
.box
width: 200px
height: 200px
background: $primary
New Code
$primary: #3b82f6
.box
width: 50% + 150px
height: calc(#{2rem * 2})
background: darken($primary, 10%)