Usando SASS com ASP.NET [fechado]

Estou procurando maneiras de usar SASS (Syntactically Awesome StyleSheets) do pacote Ruby HAML em um ambiente ASP.NET. Idealmente, eu gostaria que a compilação de arquivos SASS em CSS fosse uma parte integrante do processo de construção.

Quais são as melhores formas de integração? Como alternativa, existem outras ferramentas de geração de CSS que são mais adequadas para um ambiente .NET?

Para uma melhor experiência de trabalho no Visual Studio, você pode instalar a última versão do Web Essential que está começando a oferecer suporte ao Sass (sintaxe SCSS).
Como alternativa, você pode instalar o Sassy Studio ou Web Workbench .

Então, para compilar seus arquivos .sass / .scss em seu projeto ASP.NET, existem algumas ferramentas diferentes: via Web Essential , Web Workbench , SassC , Sass.Net , Compass , SassAndCoffee ...

Web Essential um plugin completo para Visual Studio, que realmente oferece uma melhor experiência para todos os recursos de Front-End. A versão mais recente está começando a oferecer suporte a Sass (sintaxe SCSS). Internamente ele usa o Libsass para compilar o SCSS para CSS.

Web Workbench é outro plugin para Visual Studio que adiciona destaque de sintaxe, inteligência e algumas outras coisas úteis para editar arquivos SCSS. Ele também pode compilar seu código em CSS normal ou reduzido. Internamente, ele usava uma versão encapsulada do compilador Ruby Sass.

Sassy Studio : outro plugin para Visual Studio. Menos destaque, mas muito mais leve.

A biblioteca Libsass é uma porta C ++ do pré-compilador Sass CSS (ainda em desenvolvimento). A versão original foi escrita em Ruby, mas esta versão é voltada para eficiência e portabilidade. Esta biblioteca se esforça para ser leve, simples e fácil de construir e integrar com uma variedade de plataformas e linguagens.

Existem vários wrappers em torno da biblioteca Libsass:

• SassC : um compilador de linha de comando (no Windows, você precisa compilar a fonte do SassC com MsysGit para obter o sassc.exe).
• NSass : um wrapper .Net.
• Node-Sass : para usar Libsass no Node.js.
• etc.

Compass é um framework para Sass que adiciona muitos ajudantes úteis (como spriting de imagem) e também pode compilar seu SCSS / Sass. Mas você precisa instalar Ruby em cada ambiente de desenvolvimento onde você precisa compilar seus estilos.

SassAndCoffee é um pacote que adiciona suporte para compilação e minificação SCSS / Sass, por meio de algumas DLLs e configurações. Sua vantagem sobre o compilador Web Workbench é que ele é autocontido em sua solução Visual Studio: você não precisa instalar um plug-in em cada ambiente de desenvolvimento. Observação: SassAndCoffee não é atualizado com frequência e, como ele usa IronRuby para empacotar o compilador Ruby oficial, você pode ter alguns problemas de desempenho. Você pode instalar a versão mais recente por meio de um pacote Nuget .

O projeto compass tem um compilador que irá compilar seu sass para css. Ele foi desenvolvido para rodar no Windows, mas não foi bem testado nessa plataforma. Se você encontrar algum bug relacionado à plataforma, será um prazer ajudá-lo a corrigi-lo.

A bússola pode ser encontrada aqui: http://github.com/chriseppsein/compass

Em 2015, meu conselho atual é usar Node.js(plataforma Javascript do lado do servidor) e gulp.js(um gulp-sasspacote de nó de execução de tarefa), junto com (um pacote de nó para gulp implementar libsass - uma porta C rápida de Ruby SASS).

Você pode começar com um tutorial como este .

Prefere o pacote? Bundle Transformer agora finalmente usa libsass, permitindo compilação em alta velocidade.

Aqui está porque eu acho que você deve usar Node e Gulp.

• O Node é popular agora para ferramentas de front-end
  Muitos desenvolvedores da web estão usando o Node, uma plataforma para tarefas de desenvolvimento da web de front-end. Quer seja Grunt, Gulp, JSPM, Webpack ou qualquer outra coisa - está acontecendo agora mesmo no npm .
  Coisas que você pode fazer com pacotes npm:
  • Compile estilos com Sass, Less, PostCSS e muitos mais
  • Concatenar Javascript, CSS, modelos de HTML e muito mais
  • Escreva outras versões de JS e transpile ES6-7, Typescript, Coffeescript para ES5
  • Crie fontes de ícones a partir de arquivos SVG locais
  • Minificar js, css, SVG
  • Otimize as imagens
  • Salve as baleias
  • ...
• Configuração mais simples para novos desenvolvedores em um projeto
  Depois de configurar seu projeto package.jsone gulpfile.js, geralmente, bastam algumas etapas para colocá-lo em execução:
  
  • Baixe e instale o Node.js
  • Executar npm install -g gulp (instala gulp globalmente)
  • Executar npm install (instala pacotes de projeto localmente)
  • Executar gulp taskname (dependendo de como você configurou seu nome de gulpfile.jstarefa, uma tarefa que compila seu SASS, Javascript, etc.) é executada
• Compatível com Visual Studio 2015
  Acredite ou não, o VS2015 agora pode lidar com todas as coisas da linha de comando para você!

Você tem algumas opções típicas em termos de fluxo de trabalho:

• Faça com que seus desenvolvedores confirmem seu código compilado para o repositório
  Desvantagem: os desenvolvedores devem sempre executar gulpou algo semelhante para compilar recursos prontos para produção

• Seus servidores de construção | estágio | produção executam tarefas gulp antes das liberações.
  Essa forma pode ser mais complicada de configurar, mas significa que o trabalho é validado e construído a partir de um código-fonte não compilado.

Abaixo está minha antiga resposta de 2012, mantida para a posteridade:

De um desenvolvedor de front-end líder de projeto que trabalha com Ruby, Python e C # .NET, tenho o seguinte pensamento:

Sass & LESS

Eu prefiro usar o [Sass] [1] em um novo projeto, especialmente com o maravilhoso [framework Compass] [2]. O Compass é um ótimo trabalho e agrega muito valor ao meu processo. Sass tem uma ótima comunidade, documentação OK e um poderoso conjunto de recursos. Sass é uma biblioteca Ruby.

Uma alternativa ao Sass é [LESS] [3]. Possui sintaxe e recursos semelhantes, mas uma comunidade menor e uma documentação um pouco melhor. MENOS uma biblioteca JS.

Em termos de tendências, as pessoas tendem a adotar o Sass com o tempo, pois ele é bem desenvolvido, até mesmo oferecendo suporte aos recursos de nível 4 do CSS. Mas o LESS ainda é perfeitamente utilizável e agrega valor suficiente para garantir o uso.

Sobre o uso de Sass / LESS em um projeto ASP.NET

Embora eu prefira usar Sass, fazer o Ruby / Sass funcionar com projetos .NET pode ser doloroso, porque é difícil de configurar, é estranho e pode frustrar os desenvolvedores.

Você tem poucas opções:

• Sass: Ruby + Sass nativo
  • Pro: compilação de servidor mais rápida
  • Pro: capaz de usar as versões mais recentes do Sass
  • Contra: grande dificuldade para começar a trabalhar
  • Contra: Cada servidor ou estação de trabalho precisa de configuração do Ruby
  • Contra: Mais difícil para desenvolvedores .NET resolverem problemas de Ruby / integração
• Sass: porta Ruby .NET como [IronRuby] [5] + Sass
  • Pro: compilação de servidor SLOW (Frontend Devs reclamará!)
  • Pro: pode não ser capaz de usar as versões mais recentes do Sass
  • Pro: ligeiramente mais fácil de configurar do que Native Ruby
  • Contra: Cada servidor ou estação de trabalho precisa de configuração do Ruby
  • Contra: Mais difícil para desenvolvedores .NET resolverem problemas de Ruby / integração
• Sass: Estenda [.NET Bundling] [8] com [BundleTransformer] [7] + Sass
  • Pro: (usa IronRuby) Compilação de servidor SLOW (os desenvolvedores de front-end irão reclamar!)
  • Pro: (usa IronRuby) pode não ser capaz de usar as versões mais recentes do Sass
  • Pro: (usa IronRuby) Um pouco mais fácil de configurar do que Ruby nativo
  • Contra: Cada servidor ou estação de trabalho precisa de configuração do Ruby
  • Contra: Mais difícil para desenvolvedores .NET resolverem problemas de Ruby / integração
• Sass ou LESS: plugin do Visual Studio como [Mindscape Workbench] [4]
  • Pro: fácil de começar
  • Pro: compilação rápida
  • Contra: todo desenvolvedor que trabalha com estilos Sass precisa de um plug-in IDE
  • Contra: Não é possível alterar rapidamente os estilos no servidor - requer reprocessamento local
• MENOS: porta .NET como [DotLessCSS] [6]
  • Pro: compilação de servidor rápida
  • Pro: muito fácil de configurar
  • Pro: confortável para desenvolvedores C # .NET
  • Pro: sem requisitos de IDE / estação de trabalho / servidor - inclua no próprio aplicativo da web
  • Contra: não tem a versatilidade do SASS / Compass e nem sempre pode garantir a compatibilidade da sintaxe LESS.JS mais recente
• Sass: Virtualise linux + Ruby com [Vagrant] [9]
  • Pro: não é tão horrível de configurar quanto você pode pensar
  • Pro: Rápido !!
  • Pro: ferramentas de front-end mais recentes (Sass, Compass etc), atualizadas com o gerenciador de pacotes do Linux
  • Contra: a configuração inicial pode ser difícil para usuários não Linux
  • Contra: os requisitos de ambiente agora envolvem hospedar uma VM
  • Contra: VM pode ter problemas de escalabilidade / manutenção

Na minha opinião, LESS usando [DotLessCSS] [6] é a melhor escolha para seu projeto típico de desenvolvimento web, pelos motivos declarados acima.

Alguns anos atrás, descobri que o [DotLessCSS] [6] tinha bugs e limitações irritantes, mas usando o [DotLessCSS] [6] novamente em 2012 em alguns projetos, estou muito feliz com a configuração. Eu não apresentei problemas aos meus desenvolvedores usando Sass / Ruby e obtenho o máximo do valor do MENOS. O melhor de tudo, nenhum IDE ou requisitos de estação de trabalho.

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

Acabei de escrever um suplemento do Visual Studio com instruções detalhadas, incluindo capturas de tela sobre como colocar o Sass no Visual Studio. Confira aqui - http://giri.sh/2011/01/21/sass-for-visual-studio-2010/

Não é SASS, mas você pode dar uma olhada em nossa porta Less Css for .NET . Mas o Compass parece muito interessante, e acho que algo assim para Less seria uma ótima adição.

Acabei de encontrar isso ontem, parece bastante promissor, além de sass / scss, ele vai lidar com a autominificação de JS (não CSS - ainda) e combinação de arquivos. Uma coisa que espero é que alguém por aí crie um plugin VS para edição de arquivos sass / scss. O que eu achei problemático foi que, quando você tem um erro em seu código sass / scss, você apenas o encontra fazendo testes ou inspecionando os arquivos CSS gerados. Eu não coloquei todos os seus passos, mas até agora tudo bem.

https://github.com/xpaulbettsx/SassAndCoffee

Eu originalmente respondi a esta pergunta aqui .

#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