> Faqs > Quitar variables Sass y sustituir por variables CSS

Quitar variables Sass y sustituir por variables CSS

Después de un tiempo prefiero no usar Sass y me gustaría migrar a CSS. El primer paso es quitar las variables de Sass y ponerlas con CSS estándar.

Cómo quitar las variables Sass y sustituirlas por variables estándar CSS (Custom CSS Properties). En un proceso automático que no me lleve mucho tiempo.

Respuestas

Este script de Node hace lo que deseo:

const fs = require('fs');
const path = require('path');
const { globSync } = require('glob');  // Desestructuración obligatoria en v10+ [web:48]

const [, , varName] = process.argv;
if (!varName) {
  console.error('Uso: node removevar.cjs <nombre-variable> ej: background-color');
  process.exit(1);
}

const sassVar = `$${varName}`;
const cssVar = `var(--${varName})`;
const pattern = new RegExp(`(?<!\\w)\\$${varName}([\\s;}\\),])`, 'g');

console.log(sassVar);
const files = globSync('**/*.scss', {
  cwd: process.cwd(),
  ignore: 'node_modules/**',
  dot: false
});

console.log(`${files.length} archivos .scss encontrados.`);

if (files.length === 0) process.exit(0);

let totalReplaced = 0;
files.forEach(file => {
  const fullPath = path.join(process.cwd(), file);
  const content = fs.readFileSync(fullPath, 'utf8');
  const matches = [...content.matchAll(pattern)].length;
  if (matches === 0) return;

  const newContent = content.replace(pattern, `var(--${varName})$1`);
  fs.writeFileSync(fullPath, newContent, 'utf8');
  console.log(`Reemplazados ${matches} en ${file}`);
  totalReplaced += matches;
});

console.log(`\n¡Listo! Total: ${totalReplaced} reemplazos.`);

Para que funcione hay que instalar dependencias:

npm init -y && npm i glob

Luego lo usas así:

node replace-sass.js background-color

Siendo background-color la variable que quieres quitar $background-color y la sustituye por var(--background-color)

Ese módulo de node debe ser ejecutado desde donde tienes los archivos que deseas modificar. Modifica esa carpeta y todas las carpetas que haya dentro, de manera recursiva, cambiando todas las variables scss a código css estándar.

Miguel Angel
3455 152 220 17