web-dev-qa-db-fra.com

Utilisation de SASS avec ASP.NET

Je cherche des moyens d'utiliser SASS (Syntactically Awesome StyleSheets) à partir du Ruby package HAML dans un ASP.NET Idéalement, je voudrais que la compilation des fichiers SASS en CSS soit une partie transparente 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?

asp.netcsssass
97
Guðmundur H

Le projet de boussole a un compilateur qui compilera votre sass en CSS. Il est conçu pour fonctionner sur 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

26
chriseppstein

En 2015, mon conseil actuel est d'utiliser Node.js (Plate-forme Javascript côté serveur) et gulp.js (Un package de nœuds de gestionnaire de tâches), ainsi que gulp-sass (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 regroupement? Bundle Transformer utilise enfin libsass, permettant une compilation à haute vitesse.

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

  • Le nœud est maintenant populaire pour les outils frontaux
    De nombreux développeurs Web utilisent désormais Node une plate-forme pour les tâches de développement Web frontal. Que ce soit Grunt, Gulp, JSPM, Webpack ou autre chose - cela se passe en ce moment en npm .
    Ce que vous pouvez faire avec les packages npm:
    • Compiler des styles avec Sass, Less, PostCSS et bien d'autres
    • Concaténer des modèles Javascript, CSS, HTML et plus
    • Écrire d'autres versions de JS et transpiler 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
    • ...
  • Configuration plus simple pour les nouveaux développeurs d'un projet
    Une fois que vous avez configuré votre projet package.json Et gulpfile.js, Il suffit généralement de quelques étapes pour démarrer:
    • Téléchargez et installez Node.js
    • Exécutez npm install -g gulp (installe gulp globalement
    • Exécutez npm install (installe les packages de projet localement)
    • Exécutez gulp taskname (selon la façon dont vous avez configuré votre gulpfile.js Nom de tâche exécutera une tâche qui compile votre SASS, Javascript, etc.)
  • Pris en charge par Visual Studio 2015
    Croyez-le ou non, VS2015 peut désormais gérer toutes les choses en 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 gulp ou similaire pour compiler les actifs prêts pour la production

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

Voici mon ancienne réponse de 2012, conservée pour la postérité:

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

Sass & LESS

Je préfère utiliser [Sass] [1] sur un nouveau projet, en particulier avec le merveilleux [Compass framework] [2]. La boussole est un excellent travail et ajoute beaucoup de valeur à mon processus. Sass a une grande communauté, une documentation OK et un ensemble de fonctionnalités puissant. 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.

Au niveau des tendances, les gens ont tendance à évoluer 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.

Sur 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: Native Ruby + Sass
    • Pro: Compilation de serveur la plus rapide
    • Pro: Capable d'utiliser les dernières versions de Sass
    • Con: Tracas massifs pour être opérationnel
    • Con: Chaque serveur ou poste de travail a besoin de la configuration Ruby
    • Con: Plus difficile pour les développeurs .NET de résoudre les problèmes de Ruby/d'intégration
  • Sass: Ruby port .NET comme [IronRuby] [5] + Sass
    • Pro: Compilation de serveur LENTE (Frontend Devs se plaindra!)
    • Pro: Peut ne pas pouvoir utiliser les dernières versions de Sass
    • Pro: Légèrement plus facile à installer que Native Ruby
    • Con: Chaque serveur ou poste de travail a besoin de la configuration Ruby
    • Con: Plus difficile pour les développeurs .NET de résoudre les problèmes de Ruby/d'intégration
  • Sass: étendre [.NET Bundling] [8] avec [BundleTransformer] [7] + Sass
    • Pro: (Utilise IronRuby) Compilation de serveur SLOW (Frontend Devs se plaindra!)
    • 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 à configurer que Native Ruby
    • Con: Chaque serveur ou poste de travail a besoin de la configuration Ruby
    • Con: Plus difficile pour les développeurs .NET de résoudre les problèmes de Ruby/d'intégration
  • Sass ou LESS: plug-in Visual Studio comme [Mindscape Workbench] [4]
    • Pro: Facile à démarrer
    • Pro: Compilation rapide
    • Con: Chaque développeur travaillant avec les styles Sass a besoin d'un plugin IDE
    • Con: Impossible de changer rapidement les styles sur le serveur - nécessite un retraitement local
  • MOINS: port .NET comme [DotLessCSS] [6]
    • Pro: Compilation rapide du serveur
    • Pro: Très facile à configurer
    • Pro: Confortable pour les développeurs C # .NET
    • Pro: Aucune configuration IDE/station de travail/serveur - l'inclure dans l'application Web elle-même
    • Con: N'a pas la polyvalence de SASS/Compass et ne peut pas toujours garantir la compatibilité de la dernière syntaxe LESS.JS
  • Sass: virtualisez linux + Ruby avec [Vagrant] [9]
    • Pro: Pas aussi horrible à configurer que vous ne le pensez
    • 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
    • Con: Les exigences d'environnement impliquent désormais l'hébergement d'une machine virtuelle
    • 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 indiqué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 fait souffrir mes développeurs en utilisant Sass/Ruby et j'en tire le meilleur parti de LESS. Mieux encore, aucune exigence de IDE ou de poste de travail.

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

24
Phil Ricketts

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 lancer Sass pour Visual Studio. Découvrez-le ici - http://giri.sh/2011/01/21/sass-for-visual-studio-2010/

13
Girish

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

11
Owen

Je viens de trouver cela hier, il semble assez prometteur, à part sass/scss, il s'occupera de l'automatisation de JS (pas encore CSS) et de la combinaison de fichiers. Une chose que j'espère est que quelqu'un crée un plugin VS pour éditer 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 le trouvez uniquement en train de tester ou d'inspecter 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

5
Dan Doyon

J'ai répondu à l'origine à 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
4
yfeldblum