4 ms·

Screencast: A CSS Framework that is actually a framework.

69 points by chriseppstein 17y ago

dustineichler 17y ago
pretty interesting. blueprint and sass is a worthwhile combination i wouldn't fight. otherwise, i'd hesitate to use one or another as a standalone tool. haml(unrelated here) is the exception.
zain 17y ago
Hour long video behind the submitted link. Some bite-sized info about Compass for those who don't want to watch the whole thing: With Compass, you write your styles in Sass which is compiled to CSS. This helps with code reuse and general cleanliness, not unlike the tool demo'd in the Reddit keynote at PyCon. You can use Compass to create CSS styles on top of a framework like BluePrint or YUI, which is why Compass calls itself a meta-framework. Website: http://compass-style.org/ http://compass-style.org/ More Info: http://wiki.github.com/chriseppstein/compass http://wiki.github.com/chriseppstein/compass
erlanger 17y ago
What about multiple selectors in SASS? I don't see any in http://haml.hamptoncatlin.com/docs/rdoc/classes/Sass.html http://haml.hamptoncatlin.com/docs/rdoc/classes/Sass.html or in the screencast. I'd usually rather do: p.date, .author h3 { font-family: italic; color: #777; } /* Or whatever */ Than: =fancy_shmancy font-family: italic color: #777 p.date +fancy_shmancy .author h3 +fancy_shmancy
CGamesPlay 17y ago
Hour long video explains what I could have picked up in 10 minutes of reading. SASS looks like it could have been so much more. Its syntax differs from CSS in ways that it doesn't need to (specifically, requiring newlines and prohibiting multiple rules or selectors on a single line), and the lack of local variable also decreases one's mobility with the tool. It's a good start, but it could have been so much better.
- chriseppstein 17y ago
  When there's something better, I'll gladly use that. Until then, I think it's sad that you've chosen to focus on the "negatives" that are largely style instead of the positives that are the substance of the screencast. For what it's worth, in about a day or so of hacking on the sass source code, one could change it to be white-space inactive and to just rely on css tokens. If someone cared enough, they could add that feature. But, it turns out no one has, because it takes all of 15 minutes to get used to it.
- nex3 17y ago
  Sass actually does have local variables. All variables are local to the level of nesting at which they're declared. Also, multiple properties on a single line is a feature planned for version 2.4.
luigi 17y ago
I used Compass + 960.gs on a recent project. It took me a while to understand, but once I got it, I really saw the value. Simply put, it makes producing good looking websites easier. I particularly like the helpers provided in the Utilities Module: http://wiki.github.com/chriseppstein/compass/compass-core-utilities-module http://wiki.github.com/chriseppstein/compass/compass-core-ut... I actually find Sass more useful than Haml. I find Haml gets in my way too much, and I'd rather do things in ERB.
- sant0sk1 17y ago
  I love HAML most of the time but my major beef with it is that it won't allow midline Ruby injection like ERB. This gets really lame, for instance if you have a <p> and you want to use multiple link_to()s inside it. SASS + Compass, on the other hand, has been a boon to my productivity.
  - chriseppstein 17y ago
    haml 2.2 has universal interpolation and when you put that together with say a markdown filter, writing your paragraphs of text in haml should be a breeze.
jpcx01 17y ago
Great link. If you haven't checked this out, do so. I've been using SASS for about 2 years and Compass for about 6 months now and its completely changed that way I do CSS development. Chris Eppstein is doing amazing work. I think it'll revolutionize how web stylesheets are built.
- csbartus 17y ago
  for me haml/sass is a change like jquery was for html/js now i have a superclean html structure with haml, the same superclean css structure with sass. compass adds grid & other useful mixins and run-time automatic compilation of sass and haml files. in plus everything is dry, my own set of mixins reusable in every web app are growing fast. with compass growing up i think we'll have an API-like building tool for web frontends.
bobzimuta 17y ago
Coincidentally I'm watching Reddit's keynote from PyCon and they wrote their own CSS compiler called C55. Their keynote is at http://blip.tv/file/1951296/ http://blip.tv/file/1951296/ and the slides at (starting with slide 29) http://www.slideshare.net/kn0thing/ride-the-snake-reddit-keynote-pycon-09?type=powerpoint http://www.slideshare.net/kn0thing/ride-the-snake-reddit-key... The thing I like most about what they've done is to embed the functionality into CSS, rather than writing a new meta-language.
- chriseppstein 17y ago
  Good ideas keep getting re-invented. There's about 4 or 5 versions of this with slightly different syntax, etc. But Sass alone has scripting, mixins, and libraries. These are the language features that make compass possible. From the feature set I see there, that is where Sass was about 1 to 1.5 years ago.
Dancrew32 17y ago
I see the advantages to having CSS variables and all, but can anyone tell me why this (Sass/Compass) would be any better than me defining variables (like grid widths/colors/etc..) in something like PHP, running it through a CSS document and outputting that document as a CSS file?
- chriseppstein 17y ago
  I tried. If my screencast didn't convey that information, I failed. Did you watch it?

69 points by chriseppstein 17y ago

pretty interesting. blueprint and sass is a worthwhile combination i wouldn't fight. otherwise, i'd hesitate to use one or another as a standalone tool. haml(unrelated here) is the exception.

zain 17y ago

Hour long video behind the submitted link. Some bite-sized info about Compass for those who don't want to watch the whole thing: With Compass, you write your styles in Sass which is compiled to CSS. This helps with code reuse and general cleanliness, not unlike the tool demo'd in the Reddit keynote at PyCon. You can use Compass to create CSS styles on top of a framework like BluePrint or YUI, which is why Compass calls itself a meta-framework. Website: http://compass-style.org/ http://compass-style.org/ More Info: http://wiki.github.com/chriseppstein/compass http://wiki.github.com/chriseppstein/compass

erlanger 17y ago

What about multiple selectors in SASS? I don't see any in http://haml.hamptoncatlin.com/docs/rdoc/classes/Sass.html http://haml.hamptoncatlin.com/docs/rdoc/classes/Sass.html or in the screencast. I'd usually rather do: p.date, .author h3 { font-family: italic; color: #777; } /* Or whatever */ Than: =fancy_shmancy font-family: italic color: #777 p.date +fancy_shmancy .author h3 +fancy_shmancy

CGamesPlay 17y ago

Hour long video explains what I could have picked up in 10 minutes of reading. SASS looks like it could have been so much more. Its syntax differs from CSS in ways that it doesn't need to (specifically, requiring newlines and prohibiting multiple rules or selectors on a single line), and the lack of local variable also decreases one's mobility with the tool. It's a good start, but it could have been so much better.

chriseppstein 17y ago
When there's something better, I'll gladly use that. Until then, I think it's sad that you've chosen to focus on the "negatives" that are largely style instead of the positives that are the substance of the screencast. For what it's worth, in about a day or so of hacking on the sass source code, one could change it to be white-space inactive and to just rely on css tokens. If someone cared enough, they could add that feature. But, it turns out no one has, because it takes all of 15 minutes to get used to it.
nex3 17y ago
Sass actually does have local variables. All variables are local to the level of nesting at which they're declared. Also, multiple properties on a single line is a feature planned for version 2.4.

luigi 17y ago

I used Compass + 960.gs on a recent project. It took me a while to understand, but once I got it, I really saw the value. Simply put, it makes producing good looking websites easier. I particularly like the helpers provided in the Utilities Module: http://wiki.github.com/chriseppstein/compass/compass-core-utilities-module http://wiki.github.com/chriseppstein/compass/compass-core-ut... I actually find Sass more useful than Haml. I find Haml gets in my way too much, and I'd rather do things in ERB.

sant0sk1 17y ago
I love HAML most of the time but my major beef with it is that it won't allow midline Ruby injection like ERB. This gets really lame, for instance if you have a <p> and you want to use multiple link_to()s inside it. SASS + Compass, on the other hand, has been a boon to my productivity.
- chriseppstein 17y ago
  haml 2.2 has universal interpolation and when you put that together with say a markdown filter, writing your paragraphs of text in haml should be a breeze.

jpcx01 17y ago

Great link. If you haven't checked this out, do so. I've been using SASS for about 2 years and Compass for about 6 months now and its completely changed that way I do CSS development. Chris Eppstein is doing amazing work. I think it'll revolutionize how web stylesheets are built.

csbartus 17y ago
for me haml/sass is a change like jquery was for html/js now i have a superclean html structure with haml, the same superclean css structure with sass. compass adds grid & other useful mixins and run-time automatic compilation of sass and haml files. in plus everything is dry, my own set of mixins reusable in every web app are growing fast. with compass growing up i think we'll have an API-like building tool for web frontends.

bobzimuta 17y ago

Coincidentally I'm watching Reddit's keynote from PyCon and they wrote their own CSS compiler called C55. Their keynote is at http://blip.tv/file/1951296/ http://blip.tv/file/1951296/ and the slides at (starting with slide 29) http://www.slideshare.net/kn0thing/ride-the-snake-reddit-keynote-pycon-09?type=powerpoint http://www.slideshare.net/kn0thing/ride-the-snake-reddit-key... The thing I like most about what they've done is to embed the functionality into CSS, rather than writing a new meta-language.

chriseppstein 17y ago
Good ideas keep getting re-invented. There's about 4 or 5 versions of this with slightly different syntax, etc. But Sass alone has scripting, mixins, and libraries. These are the language features that make compass possible. From the feature set I see there, that is where Sass was about 1 to 1.5 years ago.

Dancrew32 17y ago

I see the advantages to having CSS variables and all, but can anyone tell me why this (Sass/Compass) would be any better than me defining variables (like grid widths/colors/etc..) in something like PHP, running it through a CSS document and outputting that document as a CSS file?

chriseppstein 17y ago
I tried. If my screencast didn't convey that information, I failed. Did you watch it?