web-dev-qa-db-fra.com

Comment utiliser Sass dans Visual Studio 2013

Comment utiliser le préprocesseur Sass CSS dans Visual Studio 2013 ? Existe-t-il des extensions prenant en charge Sass?

visual-studiovisual-studio-2013sasscss-preprocessor
70
Hamed mayahian

Pour ceux qui recherchent une réponse à cette question, je vous envoie un message pour vous faire gagner du temps, car certaines réponses sont un peu dépassées. 

Alors que je travaillais sur un petit projet Web dans Visual Studio 2013, je souhaitais utiliser SASS pour la première fois. J'ai creusé un peu et découvert que VS 2013 Update 2 était publié avec une prise en charge native des fichiers SASS (.scss). 

Après un peu plus de recherches et sans aucune expérience d'utilisation de SASS, j'ai installé Web Essentials 2013 pour Update 2 qui est utilisé pour compiler et générer les fichiers .css correspondants.

Même quand même, je ne savais pas vraiment comment tout cela se liait, mais cet article de blog fit un excellent travail en expliquant tout pour la première fois.

Snippets From Blog (crédit à @akatakritos)

  1. Visual Studio 2013 offre la possibilité d'ajouter des fichiers SASS (.scss). 
  2. Installez Web Essentials 2013 pour Update 2
  3. Ajoutez un nouveau fichier .scss à votre projet, par exemple. styles.scss
  4. Mettez à jour styles.scss, sauvegardez-le et il générera automatiquement un fichier styles.css sous le fichier .scss
  5. Vous pouvez ensuite le lier ou le lier comme un fichier .css normal.

MISE À JOUR Juillet 2015:

Dans une version ultérieure de mise à jour Web Essentials }, à savoir: Version 2.5 pour la mise à jour 4 du 12 novembre 2014, le compilateur SASS a été supprimé.

Compilateurs alternatifs:

52
Tanner

Je n'ai pas utilisé Chripy, mais vous pouvez également essayer deux autres options.

  1. Mon extension préférée pour travailler avec Sass dans Visual Studio est Web Workbench de Mindscape. Il est bien intégré, fonctionne avec Visual Studio 2013 et prend même en charge Compass. Si vous utilisez Less ou CoffeeScript, il s’occupera également de ces tâches. J'ai aussi discuté avec l'un des développeurs et il était très réactif et amical, ce qui est un énorme avantage dans mon livre. Oh, et j'entends plus de choses cool sont dans les travaux aussi.
  2. SassyStudio est une autre possibilité, mais cela ne semblait pas aussi puissant que Web Workbench lorsque je l'ai essayé.
  3. Il n'est pas encore sorti, mais gardez un œil sur Web Essentials . Pour le moment, il ne prend en charge que LESS en termes de préprocesseurs CSS, mais le support Sass a reçu tonne de demandes et le responsable du programme a répondu que "Le développement en cours est à plein régime". Bientôt je l'espère!

La dernière option, celle sur laquelle je tombe souvent, consiste simplement à utiliser un outil externe pour regarder mes fichiers SASS, les compiler en arrière-plan et laisser Visual Studio recharger les fichiers CSS au fur et à mesure de leur compilation.

Installer Ruby et SASS via la ligne de commande et lui dire de surveiller le répertoire de votre projet pour connaître les modifications fonctionne bien - mais j'adore Prepros pour ce genre de chose. 

Je ne les ai pas tous essayés, mais Scout , Koala , LiveReload , Compass.app et Fire.app sont également des options similaires.

Bien que ces solutions ne soient pas toujours adaptées à chaque projet, elles vous offrent une flexibilité et une maturité que vous ne trouverez pas nécessairement dans les extensions Visual Studio.

J'espère que ça aide!

13
Chris White

Pour compiler SCSS dans Visual studio, installez l'extension CompileSass Visual Studio.

Malheureusement, Web Essentials ne supportera plus la compilation de Sass .

Je pensais que c'était assez triste car c'était le moyen le plus simple de compiler Sass à partir de Visual Studio. J'ai créé une nouvelle extension Visual Studio qui se comporte de la même manière. Vous venez d'installer l'extension et il compilera automatiquement les fichiers .scss en fichiers .min.css compressés lors de l'enregistrement.

Départ CompileSass .

5
Sam Rueby

pour ASP.NET, il existe plusieurs façons de s’intégrer à SASS. Chripy est un plug-in courant, que vous souhaitez installer dans Visual Studio en tant qu'extension.
et donc la compilation au moment de la conception, vous pouvez en savoir plus sur chripy dans http://chirpy.codeplex.com/ ,
ainsi qu’un autre paquet que vous pouvez installer via Nuget:

install-package SassAndCoffee
3
Sirwan Afifi

J'ai écrit un article de blog sur ce sujet qui pourrait aider les autres. Fondamentalement, SCSS est pris en charge mais pas l'extension SASS.

http://pwkad.wordpress.com/2014/05/30/using-scss-in-visual-studio-2013-with-web-essentials-starring-compass-and-susy/

Faites également attention car j'ai rencontré quelques problèmes lors de la compilation de Compass, comme dans le fichier compass/css3/images, il y avait des erreurs de rupture.

2
PW Kad

Je pense que l’extension Web Essentials - et je suppose que chaque développeur Web est en cours d’exécution et est en quelque sorte un précurseur du support VS IDE natif - prend en charge la compilation SCSS, mais je pense que cela ne fonctionne qu'avec VS2013 Update 2 dans CTP encore en ce moment.

1
Luke Puplett

Mon commentaire est probablement inutile car les gens ont peut-être déjà une réponse, mais Scout est disponible pour Windows :), je l'utilise dans mes projets depuis mars 2013. 

Vous pouvez utiliser Mixture, très puissant et créer une version simplifiée de vos fichiers CSS et JS.

1
David Gebbett

Si vous avez MVC 6, vous pouvez simplement utiliser gulp. Source originale ici: http://developer.telerik.com/featured/css-preprocessing-with-visual-studio/

Ajoutez les dépendances NPM dans package.json:

{
  "name": "ASP.NET",
  "version": "0.0.0",
  "devDependencies": {
    "gulp": "3.8.11",
    ...
    "gulp-sass": "2.2.0",
  },
  "dependencies": {
    "gulp-sass": "^2.2.0"
  }
}

Puis dans gulpfile.js:

var gulp = require("gulp"),
    ...
    sass = require("gulp-sass");


paths.js = paths.webroot + "js/**/*.js";
...
paths.sass = paths.webroot + "css/**/*.scss";
paths.cssOutput = paths.webroot + "css";


gulp.task('sass', function () {
    gulp.src(paths.sass)
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(paths.cssOutput));
});

Enfin, dans le Task Runner Explorer, right-click de votre nouvelle tâche sass puis Bindings puis sélectionnez After Build

0
Serj Sagan

La dernière version de Visual Studio + la dernière version de Web Essentials http://vswebessentials.com/download permet d’utiliser Sass et Less immédiatement.

0
Donskikh Andrei