Utilizzo di SASS con ASP.NET [chiuso]

Sto cercando modi per utilizzare SASS (Syntactically Awesome StyleSheets) dal pacchetto Ruby HAML in un ambiente ASP.NET. Idealmente, vorrei che la compilazione di file SASS in CSS fosse una parte senza soluzione di continuità del processo di compilazione.

Quali sono i modi migliori per questa integrazione? In alternativa, esistono altri strumenti per la generazione di CSS che sono più adatti per un ambiente .NET?

Per una migliore esperienza di lavoro in Visual Studio, è possibile installare l'ultima versione di Web Essential che sta iniziando a supportare Sass (sintassi SCSS).
In alternativa puoi installare Sassy Studio o Web Workbench .

Quindi per compilare i tuoi file .sass / .scss nel tuo progetto ASP.NET, ci sono alcuni strumenti diversi: tramite Web Essential , Web Workbench , SassC , Sass.Net , Compass , SassAndCoffee ...

Web Essential è un plug-in completo per Visual Studio, che offre davvero una migliore esperienza per tutti gli elementi front-end. L'ultima versione sta iniziando a supportare Sass (sintassi SCSS). Internamente usa Libsass per compilare SCSS in CSS.

Web Workbench è un altro plugin per Visual Studio che aggiunge evidenziazione della sintassi, intelligenza e altre cose utili per la modifica dei file SCSS. Può anche compilare il codice in CSS normale o minimizzato. Internamente utilizzava una versione con wrapping del compilatore Ruby Sass.

Sassy Studio : un altro plugin per Visual Studio. Meno caratterizzato ma molto più leggero.

La libreria Libsass è il port C ++ del precompilatore Sass CSS (ancora in sviluppo). La versione originale è stata scritta in Ruby, ma questa versione è pensata per l'efficienza e la portabilità. Questa libreria si sforza di essere leggera, semplice e facile da costruire e integrare con una varietà di piattaforme e linguaggi.

Esistono diversi wrapper attorno alla libreria Libsass:

• SassC : un compilatore a riga di comando (su Windows è necessario compilare i sorgenti di SassC con MsysGit per ottenere sassc.exe).
• NSass : un wrapper .Net.
• Node-Sass : per utilizzare Libsass su Node.js.
• eccetera.

Compass è un framework per Sass che aggiunge molti utili helper (come lo sprite di immagini) e può anche compilare il tuo SCSS / Sass. Ma devi installare Ruby su ogni ambiente di sviluppo in cui devi compilare i tuoi stili.

SassAndCoffee è un pacchetto che aggiunge il supporto alla compilazione e alla minificazione SCSS / Sass, tramite alcune DLL e configurazioni. Il suo vantaggio rispetto al compilatore Web Workbench è che è autonomo nella soluzione Visual Studio: non è necessario installare un plug-in in ogni ambiente di sviluppo. Nota: SassAndCoffee non viene aggiornato spesso e poiché utilizza IronRuby per eseguire il wrapping del compilatore Ruby ufficiale, è possibile riscontrare alcuni problemi di prestazioni. Puoi installare l'ultima versione tramite un pacchetto Nuget .

Il progetto compass ha un compilatore che compilerà il tuo sass in css. È costruito per funzionare su Windows, ma non è ben testato su quella piattaforma. Se trovi bug relativi alla piattaforma, sarò lieto di aiutarti a risolverli.

La bussola può essere trovata qui: http://github.com/chriseppsein/compass

Nel 2015, il mio consiglio attuale è quello di utilizzare Node.js(piattaforma Javascript lato server) e gulp.js(un pacchetto nodo task runner), insieme a gulp-sass(un pacchetto nodo per gulp che implementa libsass - una veloce porta C di Ruby SASS).

Puoi iniziare con un tutorial come questo .

Preferisci il raggruppamento? Bundle Transformer ora utilizza finalmente libsass, consentendo la compilazione ad alta velocità.

Ecco perché penso che dovresti usare Node e Gulp.

• Node è ora popolare
  per gli strumenti di frontend Molti sviluppatori web ora utilizzano Node una piattaforma per attività di sviluppo web frontend. Che si tratti di Grunt, Gulp, JSPM, Webpack o qualcos'altro, sta accadendo proprio ora in npm .
  Cose che puoi fare con i pacchetti npm:
  • Compila stili con Sass, Less, PostCSS e molti altri
  • Concatena Javascript, CSS, modelli HTML e altro ancora
  • Scrivi altre versioni di JS e trasferisci ES6-7, Typescript, Coffeescript in ES5
  • Crea caratteri icona da file SVG locali
  • Minimizza js, css, SVG
  • Ottimizza le immagini
  • Salva le balene
  • ...
• Configurazione più semplice per i nuovi sviluppatori di un progetto
  Una volta impostato il progetto package.jsone gulpfile.js, di solito, per iniziare a funzionare sono sufficienti pochi passaggi:
  
  • Scarica e installa Node.js
  • Esegui npm install -g gulp (installa gulp a livello globale)
  • Esegui npm install (installa i pacchetti del progetto in locale)
  • Esegui gulp taskname (a seconda di come hai impostato il nome gulpfile.jsdell'attività verrà eseguita un'attività che compila il tuo SASS, Javascript ecc.)
• Supportato da Visual Studio 2015
  Che tu ci creda o no, VS2015 ora può gestire tutte le cose della riga di comando per te!

Hai un paio di opzioni tipiche in termini di flusso di lavoro:

• Chiedi ai tuoi sviluppatori di eseguire il commit del codice compilato nel repository
  Aspetto negativo: gli sviluppatori devono sempre eseguire gulpo simili per compilare asset pronti per la produzione

• I tuoi server build | stage | production eseguono attività gulp prima del rilascio In
  questo modo può essere più complicato da configurare, ma significa che il lavoro viene convalidato e creato da una fonte non compilata.

Di seguito la mia vecchia risposta del 2012, conservata per i posteri:

Da uno sviluppatore frontend leader di progetto che lavora con Ruby, Python e C # .NET, ho questi pensieri:

Sass & LESS

Preferisco usare [Sass] [1] su un nuovo progetto, specialmente con il meraviglioso [Compass framework] [2]. Compass è un ottimo lavoro e aggiunge molto valore al mio processo. Sass ha una grande comunità, documentazione OK e un potente set di funzionalità. Sass è una libreria Ruby.

Un'alternativa a Sass, è [MENO] [3]. Ha una sintassi e caratteristiche simili, ma una comunità più piccola e una documentazione leggermente migliore. MENO una libreria JS.

Dal punto di vista delle tendenze, le persone tendono a spostarsi verso Sass nel tempo poiché è ben sviluppato, supportando anche le funzionalità CSS di livello 4. Ma LESS è ancora perfettamente utilizzabile e aggiunge facilmente abbastanza valore da garantirne l'utilizzo.

Sull'utilizzo di Sass / LESS in un progetto ASP.NET

Sebbene io preferisca usare Sass, far lavorare Ruby / Sass con i progetti .NET può essere doloroso, perché è difficile da configurare, estraneo e può frustrare gli sviluppatori.

Hai alcune opzioni:

• Sass: Rubino nativo + Sass
  • Pro: compilazione server più veloce
  • Pro: in grado di utilizzare le ultime versioni di Sass
  • Contro: enormi problemi per essere operativi
  • Contro: ogni server o workstation necessita della configurazione di Ruby
  • Contro: è più difficile per gli sviluppatori .NET risolvere i problemi di integrazione con Ruby
• Sass: porta Ruby .NET come [IronRuby] [5] + Sass
  • Pro: compilazione di server SLOW (gli sviluppatori frontend si lamenteranno!)
  • Pro: Potrebbe non essere possibile utilizzare le ultime versioni di Sass
  • Pro: leggermente più facile da configurare rispetto a Native Ruby
  • Contro: ogni server o workstation necessita della configurazione di Ruby
  • Contro: è più difficile per gli sviluppatori .NET risolvere i problemi di integrazione con Ruby
• Sass: Estendi [.NET Bundling] [8] con [BundleTransformer] [7] + Sass
  • Pro: (utilizza IronRuby) compilazione del server SLOW (gli sviluppatori di frontend si lamenteranno!)
  • Pro: (utilizza IronRuby) potrebbe non essere in grado di utilizzare le ultime versioni di Sass
  • Pro: (utilizza IronRuby) leggermente più facile da configurare rispetto a Native Ruby
  • Contro: ogni server o workstation necessita della configurazione di Ruby
  • Contro: è più difficile per gli sviluppatori .NET risolvere i problemi di integrazione con Ruby
• Sass or LESS: plug-in di Visual Studio come [Mindscape Workbench] [4]
  • Pro: facile da iniziare
  • Pro: compilazione veloce
  • Contro: ogni sviluppatore che lavora con gli stili Sass necessita di un plugin IDE
  • Contro: non è possibile modificare rapidamente gli stili sul server - richiede una rielaborazione locale
• MENO: porta .NET come [DotLessCSS] [6]
  • Pro: compilazione veloce del server
  • Pro: molto facile da configurare
  • Pro: comodo per gli sviluppatori C # .NET
  • Pro: nessun requisito IDE / workstation / server: includilo nell'app Web stessa
  • Contro: non ha la versatilità di SASS / Compass e non può sempre garantire l'ultima compatibilità con la sintassi LESS.JS
• Sass: virtualizza Linux + Ruby con [Vagrant] [9]
  • Pro: Non è così orribile da configurare come potresti pensare
  • Pro: veloce !!
  • Pro: gli ultimi strumenti di frontend (Sass, Compass, ecc.), Aggiornati con il gestore di pacchetti Linux
  • Contro: l' installazione iniziale potrebbe essere difficile per gli utenti non Linux
  • Contro: i requisiti ambientali ora implicano l'hosting di una VM
  • Contro: la VM potrebbe avere problemi di scalabilità / manutenzione

A mio parere, LESS utilizzando [DotLessCSS] [6] è la scelta migliore per il tuo tipico progetto di sviluppo web, per i motivi sopra indicati.

Un paio di anni fa, ho scoperto che [DotLessCSS] [6] presentava fastidiosi bug e limitazioni, ma utilizzando nuovamente [DotLessCSS] [6] nel 2012 su alcuni progetti, sono molto soddisfatto della configurazione. Non ho introdotto problemi ai miei sviluppatori usando Sass / Ruby e ho ottenuto la maggior parte del valore da LESS. Soprattutto, nessun IDE o requisiti di workstation.

[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/

Ho appena scritto un componente aggiuntivo per Visual Studio con istruzioni dettagliate, inclusi screenshot su come far funzionare Sass per Visual Studio. Dai un'occhiata qui - http://giri.sh/2011/01/21/sass-for-visual-studio-2010/

Non è SASS ma puoi dare un'occhiata al nostro port di Less Css per .NET . Compass sembra davvero interessante, e penso che qualcosa del genere per Less sarebbe un'ottima aggiunta.

L'ho trovato solo ieri, sembra abbastanza promettente, a parte sass / scss gestirà l'automatizzazione di JS (non CSS - ancora) e la combinazione di file. Una cosa che spero è che qualcuno là fuori crei un plug-in VS per la modifica di file sass / scss. Quello che ho trovato problematico è stato che quando hai un errore nel tuo codice sass / scss lo trovi solo durante il test o l'ispezione dei file CSS generati. Non l'ho messo alla prova, ma finora tutto bene.

https://github.com/xpaulbettsx/SassAndCoffee

Inizialmente ho risposto a questa domanda qui .

#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