net mvc asp and asp.net css sass

asp.net - asp - sass mvc



Usando SASS con ASP.NET (7)

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 sea una parte integral del proceso de compilación.

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

Acabo de encontrar 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 plugin de VS para editar archivos sass / scss. Lo que sí encontré problemático fue que cuando tienes un error en tu código sass / scss, lo encuentras haciendo pruebas o inspeccionando los archivos CSS generados. No lo he puesto a prueba, pero hasta ahora todo va bien.

SassAndCoffee

El proyecto brújula tiene un compilador que compilará su sass a 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

Originalmente respondí esta pregunta here .

#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

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 es un plugin completo para Visual Studio, que realmente brinda una mejor experiencia para todos los productos de Front-End. La última versión está empezando a ser compatible con Sass (sintaxis SCSS). Internamente usa Libsass para compilar el SCSS en CSS.

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

Sassy Studio : otro complemento para Visual Studio. Menos destacado pero mucho más ligero.

La biblioteca Libsass es un puerto C ++ del precompilador Sass CSS (aún en desarrollo). La versión original fue escrita en Ruby, pero esta versión está diseñada para la eficiencia y la 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 envoltorios alrededor de la biblioteca de Libsass:

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

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

SassAndCoffee es un paquete que agrega compilación de SCSS / Sass y soporte de minificación, a través de algunas DLL y configuraciones. Su ventaja sobre el compilador de Web Workbench es que es independiente 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 como usa IronRuby para envolver el compilador Ruby oficial, puede obtener algunos problemas de rendimiento. Puede instalar la última versión a través de un paquete Nuget .

En 2015, mi consejo actual es usar Node.js (plataforma de JavaScript del lado del servidor) y gulp.js (un paquete de nodo de la tarea), junto con gulp-sass (un paquete de nodos para gulp que implementa libsass - un puerto C rápido de Ruby SASS).

Puedes comenzar con un tutorial como este .

¿Prefieres empacar? Bundle Transformer ahora finalmente usa libsass, permitiendo la compilación de alta velocidad.

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

  • El nodo es popular ahora para Frontend Tooling
    Muchos desarrolladores web ahora están utilizando Node una plataforma para tareas de desarrollo web frontend. Ya sea Grunt, Gulp, JSPM, Webpack o algo más, ahora mismo está sucediendo en npm .
    Cosas que puedes 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, Typescript, Coffeescript a ES5
    • Crear iconfonts desde archivos SVG locales
    • Minificar js, css, SVG
    • Optimizar imágenes
    • Salven a las ballenas
    • ...
  • Configuración más simple para nuevos desarrolladores en un proyecto
    Una vez que haya configurado su proyecto package.json y gulpfile.js , todo lo que normalmente requiere para ejecutarlo son algunos pasos:
    • Descargue e instale Node.js
    • Ejecute npm install -g gulp (instala el trago de forma global)
    • Ejecute npm install (instala paquetes de proyectos localmente)
    • Ejecutar nombre de gulp taskname (Dependiendo de cómo hayas configurado tu nombre de gulpfile.js gulpfile.js ejecutará una tarea que compila tu SASS, Javascript, etc.)
  • Compatible con Visual Studio 2015
    Créalo o no, ¡VS2015 ahora puede manejar todas las cosas de línea de comandos para usted!

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

  • Haga que sus desarrolladores ingresen su código compilado en el repositorio
    Desventaja: los desarrolladores siempre deben ejecutar gulp o similar para compilar activos listos para producción

  • Sus servidores de compilación | stage | production ejecutan las tareas de gulp antes de las versiones
    De esta manera puede ser más complicado de configurar, pero significa que el trabajo está validado y construido a partir de fuentes no compiladas.

A continuación está mi respuesta anterior de 2012, conservada para la posteridad:

Desde un desarrollador de frontend líder del proyecto que trabaja con Ruby, Python y C # .NET, tengo estos pensamientos:

Sass & LESS

Prefiero usar [Sass] [1] en un nuevo proyecto, especialmente con el maravilloso [marco Compass] [2]. Compass es una gran pieza de trabajo y agrega mucho valor a mi proceso. Sass tiene una gran comunidad, documentación correcta y un potente conjunto de características. Sass es una biblioteca de Ruby.

Una alternativa a Sass es [LESS] [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, incluso soportan las características de nivel 4 de CSS. Pero LESS sigue siendo perfectamente utilizable, y agrega fácilmente el valor suficiente para garantizar su uso.

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

Si bien prefiero usar Sass, lograr que Ruby / Sass trabaje con proyectos .NET puede ser doloroso, porque es difícil de instalar, es extraño y puede frustrar a los desarrolladores.

Tienes pocas opciones:

  • Sass: Native Ruby + Sass
    • Pro: la compilación más rápida del servidor
    • Pro: Capaz de usar las últimas versiones de Sass
    • Con: gran molestia para ponerse en marcha
    • Con: cada servidor o estación de trabajo necesita configurar ruby
    • Con: Más difícil para desarrolladores .NET para resolver problemas de Ruby / integración
  • Sass: puerto Ruby .NET como [IronRuby] [5] + Sass
    • Pro: compilación de servidor SLOW (Frontend Devs se quejará!)
    • Pro: Es posible que no pueda usar las últimas versiones de Sass
    • Pro: un poco más fácil de instalar que Native Ruby
    • Con: cada servidor o estación de trabajo necesita configurar ruby
    • Con: Más difícil para desarrolladores .NET para resolver problemas de Ruby / integración
  • Sass: Extiende [.NET Bundling] [8] con [BundleTransformer] [7] + Sass
    • Pro: (Utiliza IronRuby) Compilación de servidor SLOW (¡Frontend Devs se quejará!)
    • Pro: (Utiliza IronRuby) Es posible que no pueda usar las últimas versiones de Sass
    • Pro: (Utiliza IronRuby) Un poco más fácil de instalar que Native Ruby
    • Con: cada servidor o estación de trabajo necesita configurar ruby
    • Con: Más difícil para desarrolladores .NET para resolver problemas de Ruby / integración
  • Sass o LESS: plugin de Visual Studio como [Mindscape Workbench] [4]
    • Pro: fácil de empezar
    • Pro: compilación rápida
    • Con: todos los desarrolladores que trabajan con estilos Sass necesitan un complemento IDE
    • Con: no puede cambiar rápidamente los estilos en el servidor; requiere un nuevo procesamiento local
  • MENOS: puerto .NET como [DotLessCSS] [6]
    • Pro: compilación rápida del servidor
    • Pro: muy fácil de configurar
    • Pro: Cómodo para C # .NET devs
    • Pro: sin requisitos de IDE / estación de trabajo / servidor: incluirlo en la aplicación web en sí
    • 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]
    • Pro: No es tan horrible de configurar como podría pensar
    • Pro: ¡rápido!
    • Pro: últimas herramientas frontend (Sass, Compass, etc.) actualizadas con linux package manager
    • Con: la configuración inicial puede ser difícil para usuarios que no sean de Linux
    • Con: los requisitos del entorno ahora implican alojar una máquina virtual
    • Con: VM puede tener problemas de escalabilidad / mantenimiento

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

Hace un par de años, encontré [DotLessCSS] [6] con molestos errores y limitaciones, pero usando [DotLessCSS] [6] nuevamente en 2012 en algunos proyectos, estoy muy contento con la configuración. No he introducido dolor a mis desarrolladores al usar Sass / Ruby y obtener la mayor parte del valor de LESS. Lo mejor de todo es que no hay requisitos IDE ni de estación de trabajo.

[1]: http://sass-lang.com/ [2]: Compass [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/