Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
// ── What SASS/SCSS looks like vs plain CSS ─────────────────────────────────── // 1. SASS variables (compile-time, replaced by value in output) $brand-color : #3498db; $font-stack : 'Helvetica Neue', Helvetica, sans-serif; $base-radius : 4px; // 2. Nesting (mirrors HTML hierarchy) nav { background: $brand-color; ul { margin : 0; padding : 0; list-style: none; } li { display: inline-block; } a { color : #fff; padding : 0.5rem 1rem; text-decoration: none; &:hover { text-decoration: underline; } } } // 3. The above compiles to clean, flat CSS: // nav { background: #3498db; } // nav ul { margin: 0; padding: 0; list-style: none; } // nav li { display: inline-block; } // nav a { color: #fff; padding: 0.5rem 1rem; text-decoration: none; } // nav a:hover { text-decoration: underline; }
Result
Open