Vraag SASS gebruiken met ASP.NET [gesloten]


Ik ben op zoek naar manieren om te gebruiken SASS (Syntactically Awesome StyleSheets) van het Ruby HAML-pakket in een ASP.NET-omgeving. In het ideale geval zou ik graag de compilatie van SASS-bestanden in CSS een naadloos onderdeel van het bouwproces willen maken.

Wat zijn de beste manieren voor deze integratie? Of zijn er andere tools voor het genereren van CSS die beter geschikt zijn voor een .NET-omgeving?


97
2018-04-28 08:20


oorsprong


antwoorden:


Voor een betere werkervaring in Visual Studio, kunt u de laatste versie van installeren Web Essential die Sass (SCSS-syntaxis) begint te ondersteunen.
Als alternatief zou je kunnen installeren Sassy Studio of Webwerkbank.

Om vervolgens uw .sass / .scss-bestanden te compileren in uw ASP.NET-project, zijn er een aantal verschillende tools: via Web Essential, Webwerkbank, SassC, Sass.Net, Kompas, SassAndCoffee...


Web Essential een volledig functionele plug-in voor Visual Studio, die echt een betere ervaring geeft voor alle front-end materialen. De nieuwste versie begint Sass (SCSS-syntaxis) te ondersteunen. Intern gebruikt het de Libsass om de SCSS te compileren naar CSS.


Webwerkbank is een andere plug-in voor Visual Studio die syntaxisaccentuering, intellisentie en een aantal andere handige dingen voor het bewerken van SCSS-bestanden toevoegt. Het kan ook uw code compileren in normale of verkleinde CSS. Intern gebruikte het een ingepakte versie van de Ruby Sass-compiler.


Sassy Studio: een andere plug-in voor Visual Studio. Minder aanbevolen, maar veel lichter.


De Libsass-bibliotheek is de C ++ -poort van de Sass CSS-precompiler (nog in ontwikkeling). De originele versie is geschreven in Ruby, maar deze versie is bedoeld voor efficiëntie en draagbaarheid. Deze bibliotheek streeft naar licht, eenvoudig en gemakkelijk te bouwen en te integreren met verschillende platforms en talen.

Er zijn verschillende wrappers rond de Libsass-bibliotheek:

  • SassC: een opdrachtregel-compiler (in Windows moet je de bron van SassC compileren met MsysGit om de sassc.exe te krijgen).
  • NSass: a. Netwrapper.
  • Node-Sass: om Libsass te gebruiken op Node.js.
  • enz.

Kompas is een raamwerk voor Sass dat heel wat bruikbare helpers (zoals image spriting) toevoegt en kan ook je SCSS / Sass compileren. Maar je moet Ruby installeren op elke ontwikkelomgeving waar je je stijlen moet compileren.


SassAndCoffee is een pakket dat SCSS / Sass-compilatie en ondersteuning voor ondermijning toevoegt, via enkele DLL's en configs. Het voordeel ten opzichte van de Web Workbench-compiler is dat deze zich volledig in uw Visual Studio-oplossing bevindt: u hoeft geen plug-in te installeren in elke ontwikkelomgeving. Opmerking: SassAndCoffee wordt niet vaak bijgewerkt en omdat het IronRuby gebruikt om de officiële Ruby-compiler in te pakken, kunt u een aantal prestatieproblemen ondervinden. U kunt de nieuwste versie via a installeren Nuget-pakket.


41
2018-01-24 03:49



Het kompasproject heeft een compiler die je sass compileert voor css. Het is gebouwd om te draaien op Windows, maar het is niet goed getest op dat platform. Als u platformgerelateerde bugs tegenkomt, help ik u graag om ze te repareren.

Compass is hier te vinden: http://github.com/chriseppsein/compass


26
2018-04-28 15:11



In 2015 is mijn huidige advies om te gebruiken Node.js (Server-side Javascript platform) en gulp.js (een taak runner node pakket), samen met gulp-sass (een knooppuntpakket voor gulp-implementatie libsass - een snelle C-poort van Ruby SASS).

Je kunt aan de slag gaan met een tutorial als deze.

Liever bundelen? Bundeltransformator gebruikt nu eindelijk libsass, waardoor snel compileren mogelijk wordt.

Hier is de reden waarom ik vind dat je Node and Gulp moet gebruiken.

  • Knooppunt is nu populair voor Frontend Tooling
     Veel webontwikkelaars gebruiken Node nu een platform voor frontend webontwikkelingstaken. Of het nu Grunt, Gulp, JSPM, Webpack of iets anders is - het gebeurt nu meteen in NPM.
    Dingen die je kunt doen met npm-pakketten:
    • Compileer stijlen met Sass, Less, PostCSS en nog veel meer
    • Samenvoegen Javascript, CSS, HTML-sjablonen en meer
    • Schrijf andere versies van JS en transpile ES6-7, Typescript, Coffeescript naar ES5
    • Maak iconfonts van lokale SVG-bestanden
    • Verklein js, css, SVG
    • Optimaliseer afbeeldingen
    • Red de walvissen
    • ...
  • Eenvoudigere installatie van nieuwe ontwikkelaars voor een project
    Als je eenmaal je project hebt opgezet package.json en gulpfile.js, het enige dat nodig is om te kunnen werken is een paar stappen:
    • Download en installeer Node.js
    • Rennen npm install -g gulp  (installeert slikken wereldwijd)
    • Rennen npm install  (installeert projectpakketten lokaal)
    • Rennen gulp taskname  (Afhankelijk van hoe je je hebt ingesteld gulpfile.js taskname voert een taak uit die uw SASS, Javascript, enz. compileert)
  • Ondersteund door Visual Studio 2015
    Geloof het of niet, VS2015 kan nu alle commandoregel dingen voor je aan!

U hebt een paar typische opties op het gebied van workflow:

  • Laat uw ontwikkelaars hun gecompileerde code toewijzen aan de repository
    Nadeel: ontwikkelaars moeten altijd draaien gulp of vergelijkbaar met het compileren van gereedschappen die klaar zijn voor productie

  • Uw build | stage | productieservers voeren voor releases releases uit
    Deze manier kan ingewikkelder zijn om in te stellen, maar betekent dat werk wordt gevalideerd en nieuw wordt gebouwd van niet-gecompileerde bron.

Hieronder is mijn oude antwoord uit 2012, bewaard voor het nageslacht:

Van een projectleidende frontend-ontwikkelaar die werkt met Ruby, Python,   en C # .NET, ik heb deze gedachten:

Sass & LESS

Ik gebruik [Sass] [1] bij voorkeur voor een nieuw project, vooral met de   prachtig [kompasraamwerk] [2]. Kompas is een geweldig stuk werk,   en voegt veel waarde toe aan mijn proces. Sass heeft een geweldige community, OK   documentatie en een krachtige functieset. Sass is een Ruby-bibliotheek.

Een alternatief voor Sass is [LESS] [3]. Het heeft dezelfde syntaxis en   functies, maar een kleinere community en iets betere documentatie.   MINDER een JS-bibliotheek.

Trendgewijs neigen mensen in de loop van de tijd naar Sass toe zoals het is   goed ontwikkelde, zelfs ondersteunende CSS Level 4-functies. Maar MINDER is   nog steeds perfect bruikbaar en voegt gemakkelijk genoeg waarde toe om gebruik te rechtvaardigen   het.

Over het gebruik van Sass / LESS in een ASP.NET-project

Hoewel ik liever Sass gebruik, moet ik Ruby / Sass laten werken met .NET   projecten kunnen pijnlijk zijn, omdat het moeilijk is om in te stellen, buitenlands en kan   ontwikkelaars frustreren.

Je hebt een paar opties:

  • Sass: Native Ruby + Sass
    • Pro: Snelste servercompilatie
    • Pro: In staat om de nieuwste versies van Sass te gebruiken
    • con: Enorm gedoe om te beginnen
    • con: Elke server of werkstation heeft ruby-opstelling nodig
    • con: Moeilijker voor .NET-ontwikkelaars om Ruby / integratieproblemen op te lossen
  • Sass: Ruby .NET-poort zoals [IronRuby] [5] + Sass
    • Pro: SLOW server-compilatie (Frontend Devs zal klagen!)
    • Pro: Mogelijk kunnen de nieuwste versies van Sass niet worden gebruikt
    • Pro: Iets eenvoudiger in te stellen dan Native Ruby
    • con: Elke server of werkstation heeft ruby-opstelling nodig
    • con: Moeilijker voor .NET-ontwikkelaars om Ruby / integratieproblemen op te lossen
  • Sass: breid [.NET-bundeling] [8] uit met [BundleTransformer] [7] + Sass
    • Pro: (Gebruikt IronRuby) SLOW server compilatie (Frontend Devs zal klagen!)
    • Pro: (Gebruikt IronRuby) Mogelijk kunnen de nieuwste versies van Sass niet worden gebruikt
    • Pro: (Gebruikt IronRuby) Iets eenvoudiger in te stellen dan Native Ruby
    • con: Elke server of werkstation heeft ruby-opstelling nodig
    • con: Moeilijker voor .NET-ontwikkelaars om Ruby / integratieproblemen op te lossen
  • Sass or LESS: Visual Studio-plug-in, zoals [Mindscape Workbench] [4]
    • Pro: Gemakkelijk om te beginnen
    • Pro: Snelle compilatie
    • con: Elke ontwikkelaar die met Sass-stijlen werkt, heeft een IDE-plug-in nodig
    • con: Kan stijlen op de server niet snel wijzigen - vereist lokale herverwerking
  • MINDER: .NET-poort zoals [DotLessCSS] [6]
    • Pro: Snelle servercompilatie
    • Pro: Zeer eenvoudig in te stellen
    • Pro: Comfortabel voor C # .NET-ontwikkelaars
    • Pro: Geen IDE / werkstation / serververeisten - neem het op in de webapp zelf
    • con: Heeft de veelzijdigheid van SASS / Compass niet en kan niet altijd de nieuwste LESS.JS-syntaxiscompatibiliteit garanderen
  • Sass: Virtualize linux + Ruby met [Vagrant] [9]
    • Pro: Niet zo vreselijk om te installeren als je zou denken
    • Pro: Snel!!
    • Pro: Laatste Frontend-tools (Sass, Compass enz.), Bijgewerkt met linux-pakketbeheer
    • con: De initiële installatie kan moeilijk zijn voor niet-linux gebruikers
    • con: Omgevingsvereisten omvatten nu het hosten van een VM
    • con: VM kan problemen hebben met de schaalbaarheid / onderhoud

Naar mijn mening is MINDER met [DotLessCSS] [6] de beste keuze voor uw   typisch webontwikkelingsproject, om de hierboven genoemde redenen.

Een paar jaar geleden vond ik [DotLessCSS] [6] vervelende bugs   en beperkingen, maar in 2012 weer op [DotLessCSS] [6]   projecten, ik ben erg blij met de setup. Ik heb er geen pijn aan gedaan   mijn ontwikkelaars door Sass / Ruby te gebruiken en de meeste waarde eruit te halen   MINDER. Het beste van alles, geen IDE of werkstationvereisten.

[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
2017-11-26 15:08



Ik heb net een Visual Studio-invoegtoepassing geschreven met gedetailleerde instructies, waaronder schermafbeeldingen om Sass op weg te helpen voor Visual Studio. Bekijk het hier - http://giri.sh/2011/01/21/sass-for-visual-studio-2010/


13
2018-01-21 15:51



Het is geen SASS, maar je kunt een kijkje nemen op onze Minder CSS voor .NET haven. Compass ziet er echter heel interessant uit, en ik denk dat zoiets als dit voor Less een geweldige toevoeging zou zijn.


11
2017-10-17 10:39



Ik heb dit gisteren net gevonden, het ziet er best veelbelovend uit, afgezien van sass / scss zal het de automatisering van JS (nog geen CSS) en het combineren van bestanden afhandelen. Een ding dat ik hoop is dat iemand een VS-plug-in kan maken voor het bewerken van sass / scss-bestanden. Wat ik wel problematisch vond, was dat wanneer je een fout in je sass / scss-code hebt, je deze alleen kunt vinden als je de gegenereerde CSS-bestanden test of inspecteert. Ik heb het nog niet helemaal doorgrond, maar tot nu toe zo goed.

https://github.com/xpaulbettsx/SassAndCoffee 


5
2017-07-07 17:04



Ik heb deze vraag oorspronkelijk beantwoord hier.

#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
2017-10-17 10:52