Una implementación de Dart de Sass. Sass hace que CSS sea divertido .
Usando Dart Sass
Paquete sass_api
Dart Sass en el navegador
API de JavaScript heredada
Usando Sass con Jest
De Chocolatey o Scoop (Windows)
Desde Homebrew (macOS)
Autónomo
De npm
Desde la taberna
De la fuente
en ventana acoplable
¿Por qué Dardo?
Política de compatibilidad
Compatibilidad del navegador
Compatibilidad con Node.js
CSS no válido
Dardo integrado Sass
Uso
Diferencias de comportamiento de Ruby Sass
Hay algunas formas diferentes de instalar y ejecutar Dart Sass, según su entorno y sus necesidades.
Si utiliza el administrador de paquetes Chocolatey o el administrador de paquetes Scoop para Windows, puede instalar Dart Sass ejecutando
choco instalar descaro
o
primicia instalar descaro
Eso le dará un ejecutable sass
en su línea de comando que ejecutará Dart Sass. Consulte los documentos CLI para obtener más detalles.
Si utiliza el administrador de paquetes Homebrew, puede instalar Dart Sass ejecutando
preparar instalar sass/sass/sass
Eso le dará un ejecutable sass
en su línea de comando que ejecutará Dart Sass.
Puede descargar el archivo Dart Sass independiente para su sistema operativo, que contiene la máquina virtual Dart y la instantánea del ejecutable, desde la página de lanzamiento de GitHub. ¡Extráigalo, agregue el directorio a su ruta, reinicie su terminal y el ejecutable sass
estará listo para ejecutarse!
Dart Sass está disponible, compilado en JavaScript, como un paquete npm. Puede instalarlo globalmente usando npm install -g sass
que proporcionará acceso al ejecutable sass
. También puedes agregarlo a tu proyecto usando npm install --save-dev sass
. Esto proporciona el ejecutable y una biblioteca:
const sass = require('sass');const result = sass.compile(scssFilename);// O// Tenga en cuenta que `compileAsync()` es sustancialmente más lento que `compile()`.const result = await sass.compileAsync( scssFilename);
Consulte el sitio web de Sass para obtener la documentación completa de la API.
El paquete sass
npm también se puede ejecutar directamente en el navegador. Es compatible con todos los principales paquetes web siempre y cuando deshabilites el cambio de nombre (como --keep-names
en esbuild). También puede importarlo directamente desde un navegador como un módulo ECMAScript sin ningún paquete (suponiendo que también se proporcione node_modules
):
<script tipo="importarmapa"> {"importaciones": { "immutable": "./node_modules/immutable/dist/immutable.es.js", "sass": "./node_modules/sass/sass.default.js"} }</script><!-- Admite navegadores como Safari 16.3 sin compatibilidad con mapas de importación. --><script async src="https://unpkg.com/es-module-shims@^1.7.0" crossorigin="anonymous"></script><script type="módulo"> importar * como descaro de 'sass'; console.log(sass.compileString(` .box { ancho: 10px + 15px; } `));</script>
O desde una CDN:
<script tipo="importarmapa"> {"importaciones": { "inmutable": "https://unpkg.com/immutable@^4.0.0", "sass": "https://unpkg.com/sass@^1.63.0/sass.default .js"} }</script><!-- Admite navegadores como Safari 16.3 sin compatibilidad con mapas de importación. --><script async src="https://unpkg.com/es-module-shims@^1.7.0" crossorigin="anonymous"></script><script type="módulo"> importar * como descaro de 'sass'; console.log(sass.compileString(` .box { ancho: 10px + 15px; } `));</script>
O incluso incluido con todas sus dependencias:
<tipo de script="módulo"> importar * como descaro desde 'https://jspm.dev/sass'; console.log(sass.compileString(` .box { ancho: 10px + 15px; } `));</script>
Dado que el navegador no tiene acceso al sistema de archivos, las funciones compile()
y compileAsync()
no están disponibles para él. Si desea cargar otros archivos, deberá pasar un importador personalizado a compileString()
o compileStringAsync()
. La API heredada tampoco es compatible con el navegador.
Dart Sass también admite una API de JavaScript más antigua que es totalmente compatible con Node Sass (con algunas excepciones que se enumeran a continuación), con soporte para las funciones render()
y renderSync()
. Esta API se considera obsoleta y se eliminará en Dart Sass 2.0.0, por lo que debe evitarse en proyectos nuevos.
El soporte de Sass para la API JavaScript heredada tiene las siguientes limitaciones:
Sólo se admiten los valores "expanded"
y "compressed"
de outputStyle
.
Dart Sass no admite la opción precision
. Dart Sass tiene por defecto una precisión suficientemente alta para todos los navegadores existentes, y hacer esto personalizable haría que el código fuera sustancialmente menos eficiente.
Dart Sass no admite la opción sourceComments
. Los mapas de origen son la forma recomendada de localizar el origen de los selectores generados.
Si está utilizando Jest para ejecutar sus pruebas, tenga en cuenta que tiene un error de larga data en el que su entorno de prueba predeterminado interrumpe el operador instanceof
integrado de JavaScript. El paquete JS de Dart Sass utiliza instanceof
de bastante, por lo que para evitar romper Sass necesitarás instalar jest-environment-node-single-context
y agregar testEnvironment: 'jest-environment-node-single-context'
a tu configuración de Jest .
Si es usuario de Dart, puede instalar Dart Sass globalmente usando pub global activate sass
, que proporcionará un ejecutable sass
. También puedes agregarlo a tu pubspec y usarlo como biblioteca. Recomendamos encarecidamente importarlo con el prefijo sass
:
importar 'paquete:sass/sass.dart' como sass;void main(List<String> args) { print(sass.compile(args.first)); }
Consulte los documentos de la API de Dart para obtener más detalles.
sass_api
Los usuarios de Dart también tienen acceso a API más detalladas a través del paquete sass_api
. Esto proporciona acceso a Sass AST y a las API para resolver cargas de Sass sin ejecutar una compilación completa. Está separado en su propio paquete para que pueda aumentar su número de versión independientemente del paquete sass
principal.
Suponiendo que ya hayas consultado este repositorio:
Instalar dardo. Si descarga un archivo manualmente en lugar de utilizar un instalador, asegúrese de que el directorio bin
del SDK esté en su PATH
.
Instale Buf. Esto se utiliza para crear los búferes de protocolo para el compilador integrado.
En este repositorio, ejecute dart pub get
. Esto instalará las dependencias de Dart Sass.
Ejecutar dart run grinder protobuf
. Esto descargará y creará la definición del protocolo integrado.
Ejecute dart bin/sass.dart path/to/file.scss
.
¡Eso es todo!
Puede instalar y ejecutar Dart Sass dentro de Docker usando los siguientes comandos de Dockerfile:
# Dart stageFROM bufbuild/buf AS bufFROM dart:stable AS dart# Agregue sus archivos scssCOPY --from=another_stage /app /app# Incluir protocolo Buffer binarioCOPY --from=buf /usr/local/bin/buf /usr/local/ bin/WORKDIR /dart-sassRUN git clone https://github.com/sass/dart-sass.git. && pub de dardos obtener && dart run Grinder protobuf# Aquí es donde ejecutas sass.dart en tus archivos scss. EJECUTA dart ./bin/sass.dart /app/sass/example.scss /app/public/css/example.css
Dart Sass ha reemplazado a Ruby Sass como la implementación canónica del lenguaje Sass. Elegimos Dart porque presentaba una serie de ventajas:
Es rápido. Dart VM está altamente optimizado y es cada vez más rápido (para obtener las últimas cifras de rendimiento, consulte perf.md
). Es mucho más rápido que Ruby y casi a la par con C++.
Es portátil. Dart VM no tiene dependencias externas y puede compilar aplicaciones en archivos de instantáneas independientes, por lo que podemos distribuir Dart Sass como solo tres archivos (la VM, la instantánea y un script contenedor). Dart también se puede compilar en JavaScript, lo que facilita la distribución de Sass a través de npm, que la mayoría de nuestros usuarios ya utilizan.
Es fácil de escribir. Dart es un lenguaje de nivel superior a C++, lo que significa que no requiere muchos problemas con la administración de memoria y los sistemas de compilación. También es de tipo estático, lo que hace que sea más fácil realizar grandes refactorizaciones con confianza que con Ruby.
Es más amigable para los contribuyentes. Dart es mucho más fácil de aprender que Ruby, y muchos usuarios de Sass en Google en particular ya están familiarizados con él. Más contribuyentes se traduce en un desarrollo más rápido y consistente.
En su mayor parte, Dart Sass sigue versiones semánticas. Consideramos que todo lo siguiente es parte de la API versionada:
La semántica del lenguaje Sass implementada por Dart Sass.
La API de dardos.
La API de JavaScript.
La interfaz de línea de comandos.
Debido a que Dart Sass tiene una única versión que se comparte entre Dart, JavaScript y las distribuciones independientes, esto puede significar que incrementamos el número de versión principal cuando en realidad no hay cambios importantes para una o más distribuciones. Sin embargo, intentaremos limitar la cantidad de cambios importantes que realizamos y agruparlos en la menor cantidad de versiones posible para minimizar la deserción. Recomendamos encarecidamente a los usuarios que utilicen el registro de cambios para comprender completamente todos los cambios en cada versión.
Hay una excepción en la que se pueden realizar cambios importantes fuera de una revisión de versión importante. Ocasionalmente se da el caso de que CSS agregue una característica que de alguna manera es incompatible con la sintaxis Sass existente. Debido a que Sass está comprometido con la compatibilidad total con CSS, ocasionalmente necesitamos romper la compatibilidad con el código antiguo de Sass para seguir siendo compatible con CSS.
En estos casos, primero lanzaremos una versión de Sass que emite advertencias de obsolescencia para cualquier hoja de estilo cuyo comportamiento cambiará. Luego, al menos tres meses después del lanzamiento de una versión con estas advertencias de obsolescencia, lanzaremos una versión menor con el cambio importante en la semántica del lenguaje Sass.
En general, consideramos que cualquier cambio en la salida CSS de Dart Sass que provocaría que ese CSS dejara de funcionar en un navegador real es un cambio importante. Sin embargo, hay algunos casos en los que un cambio de este tipo tendría beneficios sustanciales y sólo afectaría negativamente a una pequeña minoría de navegadores poco utilizados. No queremos tener que bloquear dicho cambio en el lanzamiento de una versión principal.
Como tal, si un cambio afectaría la compatibilidad con menos del 2 % de la cuota de mercado global de navegadores según StatCounter GlobalStats, podríamos lanzar una versión menor de Dart Sass con ese cambio.
Consideramos que dejar de admitir una versión determinada de Node.js es un cambio importante siempre que esa versión siga siendo compatible con Node.js. Esto significa que las versiones figuran como Actual, LTS activa o LTS de mantenimiento según la página de versiones de Node.js. Una vez que una versión de Node.js queda fuera de LTS, Dart Sass se considera libre de interrumpir el soporte si es necesario.
Los cambios en el comportamiento de las hojas de estilo Sass que producen resultados CSS no válidos no se consideran cambios importantes. Estos cambios casi siempre son necesarios cuando se agrega soporte para nuevas funciones CSS, y retrasar todas esas funciones hasta una nueva versión principal sería excesivamente oneroso para la mayoría de los usuarios.
Por ejemplo, cuando Sass comenzó a analizar expresiones calc()
, la expresión no válida calc(1 +)
se convirtió en un error de Sass donde antes se pasaba tal cual. Esto no se consideró un cambio importante, porque para empezar, calc(1 +)
nunca fue un CSS válido.
Dart Sass incluye una implementación del lado del compilador del protocolo Embedded Sass. Está diseñado para integrarse en un lenguaje anfitrión, que luego expone una API para que los usuarios invoquen Sass y definan funciones e importadores personalizados.
sass --embedded
inicia el compilador integrado y escucha en stdin.
sass --embedded --version
imprime versionResponse
con id = 0
en JSON y sale.
El indicador de línea de comandos --embedded
no está disponible cuando instala Dart Sass como un paquete npm. No se admiten otros indicadores de línea de comandos con --embedded
.
Existen algunas diferencias de comportamiento intencionales entre Dart Sass y Ruby Sass. Estos son generalmente lugares donde Ruby Sass tiene un comportamiento no deseado, y es sustancialmente más fácil implementar el comportamiento correcto que implementar un comportamiento compatible. Todos estos deberían tener errores de seguimiento en Ruby Sass para actualizar el comportamiento de referencia.
@extend
solo acepta selectores simples, al igual que el segundo argumento de selector-extend()
. Ver número 1599.
Los selectores de temas no son compatibles. Ver número 1126.
Los argumentos del pseudoselector se analizan como <declaration-value>
en lugar de tener un análisis personalizado más limitado. Consulte el número 2120.
La precisión numérica se establece en 10. Consulte el problema 1122.
El analizador de sintaxis con sangría es más flexible: no requiere una sangría consistente en todo el documento. Consulte el número 2176.
Los colores no admiten la aritmética canal por canal. Consulte el número 2144.
Los números sin unidades no son ==
para números unitarios con el mismo valor. Además, las claves del mapa siguen la misma lógica que ==
-equality. Ver número 1496.
Los valores alfa rgba()
y hsla()
con unidades porcentuales se interpretan como porcentajes. Otras unidades están prohibidas. Ver número 1525.
Pasar demasiados argumentos variables a una función es un error. Ver número 1408.
Permita que @extend
llegue fuera de una consulta de medios si hay un @extend
idéntico definido fuera de esa consulta. Esto no se rastrea explícitamente porque será irrelevante cuando se solucione el problema 1050.
Algunos pseudos selectores que contienen selectores de marcador de posición se compilarán donde no estarían en Ruby Sass. Esto coincide mejor con la semántica de los selectores en cuestión y es más eficiente. Consulte el número 2228.
La sintaxis antigua :property value
no se admite en la sintaxis sangrada. Consulte el número 2245.
El combinador de referencia no es compatible. Ver número 303.
La unificación del selector universal es simétrica. Consulte el número 2247.
@extend
no produce un error si coincide pero no logra unificarse. Consulte el número 2250.
Actualmente, Dart Sass solo admite documentos UTF-8. Nos gustaría admitir más, pero Dart actualmente no los admite. Consulte dart-lang/sdk#11744, por ejemplo.
Descargo de responsabilidad: este no es un producto oficial de Google.