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.
Here is a web page I made yesterday with Compass:
http://www.kahalawai.com/BuzzsCateringv2/
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:
http://www.kahalawai.com/BuzzsCateringv2/sass/screen.scss
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
On Jun 19, 2013, at 10:09 AM, Ken Anderson <[email protected]> wrote:
> Johnny,
>
> I'm facing the "Designers love Photoshop" problem myself. What's good about
> compass-style?
>
> Ken
>
> On Jun 19, 2013, at 2:39 PM, Johnny Miller <[email protected]> wrote:
>
>> If you need to code your site from a design (photoshop) I like this
>> framework: http://compass-style.org/
>>
>> If you are looking for something pre-baked Bootstap is probably the best and
>> you can find sites that offer themes for it.
>>
>> On Jun 19, 2013, at 3:03 AM, Samuel Pelletier <[email protected]> wrote:
>>
>>> Hi,
>>>
>>> Is there some Wonder developers that use CSS frameworks in their projects
>>> like Bootstraps and other. I tried Blueprint in the past and it was an
>>> horror with sub components, it assume absolute positioning and change the
>>> default table behaviour big time.
>>>
>>> Any pro/cons on these from your experiences? How do you build and manage
>>> your css?
>>>
>>> Samuel
>>>
>>>
>>>
>>> _______________________________________________
>>> Do not post admin requests to the list. They will be ignored.
>>> Webobjects-dev mailing list ([email protected])
>>> Help/Unsubscribe/Update your Subscription:
>>> https://lists.apple.com/mailman/options/webobjects-dev/jlmiller%40kahalawai.com
>>>
>>> This email sent to [email protected]
>> _______________________________________________
>> Do not post admin requests to the list. They will be ignored.
>> Webobjects-dev mailing list ([email protected])
>> Help/Unsubscribe/Update your Subscription:
>> https://lists.apple.com/mailman/options/webobjects-dev/kenlists%40anderhome.com
>>
>> This email sent to [email protected]
>
_______________________________________________
Do not post admin requests to the list. They will be ignored.
Webobjects-dev mailing list ([email protected])
Help/Unsubscribe/Update your Subscription:
https://lists.apple.com/mailman/options/webobjects-dev/archive%40mail-archive.com
This email sent to [email protected]
