| Hi Ken,
A lot of things! The biggest thing is that it gives you SASS (Syntactically aware stylesheets). So before you would have to code your CSS with something like this:
#SomeID { ...rules }
#SomeID > div { ...rules }
#SomeID > div .btn { ...rules }
With SASS you have a .scss file that gets compiled to CSS and with SCSS you can nest your rules i.e.
#SomeID {
... rules > div { ... rules .btn { ... rules } }
}
And then you run this little background thread that senses changes to your .scss file and it compiles it down to css taking your nested rules and writing them out for you.
But wait there is more!
Variables so:
$green: #somergbvalue;
Then you could have:
#SomeID { >div { .btn { color: $green } } }
So if you ever have to change the font color you now just update the variable and all it's references in the css file get updated. You can use variables for font sizes, widths, heights etc...
Now suppose you are using CSS3 like drop shadows, text shadows, rounded corners etc... Each browser might have it's own implementation i.e.
-webkit-* -moz-* -ms-*
Who wants to remember all that? So with compass you have these things called mixins which are basically functions that can accept variables. So if you want to create a drop shadow you do something like:
@include drop-shadow(rba(black, 0.6) 1px 1px 2px);
And then it will handle compiling it into all the different versions for each browser so that you have the most browser coverage. Compass has a whole bunch of helper functions like that and you can use them in combination with SASS functions i.e. suppose you want a linear gradient background you would use a rule like:
@include background-image(linear-gradient(#5c7c60, #465848));
And then it will create all the browser versions plus a fallback for browsers that don't support linear gradients. It also has all the mixins for CSS3 animations which makes doing CSS3 animations super easy.
There is more but that's some of the things I like the best about it. And if you use it in combination with the WebStorm IDE you get code sense for all of this. It will pick up on the mixins, variables etc... You can even create your file watcher inside WebStorm but I've been using the compass one.
I've only tried in on a Mac so I might have a little regression testing to do on IE but you can see how it lends itself to really clean HTML markup. Here is the link to the .scss file:
Way simpler right?
Best,
Johnny
|
Aloha,
|
Mr. Johnny Miller
Web Development Manager
Kahalawai Media Company
Lahaina, HI 96761
tel: (808) 661-7962 | mobile: (808) 283-0791
website | e-mail
|
![]()
|
Do not post admin requests to the list. They will be ignored.
Webobjects-dev mailing list (email@hidden)
Help/Unsubscribe/Update your Subscription:
This email sent to email@hidden
|