Używanie SASS z ASP.NET [zamknięte]

Szukam sposobów wykorzystania SASS (Syntactically Awesome StyleSheets) z pakietu Ruby HAML w środowisku ASP.NET. Idealnie chciałbym, aby kompilacja plików SASS do CSS była płynną częścią procesu budowania.

Jakie są najlepsze sposoby tej integracji? Alternatywnie, czy istnieją inne narzędzia do generowania CSS, które są lepiej dostosowane do środowiska .NET?

Aby uzyskać lepsze wrażenia z pracy w programie Visual Studio, można zainstalować ostatnią wersję programu Web Essential, która zaczyna obsługiwać Sass (składnia SCSS).
Alternatywnie możesz zainstalować Sassy Studio lub Web Workbench .

Następnie, aby skompilować pliki .sass / .scss w projekcie ASP.NET, istnieje kilka różnych narzędzi: za pośrednictwem Web Essential , Web Workbench , SassC , Sass.Net , Compass , SassAndCoffee ...

Web Essential to w pełni funkcjonalna wtyczka do programu Visual Studio, która naprawdę zapewnia lepsze wrażenia dla wszystkich elementów Front-End. Najnowsza wersja zaczyna obsługiwać Sass (składnia SCSS). Wewnętrznie używa Libsass do kompilacji SCSS do CSS.

Web Workbench to kolejna wtyczka do programu Visual Studio, która dodaje podświetlanie składni, inteligencję i kilka innych przydatnych rzeczy do edycji plików SCSS. Może również skompilować Twój kod do normalnego lub zminimalizowanego CSS. Wewnętrznie używał opakowanej wersji kompilatora Ruby Sass.

Sassy Studio : kolejna wtyczka do programu Visual Studio. Mniej funkcjonalny, ale znacznie lżejszy.

Biblioteka Libsass to C ++ port CSS prekompilator Sass (jeszcze w budowie). Oryginalna wersja została napisana w języku Ruby, ale ta wersja jest przeznaczona dla wydajności i przenośności. Ta biblioteka stara się być lekka, prosta i łatwa w tworzeniu i integracji z różnymi platformami i językami.

Wokół biblioteki Libsass jest kilka opakowań:

• SassC : kompilator wiersza poleceń (w Windows musisz skompilować źródło SassC za pomocą MsysGit, aby uzyskać sassc.exe).
• NSass : opakowanie .Net.
• Node-Sass : aby używać Libsass na Node.js.
• itp.

Compass to framework dla Sassa, który dodaje wiele przydatnych pomocników (takich jak spriting obrazu), a także może skompilować twój SCSS / Sass. Ale musisz zainstalować Rubiego w każdym środowisku programistycznym, w którym chcesz skompilować swoje style.

SassAndCoffee to pakiet, który dodaje obsługę kompilacji i minifikacji SCSS / Sass za pośrednictwem niektórych bibliotek DLL i konfiguracji. Jego przewaga nad kompilatorem Web Workbench polega na tym, że jest on niezależny od rozwiązania Visual Studio: nie musisz instalować wtyczki w każdym środowisku programistycznym. Uwaga: SassAndCoffee nie jest często aktualizowany, a ponieważ używa IronRuby do pakowania oficjalnego kompilatora Ruby, mogą wystąpić pewne problemy z wydajnością. Możesz zainstalować najnowszą wersję za pośrednictwem pakietu Nuget .

Projekt kompasu ma kompilator, który skompiluje twój sass do css. Jest zbudowany do działania w systemie Windows, ale nie jest dobrze przetestowany na tej platformie. Jeśli znajdziesz jakieś błędy związane z platformą, chętnie pomogę Ci je naprawić.

Kompas można znaleźć tutaj: http://github.com/chriseppsein/compass

W 2015 roku moją aktualną radą jest użycie Node.js(platforma Javascript po stronie serwera) i gulp.js( gulp-sasspakiet węzła do uruchamiania zadań) wraz z (pakietem węzłów do implementacji libsass - szybki port C Ruby SASS).

Możesz zacząć od takiego samouczka .

Wolisz pakiet? Bundle Transformer w końcu używa libsass, umożliwiając szybką kompilację.

Oto dlaczego uważam, że powinieneś używać Node i Gulp.

• Węzeł jest teraz popularny w narzędziach
  frontendowych Wielu programistów internetowych używa teraz Node jako platformy do zadań związanych z tworzeniem frontendu. Czy to Grunt, Gulp, JSPM, Webpack, czy coś innego - dzieje się to teraz w npm .
  Rzeczy, które możesz zrobić z pakietami npm:
  • Kompiluj style z Sass, Less, PostCSS i wieloma innymi
  • Połącz szablony JavaScript, CSS, HTML i nie tylko
  • Napisz inne wersje JS i transpile ES6-7, Typescript, Coffeescript do ES5
  • Twórz czcionki ikon z lokalnych plików SVG
  • Zmniejsz js, css, SVG
  • Optymalizuj obrazy
  • Uratuj wieloryby
  • ...
• Prostsza konfiguracja dla nowych programistów do projektu
  Po skonfigurowaniu projektu package.jsoni gulpfile.jszwykle wystarczy kilka kroków, aby rozpocząć pracę:
  
  • Pobierz i zainstaluj Node.js.
  • Uruchom npm install -g gulp (instaluje łyka globalnie)
  • Uruchom npm install (lokalnie instaluje pakiety projektu)
  • Uruchom gulp taskname (w zależności od tego, jak skonfigurowałeś swoją gulpfile.jsnazwę zadania, uruchomi zadanie, które kompiluje twój SASS, JavaScript itp.)
• Obsługiwany przez Visual Studio 2015
  Wierz lub nie, VS2015 może teraz obsłużyć wszystkie funkcje wiersza poleceń za Ciebie!

Masz kilka typowych opcji w zakresie przepływu pracy:

• Poproś programistów o wysłanie skompilowanego kodu do repozytorium
  Wada: programiści muszą zawsze uruchamiać gulplub działać podobnie, aby kompilować zasoby gotowe do produkcji

• Twoje serwery build | stage | production wykonują zadania typu „gulp” przed wydaniem.
  Ten sposób może być bardziej skomplikowany w konfiguracji, ale oznacza, że ​​praca jest sprawdzana i budowana na nowo z nieskompilowanego źródła.

Poniżej moja stara odpowiedź z 2012 roku, zachowana dla potomności:

Od czołowego programisty frontendowego pracującego z Ruby, Python i C # .NET mam następujące przemyślenia:

Sass & MNIEJ

Wolę używać [Sass] [1] w nowym projekcie, szczególnie ze wspaniałym [frameworkiem Compass] [2]. Kompas to świetna robota i dodaje wiele wartości do mojego procesu. Sass ma świetną społeczność, dokumentację OK i potężny zestaw funkcji. Sass to biblioteka Ruby.

Alternatywą dla Sassa jest [MNIEJ] [3]. Ma podobną składnię i funkcje, ale mniejszą społeczność i nieco lepszą dokumentację. MNIEJ biblioteki JS.

Z punktu widzenia trendów, ludzie z czasem przechodzą w kierunku Sass, ponieważ jest on dobrze rozwinięty, nawet obsługując funkcje CSS Level 4. Ale LESS jest nadal doskonale użyteczny i łatwo dodaje wartości, aby uzasadnić jego użycie.

O używaniu Sass / LESS w projekcie ASP.NET

Chociaż wolę używać Sassa, uruchomienie Ruby / Sass do pracy z projektami .NET może być bolesne, ponieważ jest trudne do skonfigurowania, obce i może frustrować programistów.

Masz kilka opcji:

• Sass: Native Ruby + Sass
  • Pro: Najszybsza kompilacja serwerów
  • Pro: Możliwość korzystania z najnowszych wersji Sass
  • Wada: Ogromny kłopot z rozpoczęciem pracy
  • Wada: Każdy serwer lub stacja robocza wymaga skonfigurowania ruby
  • Wada: Twórcom .NET trudniej jest rozwiązywać problemy z Rubim / integracją
• Sass: Ruby .NET, taki jak [IronRuby] [5] + Sass
  • Kompilacja serwerów Pro: SLOW (twórcy frontendu będą narzekać!)
  • Pro: może nie być w stanie korzystać z najnowszych wersji Sass
  • Pro: Nieco łatwiejszy w konfiguracji niż Native Ruby
  • Wada: Każdy serwer lub stacja robocza wymaga skonfigurowania ruby
  • Wada: Twórcom .NET trudniej jest rozwiązywać problemy z Rubim / integracją
• Sass: Rozszerz [.NET Bundling] [8] za pomocą [BundleTransformer] [7] + Sass
  • Pro: (używa IronRuby) kompilacja serwerów SLOW (twórcy frontendu będą narzekać!)
  • Pro: (używa IronRuby) Może nie być w stanie korzystać z najnowszych wersji Sass
  • Pro: (używa IronRuby) Nieco łatwiejszy w konfiguracji niż Native Ruby
  • Wada: Każdy serwer lub stacja robocza wymaga skonfigurowania ruby
  • Wada: Twórcom .NET trudniej jest rozwiązywać problemy z Rubim / integracją
• Sass lub LESS: wtyczka Visual Studio, taka jak [Mindscape Workbench] [4]
  • Pro: łatwe rozpoczęcie
  • Pro: Szybka kompilacja
  • Wada: Każdy programista pracujący ze stylami Sass potrzebuje wtyczki IDE
  • Wada: Nie można szybko zmienić stylów na serwerze - wymaga lokalnego ponownego przetwarzania
• MNIEJ: port .NET, taki jak [DotLessCSS] [6]
  • Pro: Szybka kompilacja serwera
  • Pro: bardzo łatwy w konfiguracji
  • Pro: wygodny dla programistów C # .NET
  • Pro: Brak wymagań dotyczących IDE / stacji roboczej / serwera - uwzględnij je w samej aplikacji internetowej
  • Wada: nie ma wszechstronności SASS / Compass i nie zawsze może zagwarantować zgodność najnowszej składni LESS.JS
• Sass: Virtualise linux + Ruby with [Vagrant] [9]
  • Pro: Nie tak straszne w konfiguracji, jak mogłoby się wydawać
  • Pro: Szybko !!
  • Pro: najnowsze narzędzia Frontend (Sass, Compass itp.), Zaktualizowane za pomocą menedżera pakietów linux
  • Wada: Początkowa konfiguracja może być trudna dla użytkowników innych niż Linux
  • Wada: wymagania środowiskowe obejmują teraz hosting maszyny wirtualnej
  • Wada: maszyna wirtualna może mieć problemy ze skalowalnością / konserwacją

Moim zdaniem, MNIEJ używanie [DotLessCSS] [6] jest najlepszym wyborem dla twojego typowego projektu tworzenia stron internetowych, z powodów wymienionych powyżej.

Kilka lat temu odkryłem, że [DotLessCSS] [6] ma irytujące błędy i ograniczenia, ale używając [DotLessCSS] [6] ponownie w 2012 roku w kilku projektach, jestem bardzo zadowolony z konfiguracji. Nie przedstawiłem bólu moim programistom, używając Sass / Ruby i wyciągnąłem większość korzyści z MNIEJ. A co najlepsze, nie ma wymagań dotyczących środowiska IDE ani stacji roboczej.

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

Właśnie napisałem dodatek do programu Visual Studio ze szczegółowymi instrukcjami, w tym zrzutami ekranu, jak uruchomić Sass w Visual Studio. Sprawdź to tutaj - http://giri.sh/2011/01/21/sass-for-visual-studio-2010/

To nie jest SASS, ale możesz rzucić okiem na nasz Less Css dla portu .NET . Kompas wygląda jednak naprawdę interesująco i myślę, że coś takiego dla Lessa byłoby świetnym dodatkiem.

Właśnie to znalazłem wczoraj, wygląda to całkiem obiecująco, poza sass / scss poradzi sobie z autominacją JS (nie CSS - jeszcze) i łączeniem plików. Mam nadzieję, że ktoś tam utworzy wtyczkę VS do edycji plików sass / scss. Problemem dla mnie było to, że kiedy masz błąd w kodzie sass / scss, stwierdzasz, że wykonuje on tylko testy lub inspekcję wygenerowanych plików CSS. Nie przeszedłem przez wszystkie jego kroki, ale jak dotąd jest to dobre.

https://github.com/xpaulbettsx/SassAndCoffee

Pierwotnie odpowiedziałem na to pytanie tutaj .

#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