I haven't had time to go over all the issues in this thread (I will soon, I
hope) but one way to handle browser selection using what's already there is
to have JS dynamically set a class value on <body> that describes the
browser, like "gecko" or "ie6" or whatever. Then in Sass you can do
.header
background-image: url(/images/sprite-map.png)
.ie6 &
background-image: url(/images/sprite-map-8bit.png)
However, I like the idea of getting Sass to multiplex file for you. I'll
have to keep this in mind for 1.9.
- Nathan
On Jan 13, 2008 6:47 AM, eric <[EMAIL PROTECTED]> wrote:
>
> 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:21pm, 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:33pm, 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:59am, 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
-~----------~----~----~----~------~----~------~--~---
