visual-studio - scss - visual studio code sass
Cómo usar Sass en Visual Studio 2013 (11)
¿Cómo puedo usar el preprocesador Sass CSS en Visual Studio 2013 ? ¿Hay alguna extensión que brinde soporte para Sass?
Actualización 2 de Visual Studio 2013
Visual Studio 2013 Update 2 tiene compatibilidad de sintaxis nativa para los archivos SCSS y LESS. Puede crear archivos SCSS o LESS y ver resaltado de sintaxis e intellisense para estos tipos de archivos. Sin embargo, no proporciona un método de compilación.
Aquí hay un enlace al blog que explica las nuevas características:
Agregamos LESS en VS2013 RTM, y ahora tenemos un elemento de proyecto y editor de SASS. Las funciones del editor SASS son comparables al editor LESS, incluyen colorización, variable y Mixins IntelliSense, comentario / descompresión, información rápida, formateo, validación de sintaxis, esquema, definición de goto, selector de color, configuración de opciones de herramientas, etc.
Tenga en cuenta que esta actualización parece ser compatible solo con la sintaxis más nueva de SassyCSS. Intenté hacer que funcione con la sintaxis SASS con sangría anterior sin ningún éxito.
Compilacion
- Web Essentials . Esta es una gran herramienta que hace todo el trabajo "gruñido" para usted. Las versiones más recientes de Web Essentials están disponibles para Visual Studio 2013 Update 3, 4 y 5.
- Otra CompileSASS gratuita que solo se encarga de la compilación es CompileSASS también funciona en VS2015.
- Alternativamente, podría utilizar WebWorkbench de MindScape , que es una gran herramienta con muchas características agradables. Hay una versión gratuita que hace lo suficiente para funcionar, pero también hay una versión paga que es mucho más completa (pero en mi opinión es demasiado cara teniendo en cuenta que hay una mejor alternativa gratuita).
Visual Studio 2015
Para aquellos de ustedes que se mudan a Visual Studio 2015, desafortunadamente todavía no hay soporte nativo para la compilación SASS y LESS. Y, lamentablemente, Web Essentials ya no admitirá la compilación. El autor de Web Essentials (Mads Kristensen) explica el motivo de esta decisión here .
Aquí hay una lista de extensiones que pueden manejar la compilación:
WebCompiler (GRATIS)
Mads Kristensen (el autor de los elementos esenciales de la web) ha creado una herramienta de compilación independiente llamada Web Compiler . Todo lo que tiene que hacer es instalarlo, luego haga clic derecho en cualquiera de los archivos SASS que desea compilar y seleccione Web Compiler> Compile File. A partir de ese momento, se lo mira y en cualquier momento se guarda, el archivo se compilará.
CompileSASS (GRATIS)
Similar al compilador web, esta es una extensión independiente que se creó para funcionar tanto en VS2013 como en VS2015 porque la compilación se eliminó de la popular extensión de Web Essentials. Es liviano y hace el trabajo muy bien con excelentes informes de errores. Lea el blog del autor sobre la extensión aquí .
Web Workbench (GRATIS / PAGADO)
CompileSASS fue mi extensión favorita durante muchos años al compilar SASS, pero desde entonces me he alejado de las alternativas gratuitas. Aún así, la versión Pro es una herramienta poderosa con muchas formas de personalizar los archivos de salida, pero también es bastante costosa ($ 39) considerando que hay herramientas gratuitas disponibles.
Código de Visual Studio
El mismo trato que el anterior realmente tiene soporte nativo para SASS y LESS a través del resaltado de sintaxis e Intellisense pero carece de compilación.
Cualquiera de los compiladores descritos anteriormente funcionará pero si desea configurar la compilación manualmente aquí hay una guía brillante:
Última versión de Visual Studio + última versión de Web Essentials http://vswebessentials.com/download permite usar Sass y Less de fábrica.
Creo que la extensión Web Essentials, que asumiría que cada desarrollador web se está ejecutando y es una especie de precursor del soporte nativo de VS IDE, tiene compatibilidad con la compilación de SCSS, pero creo que solo funciona con VS2013 Actualización 2 que todavía está en CTP. esta vez.
En Visual Studio 2013 SP 4 no hay ningún problema al agregar un archivo SCSS y la sincronización en cada guardado. Me confundí cuando la sincronización falló, encontré que el problema era usar una variable antes de que se definiera. El archivo SCSS no muestra ningún error, pero la sincronización falla.
Esto funciona para sincronización:
$body-main: 45px;
body {
padding-top: $body-main + 25px;
padding-bottom: $body-main - 5px;
}
Esto no funciona para la sincronización
body {
padding-top: $body-main + 25px;
padding-bottom: $body-main - 5px;
}
$body-main: 45px;
En el segundo caso, no hay errores y Intellisense funciona, pero la sincronización falla.
Escribí una publicación de blog sobre este tema que creo que puede ayudar a otros. Básicamente SCSS es compatible, pero no la extensión SASS.
También tenga cuidado ya que me he encontrado con algunos problemas para compilar Compass, como en el archivo brújula / css3 / images, había errores de última hora.
Mi comentario probablemente sea inútil ya que las personas ya tienen una respuesta, pero Scout está disponible para Windows :), lo he estado utilizando en mis proyectos desde marzo de 2013.
Podría usar Mixture, realmente potente y crear una versión reducida de sus archivos CSS y JS.
No he usado Chripy pero hay algunas otras opciones que puedes probar también.
- Mi extensión favorita para trabajar con Sass en Visual Studio es Web Workbench de Mindscape. Está bien integrado, funciona con Visual Studio 2013 e incluso admite Compass. Si usa Less o CoffeeScript también se ocupará de ellos. También conversé con uno de los desarrolladores y él fue muy receptivo y amigable, lo cual es una gran ventaja en mi libro. Ah, y he escuchado que otras cosas buenas también están en proceso.
- SassyStudio es otra posibilidad, pero no parecía tan potente como Web Workbench cuando lo probé.
- Todavía no ha salido, pero esté atento a Web Essentials . Por el momento, solo admite LESS en términos de preprocesadores de CSS, pero el soporte de Sass ha recibido un montón de solicitudes y el gerente de programa respondió que "el desarrollo está en pleno funcionamiento a toda velocidad". ¡Espero que pronto!
La última opción y la última en la que recurro es simplemente utilizar una herramienta externa para ver mis archivos SASS, compilarlos en segundo plano y permitir que Visual Studio vuelva a cargar los archivos CSS a medida que se compilan.
Instalar Ruby y SASS a través de la línea de comando y diciéndole que mire los cambios en el directorio de su proyecto funciona bien, pero adoro Prepros para este tipo de cosas.
No los he probado todos, pero Scout , Koala , LiveReload , Compass.app y Fire.app también son opciones similares.
Si bien estas no son siempre las soluciones adecuadas para cada proyecto, le brindan mucha flexibilidad y madurez que aún no encontrará necesariamente en las extensiones de Visual Studio.
¡Espero que eso ayude!
Para compilar SCSS en Visual Studio, instale la CompileSass Visual Studio de CompileSass .
Lamentablemente, Web Essentials ya no admitirá la compilación de Sass .
Pensé que esto era bastante triste porque era la forma más simple de compilar Sass desde Visual Studio. Creé una nueva extensión de Visual Studio que se comporta de la misma manera. Simplemente instale la extensión y compilará automáticamente los archivos .scss en archivos .min.css comprimidos cuando los guarde.
Echa un vistazo a CompileSass .
Para cualquier otra persona que busque una respuesta, estoy publicando para ahorrarle tiempo ya que algunas de las respuestas están un poco desactualizadas.
Mientras trabajaba en un pequeño proyecto web en Visual Studio 2013, quería usar SASS por primera vez. .scss poco y descubrí que la Actualización 2 de VS 2013 fue lanzada con soporte nativo para archivos SASS ( .scss ).
Después de investigar un poco más y sin experiencia en el uso de SASS, instalé Web Essentials 2013 para la Actualización 2 que se utiliza para compilar y generar los archivos .css correspondientes.
Aún así, no tenía claro cómo se relacionaba todo, pero esta publicación de blog hizo un gran trabajo al explicar todo por primera vez.
Fragmentos del blog (crédito a @akatakritos)
- Visual Studio 2013 proporciona la capacidad de agregar archivos SASS (
.scss) - Instalar Web Essentials 2013 para la actualización 2
- Agregue un nuevo archivo
.scssa su proyecto, por ejemplo,styles.scss - Actualice
styles.scss, save, y generará automáticamente un archivostyles.cssbajo el archivo.scss - A continuación, puede agruparlo o vincularlo como un archivo regular
.css
ACTUALIZACIÓN julio de 2015:
En una actualización posterior de Web Essentials , concretamente: Versión 2.5 para la Actualización 4 del 12 de noviembre de 2014, el compilador de SASS ha sido eliminado.
Compiladores alternativos:
- SassyStudio
- Banco de trabajo web
- Web Compiler Only proporciona soporte para VS2015
Si tienes MVC 6 , puedes usar gulp . Fuente original aquí: http://developer.telerik.com/featured/css-preprocessing-with-visual-studio/
Agregue NPM dependencias de NPM en package.json :
{
"name": "ASP.NET",
"version": "0.0.0",
"devDependencies": {
"gulp": "3.8.11",
...
"gulp-sass": "2.2.0",
},
"dependencies": {
"gulp-sass": "^2.2.0"
}
}
Luego en gulpfile.js :
var gulp = require("gulp"),
...
sass = require("gulp-sass");
paths.js = paths.webroot + "js/**/*.js";
...
paths.sass = paths.webroot + "css/**/*.scss";
paths.cssOutput = paths.webroot + "css";
gulp.task(''sass'', function () {
gulp.src(paths.sass)
.pipe(sass().on(''error'', sass.logError))
.pipe(gulp.dest(paths.cssOutput));
});
Finalmente, en Task Runner Explorer , right-click el right-click sass en su nueva tarea sass luego en Bindings luego seleccione After Build
para ASP.NET hay algunas maneras de integrarse con SASS. Chripy es un complemento común, esto es algo que desea instalar en Visual Studio como una extensión.
y, por lo tanto, compilación de tiempo de diseño, puede encontrar más información sobre chripy en Chripy ,
así como también hay otro paquete que puede instalar a través de Nuget:
install-package SassAndCoffee