Convertir CSS to Sass/SCSS
Sass extends CSS con variables, nesting, mixins, y funciones. Convertir plain CSS a SCSS a iniciar usando these características incrementally.
- 1
SCSS is a superset of CSS — any valid CSS is valid SCSS. The conversion is trivial syntactically, but the value is in refactoring: extract repeated values into variables, nest selectors, create mixins for reusable patterns. SCSS uses braces and semicolons like CSS; Sass (indented syntax) uses indentation only.
- 2 Formateador CSS →
Formatear the CSS before converting to SCSS. Consistent formatting makes it easier to identify patterns for refactoring: repeated colors, spacing values, and selector prefixes. Format also catches syntax errors.
- 3
Refactoring steps after conversion: (1) Extract repeated values into $variables ($primary-color, $spacing-unit). (2) Nest related selectors (.card { .title { } .body { } }). (3) Create @mixin for repeated patterns (@mixin flex-center { display: flex; align-items: center; justify-content: center; }). (4) Use @include to apply mixins. (5) Use @import or @use to split into partials.
Preguntas frecuentes
- SCSS vs Sass syntax?
- SCSS uses braces {} and semicolons ; like CSS — easier to learn, compatible with CSS. Sass uses indentation (no braces, no semicolons) — more concise but different from CSS. Use SCSS for CSS compatibility and team familiarity; use Sass for conciseness.
- Is Sass still relevant with CSS custom properties?
- CSS custom properties (variables) handle many use cases, but Sass still offers mixins, functions, loops, and build-time optimization that CSS cannot. Use CSS custom properties for runtime theming and Sass for build-time logic and code organization.