Usando SASS con ASP.NET [cerrado]

Estoy buscando formas de usar SASS (Syntactically Awesome StyleSheets) del paquete Ruby HAML en un entorno ASP.NET. Idealmente, me gustaría que la compilación de archivos SASS en CSS fuera una parte perfecta del proceso de compilación.

¿Cuáles son las mejores formas de esta integración? Alternativamente, ¿existen otras herramientas de generación de CSS que sean más adecuadas para un entorno .NET?

Para una mejor experiencia de trabajo en Visual Studio, puede instalar la última versión de Web Essential que está comenzando a admitir Sass (sintaxis SCSS).
Alternativamente, puede instalar Sassy Studio o Web Workbench .

Luego, para compilar sus archivos .sass / .scss en su proyecto ASP.NET, hay algunas herramientas diferentes: a través de Web Essential , Web Workbench , SassC , Sass.Net , Compass , SassAndCoffee ...

Web Essential, un complemento con todas las funciones para Visual Studio, que realmente brinda una mejor experiencia para todas las cosas de Front-End. La última versión está comenzando a admitir Sass (sintaxis SCSS). Internamente, usa Libsass para compilar SCSS a CSS.

Web Workbench es otro complemento para Visual Studio que agrega resaltado de sintaxis, inteligencia y algunas otras cosas útiles para editar archivos SCSS. También puede compilar su código en CSS normal o minificado. Internamente, usó una versión envuelta del compilador Ruby Sass.

Sassy Studio : otro complemento para Visual Studio. Menos funciones pero mucho más ligeras.

La biblioteca Libsass es la versión C ++ del precompilador CSS de Sass (todavía en desarrollo). La versión original fue escrita en Ruby, pero esta versión está pensada para la eficiencia y portabilidad. Esta biblioteca se esfuerza por ser liviana, simple y fácil de construir e integrar con una variedad de plataformas e idiomas.

Hay varios contenedores alrededor de la biblioteca Libsass:

• SassC : un compilador de línea de comandos (en Windows es necesario compilar el código fuente de SassC con MsysGit para obtener sassc.exe).
• NSass : un contenedor .Net.
• Node-Sass : para usar Libsass en Node.js.
• etc.

Compass es un marco para Sass que agrega una gran cantidad de ayudantes útiles (como sprites de imágenes) y también puede compilar su SCSS / Sass. Pero necesita instalar Ruby en cada entorno de desarrollo donde necesite compilar sus estilos.

SassAndCoffee es un paquete que agrega compatibilidad con la compilación y minificación SCSS / Sass, a través de algunas DLL y configuraciones. Su ventaja sobre el compilador Web Workbench es que está integrado en su solución de Visual Studio: no necesita instalar un complemento en cada entorno de desarrollo. Observación: SassAndCoffee no se actualiza con frecuencia, y debido a que usa IronRuby para empaquetar el compilador oficial de Ruby, puede tener algunos problemas de rendimiento. Puede instalar la última versión a través de un paquete Nuget .

El proyecto compass tiene un compilador que compilará su sass en css. Está diseñado para ejecutarse en Windows, pero no está bien probado en esa plataforma. Si encuentra algún error relacionado con la plataforma, con mucho gusto lo ayudaré a solucionarlo.

La brújula se puede encontrar aquí: http://github.com/chriseppsein/compass

En 2015, mi consejo actual es usar Node.js(plataforma Javascript del lado del servidor) y gulp.js(un gulp-sasspaquete de nodo de ejecución de tareas ), junto con (un paquete de nodo para gulp implementando libsass - un puerto C rápido de Ruby SASS).

Puede comenzar con un tutorial como este .

¿Prefieres el empaquetado? Bundle Transformer ahora finalmente usa libsass, lo que permite la compilación de alta velocidad.

He aquí por qué creo que debería usar Node y Gulp.

• Node es popular ahora para las herramientas de frontend
  Muchos desarrolladores web están utilizando Node, una plataforma para tareas de desarrollo web de frontend. Ya sea Grunt, Gulp, JSPM, Webpack o cualquier otra cosa, está sucediendo ahora mismo en npm .
  Cosas que puede hacer con los paquetes npm:
  • Compile estilos con Sass, Less, PostCSS y muchos más
  • Concatenar Javascript, CSS, plantillas HTML y más
  • Escriba otras versiones de JS y transpile ES6-7, Typecript, Coffeescript a ES5
  • Crea fuentes de iconos a partir de archivos SVG locales
  • Minificar js, css, SVG
  • Optimizar imágenes
  • Salven a las ballenas
  • ...
• Configuración más sencilla para los nuevos desarrolladores de un proyecto
  Una vez que haya configurado su proyecto package.jsony gulpfile.js, por lo general, todo lo que se necesita para comenzar a funcionar son algunos pasos:
  
  • Descarga e instala Node.js
  • Ejecutar npm install -g gulp (instala gulp globalmente)
  • Ejecutar npm install (instala paquetes de proyectos de forma local)
  • Ejecutar gulp taskname (Dependiendo de cómo haya configurado su gulpfile.jsnombre de tarea, se ejecutará una tarea que compile su SASS, Javascript, etc.)
• Compatible con Visual Studio 2015 Lo
  crea o no, VS2015 ahora puede manejar todas las cosas de la línea de comandos por usted.

Tiene un par de opciones típicas en términos de flujo de trabajo:

• Haga que sus desarrolladores envíen su código compilado al repositorio
  Desventaja: Los desarrolladores siempre deben ejecutar gulpo similar para compilar activos listos para producción

• Los servidores de producción de compilación | etapa | ejecutan tareas de gulp antes de los lanzamientos.
  Esta forma puede ser más complicada de configurar, pero significa que el trabajo se valida y se compila desde una fuente no compilada.

A continuación se muestra mi antigua respuesta de 2012, guardada para la posteridad:

De un desarrollador frontend líder en proyectos que trabaja con Ruby, Python y C # .NET, tengo estos pensamientos:

Descarado y menos

Prefiero usar [Sass] [1] en un nuevo proyecto, especialmente con el maravilloso [Compass framework] [2]. Compass es un gran trabajo y agrega mucho valor a mi proceso. Sass tiene una gran comunidad, buena documentación y un poderoso conjunto de funciones. Sass es una biblioteca de Ruby.

Una alternativa a Sass es [MENOS] [3]. Tiene una sintaxis y características similares, pero una comunidad más pequeña y una documentación ligeramente mejor. MENOS una biblioteca JS.

En cuanto a las tendencias, las personas tienden a avanzar hacia Sass con el tiempo, ya que está bien desarrollado e incluso admite funciones de CSS Nivel 4. Pero LESS sigue siendo perfectamente utilizable y fácilmente agrega suficiente valor para justificar su uso.

Sobre el uso de Sass / LESS en un proyecto ASP.NET

Si bien prefiero usar Sass, lograr que Ruby / Sass funcione con proyectos .NET puede ser doloroso, porque es difícil de configurar, ajeno y puede frustrar a los desarrolladores.

Tienes pocas opciones:

• Sass: Rubí nativo + Sass
  • Pro: la compilación de servidor más rápida
  • Pro: Capaz de utilizar las últimas versiones de Sass
  • Con: una gran molestia para ponerse en marcha
  • Desventaja: todos los servidores o estaciones de trabajo necesitan una configuración ruby
  • Con: Más difícil para los desarrolladores de .NET resolver problemas de integración / Ruby
• Sass: puerto de Ruby .NET como [IronRuby] [5] + Sass
  • Pro: compilación de servidor LENTO (¡los desarrolladores frontend se quejarán!)
  • Pro: es posible que no pueda utilizar las últimas versiones de Sass
  • Pro: un poco más fácil de configurar que Native Ruby
  • Desventaja: todos los servidores o estaciones de trabajo necesitan una configuración ruby
  • Con: Más difícil para los desarrolladores de .NET resolver problemas de integración / Ruby
• Sass: amplía [.NET Bundling] [8] con [BundleTransformer] [7] + Sass
  • Pro: (usa IronRuby) Compilación de servidor LENTA (¡los desarrolladores frontend se quejarán!)
  • Pro: (usa IronRuby) Es posible que no pueda usar las últimas versiones de Sass
  • Pro: (usa IronRuby) Ligeramente más fácil de configurar que Native Ruby
  • Desventaja: todos los servidores o estaciones de trabajo necesitan una configuración ruby
  • Con: Más difícil para los desarrolladores de .NET resolver problemas de integración / Ruby
• Sass o LESS: complemento de Visual Studio como [Mindscape Workbench] [4]
  • Ventaja: fácil de empezar
  • Ventaja: compilación rápida
  • Con: todo desarrollador que trabaje con estilos Sass necesita un complemento IDE
  • Desventaja: no se pueden cambiar rápidamente los estilos en el servidor; requiere un reprocesamiento local
• MENOS: puerto .NET como [DotLessCSS] [6]
  • Ventaja: compilación rápida del servidor
  • Pro: muy fácil de configurar
  • Pro: cómodo para los desarrolladores de C # .NET
  • Ventaja: sin requisitos de IDE / estación de trabajo / servidor; inclúyalo en la aplicación web
  • Con: No tiene la versatilidad de SASS / Compass y no siempre puede garantizar la última compatibilidad de sintaxis LESS.JS
• Sass: virtualiza linux + Ruby con [Vagrant] [9]
  • Ventaja: no es tan horrible de configurar como podría pensar
  • Pro: ¡¡Rápido !!
  • Pro: últimas herramientas de frontend (Sass, Compass, etc.), actualizadas con el administrador de paquetes de Linux
  • Desventaja: la configuración inicial puede ser difícil para los usuarios que no son de Linux
  • Desventaja: los requisitos del entorno ahora implican alojar una máquina virtual
  • Con: VM puede tener problemas de escalabilidad / mantenimiento

En mi opinión, MENOS usar [DotLessCSS] [6] es la mejor opción para su proyecto de desarrollo web típico, por las razones mencionadas anteriormente.

Hace un par de años, descubrí que [DotLessCSS] [6] tenía errores y limitaciones molestos, pero al usar [DotLessCSS] [6] nuevamente en 2012 en algunos proyectos, estoy muy contento con la configuración. No he presentado dolor a mis desarrolladores al usar Sass / Ruby y obtengo la mayor parte del valor de LESS. Lo mejor de todo es que no se requieren IDE ni estaciones de trabajo.

[1]: http://sass-lang.com/ [2]: http://compass-style.org/ [3]: http://lesscss.org/ [4]: http: // www. MindScapehq.com/products/web-workbench [5]: http://www.ironruby.net/ [6]: http://www.dotlesscss.org/ [7]: http://bundletransformer.codeplex.com / [8]: http://weblogs.asp.net/scottgu/archive/2011/11/27/new-bundling-and-minification-support-asp-net-4-5-series.aspx [9]: http://www.vagrantup.com/

Acabo de escribir un complemento de Visual Studio con instrucciones detalladas que incluyen capturas de pantalla sobre cómo hacer que Sass funcione con Visual Studio. Compruébalo aquí: http://giri.sh/2011/01/21/sass-for-visual-studio-2010/

No es SASS, pero puede echar un vistazo a nuestro puerto Less Css para .NET . Sin embargo, Compass se ve realmente interesante y creo que algo como esto para Less sería una gran adición.

Encontré esto ayer, parece bastante prometedor, aparte de sass / scss, manejará la autominificación de JS (no CSS, todavía) y la combinación de archivos. Una cosa que espero es que alguien cree un complemento VS para editar archivos sass / scss. Lo que sí encontré problemático fue que cuando tienes un error en tu código sass / scss solo lo encuentras haciendo pruebas o inspeccionando los archivos CSS generados. No lo he puesto a prueba todos los pasos, pero hasta ahora todo va bien.

https://github.com/xpaulbettsx/SassAndCoffee

Originalmente respondí esta pregunta aquí .

#PostBuild.rb
#from http://sentia.com.au/2008/08/sassing-a-net-application.html
#Post-build event command line: rake -f "$(ProjectDir)PostBuild.rb"

require 'haml'
require 'sass'

task :default => [ :stylesheets ]

desc 'Regenerates all sass templates.'
task :stylesheets do
    wd = File.dirname(__FILE__)
    sass_root = File.join(wd, 'Stylesheets')
    css_root = File.join(wd, 'Content')
    Dir[sass_root + '/*.sass'].each do |sass|
        css = File.join(css_root, File.basename(sass, '.sass') + '.css')
        puts "Sassing #{sass} to #{css}."
        File.open(css, 'w') do |f|
            f.write(Sass::Engine.new(IO.read(sass)).render)
        end
    end
end