for - Escapar{y% en SASS

sass to css

Question

Estoy construyendo una hoja de estilo que se cargará en HubSpot CMS, y esperaba desarrollar el archivo CSS localmente usando SASS para acelerar mi codificación. Me encuentro con dificultades porque el archivo de salida debe incluir algunas etiquetas de plantilla propietarias especificadas por el CMS.

En particular, necesito que mi archivo CSS generado incluya una línea como esta:

{% include "hubspot/styles/responsive/required_base.css" %}

He intentado todo lo que se me ocurre para generar el { y el % caracteres, pero SASS me da errores sin importar lo que hago, ya que esos son caracteres especiales en SASS.

¿Hay alguna manera de escapar de una línea de código o de caracteres individuales, por lo que SASS no intentará procesarlos?

Answer 1

No es bonito de ninguna manera, pero lo hice funcionar. Tendrás comentarios vacíos a los lados.

$inc: ''*/{% include "hubspot/styles/responsive/required_base.css" %}/*'';
/*#{$inc}*/

Productos:

/**/{% include "hubspot/styles/responsive/required_base.css" %}/**/

Aquí hay una demostración: http://sassmeister.com/gist/19651edf94cf1158037f

Aquí está en forma mixin si lo vas a hacer mucho:

@mixin raw ($string) {
  $string: ''*/#{$string}/*'';
  /*#{$string}*/
}

@include raw(''{% include "hubspot/styles/responsive/required_base.css" %}'');

y una pequeña demostración para esto también: http://sassmeister.com/gist/50caee499ff4fe8f63c7

Si está utilizando algún tipo de herramienta de compilación, probablemente sería mejor agregarla al CSS en sí. Algo como https://github.com/godaddy/gulp-header