Ubuntu 16.04 / Cómo instalar Sass

Para instalar Ruby Sass heredado en Ubuntu 16.04, puede usar el paquete ruby-sass desde APT o la gema sass desde RubyGems. Sin embargo, Ruby Sass es una implementación descontinuada, por lo que solo debe considerarse al reproducir proyectos existentes, y para nuevos entornos de desarrollo, utilice un sistema operativo actualmente soportado y Dart Sass. Instalar mediante gem tampoco instala la última versión de Dart Sass.

Verifique la implementación y el soporte del sistema operativo antes de instalar

Sass es una herramienta que convierte hojas de estilo escritas con variables y reglas anidadas en CSS (Hojas de Estilo en Cascada). SCSS es una sintaxis de Sass similar a CSS que usa llaves, y la extensión del archivo es .scss. Incluso con el mismo nombre de comando sass, Ruby Sass y Dart Sass son implementaciones diferentes.

Según la guía oficial de Sass, Ruby Sass llegó al final de su soporte en 2019. Ubuntu 16.04 también ha terminado tanto su soporte estándar como el Mantenimiento de Seguridad Ampliado (ESM), y en octubre de 2026, el soporte de seguridad adicional requiere verificar las condiciones del servicio complementario Legacy de Ubuntu Pro. El alcance del soporte del sistema operativo se puede encontrar en la guía de Ubuntu 16.04 de Canonical.

Primero, realice una copia de seguridad de su código fuente y CSS existente, y verifique las implementaciones y versiones utilizadas en el proyecto en Gemfile.lock, package.json, etc. Los dos métodos antiguos de instalación a continuación son alternativas, por lo que no es necesario instalar ambos.

Instale Ruby Sass heredado con APT

Para reproducir el paquete de distribución usado en Ubuntu 16.04, verifique en la terminal en el siguiente orden. Necesita una cuenta que pueda ejecutar sudo y acceso a un repositorio APT que funcione correctamente.

sudo apt update
apt-cache policy ruby-sass
sudo apt install ruby-sass
sass --version

El campo Candidate en apt-cache policy muestra la versión del paquete seleccionada para la instalación. Si no hay candidatos o si la actualización falla, no asuma que la instalación es posible; primero verifique la configuración del repositorio, la red y el estado de soporte del entorno. No agregue arbitrariamente un repositorio ni desactive la verificación de firma solo porque no se pueda encontrar un paquete.

Después de la instalación, se debería mostrar la versión de Sass. La versión del paquete de distribución puede diferir de la versión del gem, y Sass 3.4.23 (Selective Steve) de publicaciones anteriores es un ejemplo de salida pasada. El resultado actual de la instalación no necesariamente tiene que coincidir con esa cadena.

Instale la versión heredada requerida con RubyGems

Este es un método para revisar cuando un proyecto existente requiere la gema Ruby Sass. A continuación, se muestra un ejemplo especificando 3.7.4, y si el proyecto requiere una versión diferente, dé prioridad a ese requisito. Información sobre Sass 3.7.4 en RubyGems indica que se requiere Ruby 2.0.0 o superior, pero esta condición por sí sola no significa que todas las gemas dependientes puedan instalarse en versiones más antiguas de Ruby.

sudo apt update
sudo apt install ruby
ruby --version
gem --version
gem install --user-install sass -v 3.7.4 --no-document

--user-install es una opción para instalarlo en el directorio de gemas del usuario en lugar de a nivel del sistema. Si aparece una advertencia que indica que no se puede encontrar el ejecutable, siga la guía de instalación por usuario de RubyGems y agregue el bin del directorio a su PATH. En Bash, puede aplicar el siguiente comando en su terminal actual y luego verificar.

export PATH="$(ruby -r rubygems -e 'print Gem.user_dir')/bin:$PATH"
sass --version

Si esta es una configuración que continuará usando, añada la línea export anterior a ~/.bashrc una vez y compruébela en un nuevo terminal. Para revertir, elimine la línea añadida y vuelva a abrir el terminal. Si la instalación falla, verifique las gemas dependientes y la versión de Ruby que se muestran en el error, y reproduzca el entorno basado en el archivo de bloqueo almacenado en el proyecto y el entorno en ese momento. No deshabilite la verificación HTTPS para resolver errores de certificado o TLS.

Verifique la instalación convirtiendo SCSS a CSS

Solo imprimir la versión no confirma la conversión real. En una carpeta de trabajo vacía separada, cree un archivo style.scss y guarde todo el contenido a continuación. En una carpeta con archivos existentes, primero asegúrese de que no haya conflicto con los nombres de archivos de ejemplo existentes.

$brand: #336699;

.notice {
  color: $brand;
  strong {
    font-weight: 700;
  }
}

Ejecutar el siguiente comando en esa carpeta generará style.css.

sass style.scss style.css

El CSS generado debe contener los selectores y valores a continuación. Dependiendo de la implementación y de la configuración del formato de salida, los espacios, saltos de línea o comentarios del mapa de origen pueden variar.

.notice {
  color: #336699;
}

.notice strong {
  font-weight: 700;
}

Cambie los valores de color y convierta nuevamente para ver si los valores en el CSS cambian, confirmando la relación entre los archivos de entrada y salida. Volviendo a los valores originales y ejecutando de nuevo, se restaurará el estado del ejemplo. La conversión de Sass es el proceso de crear archivos CSS, y para aplicarlo en una página web, necesita cargar el CSS de salida en el HTML correspondiente.

Cuando los comandos entran en conflicto o se necesita revertir la instalación

Si sass: command not found aparece después de la instalación, verifique si la instalación fue exitosa y revise el PATH. Si aparece una versión diferente a la esperada, vea qué ejecutable se selecciona primero, ya sea instalado mediante APT, gem del usuario u otra herramienta.

command -v sass
type -a sass
sass --version

Colocar el bin de la gem del usuario al frente del PATH puede dar prioridad a ese comando. En entornos con instalaciones duplicadas mediante APT y gem, no solo mire el número de versión; también registre la ruta. En lugar de eliminar archivos arbitrariamente, elimínelos usando la herramienta de gestión utilizada para la instalación.

• Para revertir una instalación de APT, use sudo apt remove ruby-sass. Antes de ejecutar, lea la lista de elementos que se eliminarán y asegúrese de que no estén en uso por otros proyectos.
• Para eliminar la gema de usuario en el ejemplo anterior, use gem uninstall --user-install sass -v 3.7.4. No es necesario eliminar otras versiones o dependencias compartidas en masa.
• Si el error es causado por una sintaxis moderna de SCSS incompatible, simplemente reinstalar puede no resolverlo. Compile con la implementación requerida por el proyecto, o revise el código para cambiar a Dart Sass.

Cambie a Dart Sass en un nuevo entorno

La implementación de referencia actual de Sass es Dart Sass. La documentación oficial de instalación le guía para instalar una distribución independiente o una instalación npm adecuada para su sistema operativo y CPU. El ejemplo de npm en esta sección debe ejecutarse en un entorno de desarrollo separado preparado con sistemas operativos compatibles y el Node.js requerido por la versión correspondiente de Sass, y no asume la ejecución en el Node.js predeterminado de Ubuntu 16.04.

Una vez que Node.js y npm estén listos, puede instalar dependencias de desarrollo específicas del proyecto en una nueva carpeta de proyecto con el siguiente comando. Al aplicarlo a un proyecto existente, primero realice una copia de seguridad de package.json y del archivo lock, luego verifique la configuración de compilación existente.

npm init -y
npm install --save-dev sass
npx sass --version
npx sass style.scss style.css

Antes de ejecutar el último comando, debe guardar el style.scss de la sección anterior en la misma carpeta. npx sass utilice el Sass local del proyecto instalado mediante este procedimiento y puede diferir del comando y la versión global de sass. Puede verificar el resultado de la instalación con npm ls sass y el CSS generado. Las dependencias de desarrollo añadidas en este ejemplo se pueden eliminar con npm uninstall --save-dev sass.

Al transferir un proyecto antiguo, compare los resultados de la conversión en una rama de prueba o copia, y revise las diferencias y advertencias de CSS antes de aplicarlas. Puede consultar el comando y las opciones para la conversión de un solo archivo en la documentación de línea de comandos de Dart Sass . Instalar Ruby Sass y cambiar al Dart Sass actual son tareas separadas.