I understand what Less offers me with CSS and I also looked at the twitter bootstrap product. But can someone explain how these compare to Compass and SASS. I really only understand what SASS is right now. How about Compass, what does that do for me.
I'm working on a Windows platform with ASP MVC3(4). Can I use Compass and SASS on that platform also?
SASS and LESS are basically the same; the ability to use variables and mixins etc, and then compile that to normal css.
Twitter Bootstrap is a css framework (including some javascript plugins) with all kinds of different styles to get you up and running quickly by defining grids, typography etc. It does offer some LESS files, but that has nothing to do with LESS itself.
Compass is more of a framework that kind of combines the above. It uses SASS with a lot more helper functions than what SASS and LESS offer themselves. It also includes a similar css framework to Twitter Bootstrap named Blueprint.
With tons of functions, I'm definately going to be using Compass for all my upcoming projects.
It's also very well documented! http://compass-style.org/reference/compass/
And about .NET/MVC3 support, take a look here: http://thedevstop.wordpress.com/2012/01/08/integrating-the-compass-css-framework-into-visual-studio/
I haven't tried it myself yet, but it seems like the best solution I've seen so far.
TL;DR
I'd say Compass is the way to go!
Twitter's Bootstrap framework is quite popular and is based on LESS. I checked its github repo, and it appears to have at least twice the activity of that of Compass, and more people favoriting the project. Just something to be aware of, you'll most likely be OK with whatever you pick, both seem very solid.
Related
I am going through the code school course "Sass Foundation". I am on a level where the professor tells about the compass framework.
When I installed it I realized that the code which it generates does not include the -ms- and -o-.
That is why I would like to ask professionals for some tips, and information which I cannot find here on Stack and on the Internet.
Is the Compass dead now? If yes what should I use instead of it?
(to be sure that it will add -ms-, -o- etc.)
Is the Sass dead now?
I did some research and the people say that I should not use the .sass but .scss, but on the other hand, if I use the .scss I won't be able to use the indented syntax. Should I avoid the indented syntax? If yes please specify why.
Since none of the answers are 100% accurate, I will provide my own answer.
Is Compass dead? Yes, apparently. According to their GitHub page:
Compass is no longer actively maintained.
Compass seems to be dying because it is written in Ruby and there are much faster Sass transpilers written in C/C++, mainly LibSass.
What should you use now? Based on this GitHub issue conversation, I would recommend switching to Bourbon for a base set of utility mixins.
Is Sass dead now? No, absolutely not. Modern Sass transpilers, including LibSass, fully support the Sass specification and work great.
Should you avoid the Sass syntax? No. In my opinion, the Sass syntax is cleaner, easier to read, and is definitely easier to type.
You can mix Sass and SCSS syntax. So you can import Bourbon SCSS syntax into your Sass syntax document and use the mixins without issue.
In conclusion, use the syntax that makes you happier.
Compass is not, dead - it did what it did well - but it's now been replaced in most peoples' work flows. People started using CodeKit shortly after that- and now they generally use task runners and build tools like, grunt, gulp, brunch, broccoli etc.
What you want is pre-processing and something that has autoprefixer. This could be any of the things mentioned above and can usually be installed and configured with a collection of npm modules. It all depends on the project you're working on. I'd say that gulp is the most popular right now. (I use Ember, so Ember CLI does that for me)
.sass is just another syntax (the original one, I believe). Most developers use .scss and I'd encourage you to stick with that syntax because it's more like CSS and when sharing projects people will thank you. (although I prefer stylus)
EDIT
Afterthoughts... I'd say that "Sass Foundation" is what is dead. That course is going to cause you more trouble then help you. Just write scss and learn new bits as you need them. It's just CSS with some helpful features like variables and nesting.
Assuming I'm understanding what you're asking, yes, I would transition to SCSS instead of using SASS. Why? Generally speaking, SASS combines both Sass and SCSS. Sass itself is an older syntax that primarily deals with indentation (instead of brackets, etc.) and doesn't present any real addition to CSS. On the other hand, SCSS is meant to extend CSS3 by providing additional functionality such as variables, nesting, and others. The other bonus is that technically speaking, every valid CSS3 stylesheet is also a valid SCSS stylesheet.
So to conclude, I would definitely consider making the change to SCSS as you will find this is the standard among a lot of frameworks and tools used in the industry, plus it is a newer syntax in comparison to Sass and provides a good deal more functionality to make your life that much easier as a developer.
If you want to find out more information, just take a look at their website: http://sass-lang.com/
So to answer your questions specifically:
No, it is not dead, it has just been updated to follow industry standards. There are many alternatives available. For example, a popular one is Gulp.
Sass isn't dead either, however most developers have moved to SCSS instead.
I would go with SCSS, due to what I have described above.
I'm developing a web app using python and twitter-bootstrap, and my CSS would really benefit from using LESS in order to generate my styles and themes. I want to inherit from classes provided by bootstrap, which means I've got to get the bootstrap source, and compile my LESS stylesheets against the boostrap .less files.
My question is two-fold:
1) The simplest way it seems to use LESS is not to actually compile stylesheets "on-the-fly" but to have a build step that I run each time I make changes to the styles. Is this typical? It seems like a lot of people run LESS dynamically in their server process, but it's an extra headache that I probably don't need, and I don't want to run less on the client side.
2) Thanks to LESS, my project now depends not just on bootstrap, but the bootstrap "source" - What's the best way to handle this in terms of my project management? I don't want to just absorb the whole of whatever the current version of bootstrap is into my git repos, because it seems like it would be a hassle to update it as newer versions of bootstrap come out (also feels icky!) Still though, I need to have at least the minified js/css in my project tree in order to deploy my app. How do people typically handle dependencies like this when developing web apps?
There are a couple of shoices:
You could use less.js in development, so you don't have to
compile each time you change your less code. You just use *.less files instead of *.css
You could use any of the GUI tools that will automatically recompile less code. I prefer LESS.app.
I use git submodule
I would have linked you to the same post as Pavlo above. Maybe there is no best CLEAN practice for this? Neither there is any magic "package manager" i think.
I went updates BS once and it was a bit of a hassle to find out all the variable names that have been changed in the LESS files.
For my website, I'm considering using Less.
Can I have some problem of compatibility in browser, problem with JavaScript or other problems? I know that is better than CSS but I don't know if I can have problems.
Although I prefer SASS over LESS (better syntax [loops and control structures] and it has some more capabilities => my opinion), it's generally a good idea to use a CSS-Framework. It safes time and unneccesary work. Just be sure to precompile your styles in Production mode. Don't do it clientside (might cause problems: disabled javascript, performance-issues...). If you precompile the CSS, you don't have to fear any problems, since native CSS gets delivered to the browser.
You can take a look at a good comparison here:
https://gist.github.com/820035
from the LESS docs:
As an extension to CSS, LESS is not only backwards compatible with CSS, but the extra features it adds use existing CSS syntax. [...] if in doubt, lets you fall back to CSS.
The best approach in production is to server-side compile it, while in development you can simply use the client-side javascript compiler:
http://lesscss.org/#-client-side-usage
also note that LESS is not strictly a framework (opposite of what Twitter Bootstrap is) but can easily be paired to one. Bootstrap itself has a LESS-enhanced version as well.
I agree with #Christoph. I prefer SASS too. Also Less or Sass aren't used to browser compatibility. They are used to add functionality to css.
You can look at that article here.
http://nittygrittyjs.com/blog/why-less-is-a-pain-in-the-sass/
I'm trying to decide on technologies for a presentation layer. I have heard Sass talked about enthusiastically but am resistant to learn something new without knowing why it's better than the alternative - in this case plain CSS. Any feedback on Sass would be welcome.
Edit: This is also a good discussion on this:
SASS: The Better, More Powerful CSS
I have a screencast that shows Sass and Compass (the Sass-based stylesheet framework) in action. It's an hour long, but it shows how Sass and Compass work and how they enable new ways of approaching website design by enabling sharing of implementation without compromising the content/presentation boundary.
Yesterday I asked a question here that got more momentum that what I thought it would. Here is the question link since it is related. I am interested now in the possibility of that using two frameworks together will be worst than using a JS framework and CSS from scratch or the other way around.
The question is clear, if you think there are arguments against using a CSS framework like Blueprint CSS please tell me what you think they are.
The main argument is that CSS is not really a programming language. A framework is meant to include reusable functions and data structures. CSS has neither of these constructs. A CSS "framework" is more akin to a template in a word processor. It provides ready-done design work, but it also imposes more constraints than starting from a blank slate.
Incidentally, this was what drove the development of Compass. It's similar to a CSS framework, but instead it uses the CSS metalanguage Sass, which does have functions and variables. Thus rather than (for example) having columns baked into the framework, you can write something like +columns(5) +column-margins(1em) and it will generate the appropriate CSS.
Browser compatibility? We're continually struggling to maintain IE6 support for the 1/3 of our clients that cannot or will not upgrade. Lots of CSS issues.
I use the YUI CSS libraries, but I'm not sure if that counts as a framework.
YUI handles the basics for fonts, layout (grids) and other formatting and makes it consistent across browsers and Operating Systems. It's under a free software license, also.
They also have a very useful interactive grid designer.