hi,
about sass targets, they could perhaps be described in environment.rb?
like:
Sass::Plugin.options = {
:browsers => ['ie6','standard']
}
One common pattern we (and I believe many others) have in our css
templates is to have one (or several) icon sprite files (png:s with
alpha channel), where IE < 7 has a special style sheet which overrides
the url to the sprite image with a png 8 bit version.
Here would be nice (and DRY) if the sass could be conditional with
regards to the browser. So, perhaps:
// target specific code
@browser ie6
!sprite-map-image = url(/icon-sprites-8bit.png)
@browser standard
!sprite-map-image = url(/icon-sprites.png)
#myselector
background-image : !sprite-map-image
..could generate one stylesheet for ie6 and another for standards-
compliant browsers.
to minimize the performance hit while developing, we could set a
development browser (or something like that) in the
Sass::Plugin.options hash to keep Sass from generating two files each
time we reload.
Another pattern is to set up self-clearing elements via the modern
clear-hack:
.my-cleared-div:after {
content : ".";
display : block;
height : 0;
clear : both;
visibility : hidden;
}
..but then you also have to set the zoom property for those same
elements for ie:
.my-cleared-div {
zoom : 1;
}
here i'm not yet sure how a macro+targets could solve the problem and
make things DRY, but I'm sure they could :)
I'd prefer to write something like this in sass to generate the above:
.my-cleared-div
-sass-clearing-macro
these are rough ideas still, but it'd be very cool if one could do
something like this with sass. it would save many hours of work and
reduce the number of mistakes caused by forgetting to keep browser-
specific stylesheets in parity with the master one.
// eric
On Jan 11, 6:21 pm, eric <[EMAIL PROTECTED]> wrote:
> yep, good ideas.
> the more I write things like:
>
> #stuff {
> -moz-border-radius-bottomright: 7px;
> border-bottom-right-radius: 7px;
> -webkit-border-bottom-right-radius: 7px;
>
> }
>
> ..something like sass macros really start to make sense.
>
> // eric
>
> On Jan 10, 12:33 pm, Geffy <[EMAIL PROTECTED]> wrote:
>
> > Something like view helpers for Sass?
>
> > Seems like an interesting idea. I like the suggestions of using a '-
> > sass-' prefix. Then if Sass couldn't find a helper it would just spit
> > the line through to the CSS or else it could gobble it. So if you used
> > "-sass-opacity : 0.5" the parser would try to locate a helper called
> > "opacity" and call that with whatever it has after the ":". Presumably
> > also the
>
> > -sass-opacity= !MyOpacity
>
> > version would just be given the result of the contents after the '='.
>
> > Certainly an interesting idea and would help with keeping style sheets
> > DRY as you wouldn't be needing to repeat the opacity level three
> > times. I might have a play at implementing this at the weekend, or at
> > the very least get an idea of whether its possible without
> > horrendously destroying the performance of Sass.
>
> > Targets would also be quite interesting, but I haven't a clue how
> > they'd be described within the Sass file.
>
> > Geoff
>
> > On Jan 9, 11:59 am, eric <[EMAIL PROTECTED]> wrote:
>
> > > hi,
> > > we've started converting all our css templates to sass. really
> > > beautiful stuff.
> > > While doing this I got an idea that I wanted to pitch here (I could
> > > not find any post about this in the group yet, but I guess you might
> > > already have thought about this).
> > > Wouldn't it be interesting if sass stylesheets could have macros that
> > > e.g. would take w3c css-properties and generate css that work in most
> > > browsers? A basic example would be the opacity property, where you
> > > basically have to write something like:
>
> > > #transparent {
> > > opacity : 0.5; /* ff 2 (or 3?)+), safari 2 (or 3+?) */
> > > -moz-opacity : 0.5; /* older ff */
> > > filter:alpha(opacity=50);
>
> > > }
>
> > > wouldn't it be nice if you in sass would simply do:
>
> > > #transparent
> > > opacity: 0.5
>
> > > and the ugliness would stay in the generated files. I'm sure there are
> > > a few more standard cases (corner-radius would be one) where this
> > > technique could be used. This could also be done through special
> > > comments or namespaced css selectors in the sass as well, e.g:
>
> > > #transparent
> > > opacity 0.5 //@my-opacity-macro
>
> > > #transparent
> > > -sass-opacity : 0.5
>
> > > I think I like the last style best, actually. it could also be
> > > implemented so that there were certain "targets" that the sass file
> > > could be generated for (and several ones at the same time, too). for
> > > example there could be an extra file generated for ie5.5 and 6 that
> > > contained only the #transparent filter:alpha(...) part in the example
> > > above.
>
> > > What do you think?
>
> > > cheers // eric
>
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Haml" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at http://groups.google.com/group/haml?hl=en
-~----------~----~----~----~------~----~------~--~---
