Utilisation de SASS avec ASP.NET [fermé]

Je cherche des moyens d'utiliser SASS (Syntactically Awesome StyleSheets) du package Ruby HAML dans un environnement ASP.NET. Idéalement, j'aimerais que la compilation des fichiers SASS en CSS fasse partie intégrante du processus de construction.

Quels sont les meilleurs moyens pour cette intégration? Sinon, existe-t-il d'autres outils de génération CSS mieux adaptés à un environnement .NET?

Pour une meilleure expérience de travail dans Visual Studio, vous pouvez installer la dernière version de Web Essential qui commence à prendre en charge Sass (syntaxe SCSS).
Vous pouvez également installer Sassy Studio ou Web Workbench .

Ensuite pour compiler vos fichiers .sass / .scss dans votre projet ASP.NET, il existe différents outils: via Web Essential , Web Workbench , SassC , Sass.Net , Compass , SassAndCoffee ...

Web Essential est un plugin complet pour Visual Studio, qui offre vraiment une meilleure expérience pour tous les éléments Front-End. La dernière version commence à prendre en charge Sass (syntaxe SCSS). En interne, il utilise Libsass pour compiler le SCSS en CSS.

Web Workbench est un autre plugin pour Visual Studio qui ajoute la coloration syntaxique, l'intellisence et d'autres éléments utiles pour l'édition de fichiers SCSS. Il peut également compiler votre code en CSS normal ou minifié. En interne, il utilisait une version encapsulée du compilateur Ruby Sass.

Sassy Studio : un autre plugin pour Visual Studio. Moins en vedette mais beaucoup plus léger.

La bibliothèque Libsass est le port C ++ du précompilateur CSS Sass (toujours en développement). La version originale a été écrite en Ruby, mais cette version est conçue pour l'efficacité et la portabilité. Cette bibliothèque s'efforce d'être légère, simple et facile à construire et à intégrer avec une variété de plates-formes et de langages.

Il existe plusieurs wrappers autour de la bibliothèque Libsass:

• SassC : un compilateur en ligne de commande (sous Windows, vous devez compiler le source de SassC avec MsysGit pour obtenir le sassc.exe).
• NSass : un wrapper .Net.
• Node-Sass : pour utiliser Libsass sur Node.js.
• etc.

Compass est un framework pour Sass qui ajoute beaucoup d'aides utiles (comme l'image spriting) et peut également compiler votre SCSS / Sass. Mais vous devez installer Ruby sur chaque environnement de développement où vous devez compiler vos styles.

SassAndCoffee est un package qui ajoute le support de compilation et de minification SCSS / Sass, via certaines DLL et configurations. Son avantage par rapport au compilateur Web Workbench est qu'il est autonome dans votre solution Visual Studio: vous n'avez pas besoin d'installer un plugin sur chaque environnement de développement. Remarque: SassAndCoffee n'est pas souvent mis à jour, et comme il utilise IronRuby pour envelopper le compilateur Ruby officiel, vous pouvez avoir des problèmes de performances. Vous pouvez installer la dernière version via un package Nuget .

Le projet de boussole a un compilateur qui compilera votre sass en css. Il est conçu pour fonctionner sous Windows, mais il n'est pas bien testé sur cette plate-forme. Si vous trouvez des bogues liés à la plate-forme, je serai heureux de vous aider à les corriger.

La boussole peut être trouvée ici: http://github.com/chriseppsein/compass

En 2015, mon conseil actuel est d'utiliser Node.js(plate-forme Javascript côté serveur) et gulp.js(un gulp-sasspackage de nœuds d'exécution de tâches ), ainsi que (un package de nœuds pour gulp implémentant libsass - un port C rapide de Ruby SASS).

Vous pouvez commencer avec un tutoriel comme celui-ci .

Vous préférez le groupage? Bundle Transformer utilise enfin libsass, permettant une compilation à grande vitesse.

Voici pourquoi je pense que vous devriez utiliser Node et Gulp.

• Node est maintenant populaire pour les outils frontaux
  De nombreux développeurs Web utilisent maintenant Node une plate-forme pour les tâches de développement Web frontend. Que ce soit Grunt, Gulp, JSPM, Webpack ou autre chose, cela se passe maintenant dans npm .
  Ce que vous pouvez faire avec les packages npm:
  • Compilez des styles avec Sass, Less, PostCSS et bien d'autres
  • Concaténer Javascript, CSS, modèles HTML et plus
  • Écrire d'autres versions de JS et transpile ES6-7, Typescript, Coffeescript vers ES5
  • Créer des polices d'icônes à partir de fichiers SVG locaux
  • Réduire js, css, SVG
  • Optimiser les images
  • Sauvez les baleines
  • ...
• Une configuration plus simple pour les nouveaux développeurs d'un projet
  Une fois que vous avez configuré votre projet package.jsonet gulpfile.js, il suffit généralement de quelques étapes pour démarrer:
  
  • Téléchargez et installez Node.js
  • Exécuter npm install -g gulp (installe gulp globalement)
  • Exécuter npm install (installe les packages de projet localement)
  • Exécuter gulp taskname (selon la façon dont vous avez configuré votre gulpfile.jsnom de tâche, une tâche compile votre SASS, Javascript, etc.)
• Pris en charge par Visual Studio 2015
  Croyez-le ou non, VS2015 peut désormais gérer tous les éléments de la ligne de commande pour vous!

Vous avez quelques options typiques en termes de flux de travail:

• Demandez à vos développeurs de valider leur code compilé dans le référentiel
  Inconvénient: les développeurs doivent toujours exécuter gulpou similaire pour compiler des actifs prêts pour la production

• Vos serveurs de construction | étape | production exécutent des tâches gulp avant les versions.
  Cette méthode peut être plus compliquée à mettre en place, mais cela signifie que le travail est validé et construit à partir d'une source non compilée.

Voici ma vieille réponse de 2012, conservée pour la postérité:

D'un développeur frontend leader du projet travaillant avec Ruby, Python et C # .NET, j'ai ces réflexions:

Sass & MOINS

Je préfère utiliser [Sass] [1] sur un nouveau projet, surtout avec le merveilleux [Compass framework] [2]. Compass est un excellent travail et ajoute beaucoup de valeur à mon processus. Sass a une excellente communauté, une documentation OK et un ensemble de fonctionnalités puissantes. Sass est une bibliothèque Ruby.

Une alternative à Sass, est [MOINS] [3]. Il a une syntaxe et des fonctionnalités similaires, mais une communauté plus petite et une documentation légèrement meilleure. MOINS une bibliothèque JS.

En ce qui concerne les tendances, les gens ont tendance à se diriger vers Sass au fil du temps car il est bien développé, prenant même en charge les fonctionnalités CSS de niveau 4. Mais LESS est toujours parfaitement utilisable et ajoute facilement suffisamment de valeur pour justifier son utilisation.

À propos de l'utilisation de Sass / LESS dans un projet ASP.NET

Bien que je préfère utiliser Sass, faire fonctionner Ruby / Sass avec des projets .NET peut être pénible, car il est difficile à configurer, étranger et peut frustrer les développeurs.

Vous avez quelques options:

• Sass: Rubis natif + Sass
  • Pro: compilation de serveur la plus rapide
  • Pro: Capable d'utiliser les dernières versions de Sass
  • Con: tracas massif pour être opérationnel
  • Con: chaque serveur ou poste de travail nécessite la configuration de ruby
  • Con: Plus difficile pour les développeurs .NET de résoudre les problèmes d'intégration / Ruby
• Sass: port Ruby .NET comme [IronRuby] [5] + Sass
  • Pro: compilation de serveur SLOW (les développeurs frontend se plaindront!)
  • Pro: Il se peut que vous ne puissiez pas utiliser les dernières versions de Sass
  • Pro: légèrement plus facile à configurer que Native Ruby
  • Con: chaque serveur ou poste de travail nécessite la configuration de ruby
  • Con: Plus difficile pour les développeurs .NET de résoudre les problèmes d'intégration / Ruby
• Sass: étendez [.NET Bundling] [8] avec [BundleTransformer] [7] + Sass
  • Pro: (Utilise IronRuby) Compilation de serveur SLOW (Les développeurs frontend se plaindront!)
  • Pro: (Utilise IronRuby) Peut ne pas être en mesure d'utiliser les dernières versions de Sass
  • Pro: (Utilise IronRuby) Légèrement plus facile à installer que Native Ruby
  • Con: chaque serveur ou poste de travail nécessite la configuration de ruby
  • Con: Plus difficile pour les développeurs .NET de résoudre les problèmes d'intégration / Ruby
• Sass ou LESS: plugin Visual Studio comme [Mindscape Workbench] [4]
  • Pro: facile à démarrer
  • Pro: compilation rapide
  • Con: Chaque développeur travaillant avec des styles Sass a besoin d'un plugin IDE
  • Inconvénient: Impossible de changer rapidement les styles sur le serveur - nécessite un nouveau traitement local
• MOINS: port .NET comme [DotLessCSS] [6]
  • Pro: compilation rapide de serveurs
  • Pro: très facile à installer
  • Pro: confortable pour les développeurs C # .NET
  • Pro: Pas d'exigences IDE / poste de travail / serveur - incluez-le dans l'application Web elle-même
  • Inconvénient: n'a pas la polyvalence de SASS / Compass, et ne peut pas toujours garantir la dernière compatibilité de la syntaxe LESS.JS
• Sass: virtualiser linux + Ruby avec [Vagrant] [9]
  • Pro: pas aussi horrible à configurer que vous pourriez le penser
  • Pro: Rapide !!
  • Pro: Derniers outils Frontend (Sass, Compass, etc.), mis à jour avec le gestionnaire de paquets Linux
  • Con: la configuration initiale peut être difficile pour les utilisateurs non-Linux
  • Contre: les exigences d'environnement impliquent désormais l'hébergement d'une VM
  • Con: VM peut avoir des problèmes d'évolutivité / maintenance

À mon avis, MOINS en utilisant [DotLessCSS] [6] est le meilleur choix pour votre projet de développement Web typique, pour les raisons exposées ci-dessus.

Il y a quelques années, j'ai trouvé que [DotLessCSS] [6] avait des bogues et des limitations ennuyeux, mais en utilisant à nouveau [DotLessCSS] [6] en 2012 sur quelques projets, je suis très satisfait de la configuration. Je n'ai pas introduit de douleur à mes développeurs en utilisant Sass / Ruby et je tire le meilleur parti de LESS. Mieux encore, aucun IDE ou poste de travail requis.

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

Je viens d'écrire un complément Visual Studio avec des instructions détaillées, y compris des captures d'écran sur la façon de faire fonctionner Sass pour Visual Studio. Découvrez-le ici - http://giri.sh/2011/01/21/sass-for-visual-studio-2010/

Ce n'est pas SASS mais vous pouvez jeter un oeil à notre port Less Css for .NET . Compass semble vraiment intéressant, et je pense que quelque chose comme ça pour Less serait un excellent ajout.

Je viens de trouver cela hier, cela semble assez prometteur, mis à part sass / scss, il gérera l'automatisation de JS (pas encore CSS) et la combinaison de fichiers. Une chose que j'espère, c'est que quelqu'un crée un plugin VS pour l'édition des fichiers sass / scss. Ce que j'ai trouvé problématique, c'est que lorsque vous avez une erreur dans votre code sass / scss, vous ne le trouvez qu'en testant ou en inspectant les fichiers CSS générés. Je ne l'ai pas mis à l'épreuve, mais jusqu'ici tout va bien.

https://github.com/xpaulbettsx/SassAndCoffee

J'ai initialement répondu à cette question ici .

#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