Less\sass done right in .NET
- 1. LessSass done right in .NET Pawel Pabich, Senior Consultant at Readify blog: www.pabich.eu/blog twitter: @pawelpabich email: pawel@pabich.eu
- 2. Why even bother with Less/Sass? Css is a factory of code duplication
- 3. Why ? • No nesting • No variables • No functions
- 4. Nesting
- 5. Variables
- 6. Functions
- 7. Less/Sass in Visual Studio • Chirpy (open source) • Code generation for Less and Sass • Mindscape Web Workbench (commercial) • Syntax highlighting(free) • Intellisense (free) • Code generation for Sass(free) and Less (paid) • Don’t use both at the same time
- 8. Problems with design time generation • Both, source of truth (less/sass) and autogenerated code (css) stored in source control and they can get out of sync • All depended files need to be re-saved when a base file gets changed • Can be solved at build time if the same tool is used inside VS and during the build • Or we can follow RoR guys and do it at runtime which is the most flexible soluiton
- 9. Generation of css at runtime 1/2 • Mindscape Web Workbench command line compiler • Same code as what runs inside their VS extension • Uses less.js and V8 exposed via a managed wrapper • 32 bit only, so needs to be run as an external process for 64 bit hosts • DotLess • Fully managed implementation • Does not seem to handle relative imports !!!
- 10. Generation of css at runtime 2/2 • Nodejs and less package • Needs to be run out of process • Files created by VS need to be converted to UTF- without BOM (byte order mark)
- 11. What about Sass ? • Ruby Sass compiler is veryyyyy slow on Windows, eg. 400 lines of Sass takes 30-40sec • There is no managed equivalent • There is a C/C++ version in the works but not yet complete https://github.com/hcatlin/sassc
- 12. Sample transforms https://github.com/pawelpabich/SampleBundleI mplementationsForLess
- 13. Links • DotLess – http://www.dotlesscss.org/ • Nodejs – http://nodejs.org/ • Less – http://lesscss.org/ • Sass - http://sass--lang.-com • Mindscapee workbench - http://visualstudiogallery.msdn.microsoft.com /2b96d16a-c986-4501-8f97-8008f9db141a • Chirpy - http://chirpy.codeplex.com/
Editor's Notes
- #2: The code will be on my blog and githubIs there anybody that doesn’t know abot Less/Sass?Is there anybody that would still use Css if Less or Sass were natively supported by all web browsers?
- #3: CSS does not even resemble a programming langue which means results in massive code duplication
- #5: Note how classOne is repeted multiple times
- #6: It does not seem like we have much code duplication here but let’s say we want to change secondory color from red to blue. With css, unless we have comments we dont know which red is primary and which one is secondary so we can’t really search and repleace red with blue
- #7: Again, imagine you want to add another prefix or remove one. You have to scan all files and find all places where you use border-radius. Let’s be honest: Global search and replace is rarly a good idea
- #8: Show go to definitionWhat is a problem with genereting css directly in VS?Personally I think that keeping auto-generated files in the source control is a bad idea. The main reason behind it is that the source of truth (Less) can diverge from its auto-generated counterpart (Css).
- #10: Show tranform based on Mindscape Compiler in 32bit and then DotLess with wired paths
- #11: So there is no perfect solution yet, personally I belive Mindscape is the best package
- #12: Iron Ruby is slow and second thing ruby is slow on WindowsTwice as many lines of Less takes half a secondC/C++ same guys that developed Ruby version but this time their goal is speed and mutli platform support