I've been recently reading up on SASS(Simply Awesome StyleSheets) on codeschool but when I actually tried installing it, it turns out I need to install RVM(Ruby) as SASS was written in Ruby.
So I have a two questions here:
I understand that there are other CSS frameworks like LESS but they don't seem to be as powerful/popular. How true is this? I wouldn't mind switching to LESS if does not need Ruby at all.
Is there a compiler for SASS in .NET or Java family of languages and if there is, how production ready is it? I do not want to keep checking the generated CSS file when debugging or making changes.
1.I understand that there are other CSS frameworks like LESS but they don't seem to be as powerful/popular. How true is this? I wouldn't
mind switching to LESS if does not need Ruby
Here is my take on this.
LESS like SASS is a CSS preprocessor but it is pure JS based and thus can be parsed directly by browser if you include less.js file in head. You may also generate a CSS file offline and then ship it to production. Please note that you will need node.js to actually run LESS. LESS is built on top of it. LESS if not more powerful than SASS, is equally powerful in terms of features. Go ahead and use LESS, you'll never miss a thing about SASS.
2.Is there a compiler for SASS in .NET or Java family of languages and if there is, how production ready is it? I do not want to keep
checking the generated CSS file when debugging or making changes.
There is actually a C version of SASS called libsass. See its site at http://libsass.org/.Libsass is just a library. To run the code locally (i.e. to compile your stylesheets),you may use SassC https://github.com/hcatlin/sassc , an implementer written in C.
This really comes down to what you want to your preprocessor to do and which fits your project requirements the best. People will argue either or all day long. For me what I see the main difference is that in LESS I can't do as many programatical things, like loops, for each statements. That kind of thing.
SASS is ruby based, therefore you need to have ruby installed. There are extensions you can use in Visual Studio to make SASS compiling easier. Web workbench and Sassy Studio. Support will be coming to Web Essentials some time soon.
So I think it comes down to which you think fits best. I prefer to use LESS in Visual Studio (using DotLess) just because I feel it's better supported and I don't need to install Ruby (I big consideration when working with multiple developers).
Related
I've purchased CodeKit a while ago, it makes front end projects really easy to setup.
The problem is, I'm in what I call a 'Front-end tool hell'
I've checked out Grunt and Yeoman a while back, and I don't see the point of using these tools if I'm using CodeKit. Am I missing a point?
Short answer: No. You don't miss anything
Longer answer: All of those tools (maybe with the exception of Yeoman) tackle the same thing, but from completely different directions.
Codekit is great to start, because it's like a Swiss army knife of tools, where you actually don't have to do that much work to get it going. Easy to configure and totally easy to use, especially if you don't have any command line experience.
If you want to have things more flexible and you need maybe more than the provided tasks (running a server, creating proxy connections, FTP uploads, having tools included which CodeKit misses); or if you simply need to integrate your builds in continuous integration environments, you will most likely end up with a command line build tool, and also most likely with Grunt. Grunt's biggest strength is in having multiple configurations for different environments. So if you want to have the same code compiled in different ways for different destinations, that works wonderfully with Grunt.
If Grunt can't offer you more than CodeKit, fine, stick with CodeKit!
Grunt has also its limitations, especially in terms of execution time and intermediate file results. That's because in Grunt you take a defined process and configure it. Gulp on the other hand allows you to define the process itself, thus making it even more flexible.
Oh, and concerning Yeoman: If you have a basic setup and like it, write a Yeoman generator and easily scaffold new ones by the push of a button. Or, if you are new to things like, let's say Angular, take a community generator and see what the pros think it's best for such an application. I'm not sure if CodeKit can do "project templates" by now, but that's the idea behind it.
Hope this helped.
What are the pros and cons of ussing Assetic vs Grunt in my project? Which one is "better"? I heard that dealing with Assetic is a lot of pain, for me it looks ok, but I never used it that much. I found this http://konradpodgorski.com/blog/2014/06/23/better-way-to-work-with-assets-in-symfony-2/ and Grunt looks pretty good. I could try both myself but I'm in the middle of fixing a project and I need to choose some technology ASAP, so I need tldr; version of advantages and disadvantages of using either technology.
never used grunt together with symfony2, but i promised to myself that i will do it the next time.
building and watching for changes including possibly livereload are definitly the pro's for grunt! another pro for grunt is that there are thousands of plugins available, which could potentially do stuff like image-minification, uncss and so on. i don't think there is an easy way to do this with assetic.
overall it possibly depends on your usecase. if you simply just want to concatenate files it is probably easier to use assetic. otherwise i would definitly choose grunt (i'm confident in using grunt, just because i used it a lot)
Assetic is PHP so you can manipulate it at run time. Bundles can extend your templates and add stylessheets etc automatically.
On the other hand grunt is JavaScript and cant be integrated into your program at run-time but it supports a wider array of tools and is easier to configure.
I have quite a few co-workers and friends with existing brownfield, messy javascript applications who would like to start transitioning to some sort of js module system. I've tried to help them out in the past by showing them how to refactor to requirejs but I'm starting to think that is a bad approach.
The problem is usually that the nature of their globals-all-over-the-place code conflicts with the asynchronous nature of AMD, and as much as I believe in the AMD approach, they have bigger concerns than my lectures on the "proper" way to do module loading.
Browserify in the meantime removes the async consideration and is more straightforward but adds in a whole build step. For people who are not using bundling or any sort of a build process (or just the default one in visual studio) this is again, too much overhead.
So what I really want is a simple module system that allows people to define and require things. This is a half-step toward getting things working properly, they can include their dependencies with regular script tags and define them into the module system manually. I even wrote such a system because...hey, that's really easy.
Today someone pointed out to me that it should be possible to actually use just the client-side pieces of Browserify to achieve this. I agree. However, I can't really find any documentation anywhere nor just the Browserify client-side stuff in isolation.
After sitting down and dissecting a built browserify file I've concluded that no, what I want to do is not possible.
For one thing browserify doesn't seem to expose a define or even a require keyword. For another, it does some minor rewriting of the combined modules which would be very difficult to achieve during runtime.
I ran across a dynamic module loader that works well with Browserify. You can use it for development to expose "require" globally on the client side. Works great.
https://github.com/manvalls/drq
A solution to your problem could be:
https://github.com/LarsBV/browser-node-loader
I wrote this due to various sourcemap bugs in browsers, and too many / alternative,
configuration ways in gulp/browserify/watchify.
It has a build step but it only needs to be run when there is new dependencies.
I don't recommend this approach for production, but it is so much easier in development.
This is very new, and untested in anything but latest chrome, firefox, with some adjustments
in the generated script I think it will work in even ie6.
I have gotten used to/fell in love with Stylus for preprocessing css and Jade for simplifying my HTML in the Node.JS world. Now I am back to working on a Spring 4 MVC project and would like to use those technologies in this environment.
Is it possible to integrate them (I am using Gradle)? A quick google search for Stylus Java Gradle returned no helpful responses.
Thanks!
Stylus and Jade seem to be popular in the JavaScript world, not so much in the JVM world.
Here are the closest tools I know about, with good support in the JVM world:
LESS, for a CSS preprocessor replacement
Groovy Templates are quite close to Jade
Spring Framework 4.1 will also include some improvements for handling static resources (see SPR-10933 and SPR-11800)
For Jade, you can use Jade4J (https://github.com/neuland/jade4j). There is a Spring-ready version too.
The approach we took was to use Webpack to transpile everything (Pug, Stylus, Less, Coffee, etc) then using the generate-source goal in Maven (might be slightly different for Gradle) we include an exec for webpack.
We are thinking about switching our project from plain CSS to LESS or SASS. As we use tomcat, it would be quite helpful to have the SASS/LESS compiled dynamically to CSS and server to the client as CSS, similar as http://modsass.sourceforge.net/
After googling a while, I think there is no such module yet - or did I miss something?
Client-side LESS-compiling might be a bit slow (especially on mobile devices).
The fallback solution would be to statically compile the files, but a dynamic solution I would expect that development is eased a bit.
I'm happy to hear your suggestions!