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
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?
CSS does not even resemble a programming langue which means results in massive code duplication
Note how classOne is repeted multiple times
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
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
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).
Show tranform based on Mindscape Compiler in 32bit and then DotLess with wired paths
So there is no perfect solution yet, personally I belive Mindscape is the best package
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
