Sorry Nathan, you're right about expanded style. Please note that Sass/
Scss styles work just fine. SmartSprite is, depending on perspective,
picky about its input.
Here are the updated tips and Sass/SmartSprite conversion results from
some quick testing.
Sass/SmartSprite tips
1. Use scss syntax. (Required for image directives to be left
untouched)
2. Background position must come before background image in property
order. (SmartSprite requires this)
3. Background image property must not be the last rule if using nested
style output. (Or else
SmartSprite will not see the last '}' and break the css)
4. SmartSprite reference directive (css property) comments must be
placed before the semicolon and wrapped in unquot("") unless the
semicolon is excluded entirely from the line
Sass/SmartSprite conversion test results
* Image directives are modified to be unrecognizable as SmartSprite
directives with Sass syntax but not with Scss syntax
* SmartSprite doesn't properly convert image or reference directives
from compact or compressed style output
* SmartSprite doesn't properly convert reference directives if they
are the last property in nested style output
Thanks,
Michael
On May 8, 12:23 pm, Nathan Weizenbaum <[email protected]> wrote:
> If you're using the expanded style, Sass won't produce output like the kind
> you're showing. It will produce CSS with the closing } on a separate line.
>
> If you can provide a full example of Sass styles that don't work, I'll try
> to see what's up.
>
>
>
> On Sat, May 8, 2010 at 10:10 AM, Michael <[email protected]> wrote:
> > Oh. About the Scss syntax. When I used the old-style indent syntax an
> > image directive outside of a style definition was modified as follows:
>
> > Before conversion:
> > /** sprite: button_arrows; sprite-image: url(../img/
> > button_arrows.gif); sprite-layout: vertical */
>
> > After conversion:
> > /* sprite: button_arrows; sprite-image: url(../img/button_arrows.gif);
> > sprite-layout: vertical */
>
> > I may double-check later :)
>
> > On May 7, 3:46 pm, Nathan Weizenbaum <[email protected]> wrote:
> > > The SCSS syntax is not necessary in order for the workaround listed to
> > work.
> > > Also, you can use the :expanded output format if SmartSprite is having
> > > issues finding the "}".
>
> > > On Fri, May 7, 2010 at 2:01 PM, Michael <[email protected]> wrote:
> > > > Thanks for the link tohttp://
> > github.com/nex3/haml/issues/closed#issue/143
>
> > > > The unquot("") workaround mentioned at the link above works nicely for
> > > > SmartSprite reference directive (css property) comments. I switched my
> > > > Sass source style to scss and the image directive comments are left
> > > > alone.
>
> > > > Based on some testing and the link above I've determined the following
> > > > rules for an unsupported SmartSprite workflow for those interested:
>
> > > > 1. Use scss syntax. (Required for image directives to be left
> > > > untouched)
> > > > 2. Background position must come before background image in property
> > > > order. (SmartSprite requires this)
> > > > 3. Background image property must not be the last rule. (Or else
> > > > SmartSprite will not see the last '}' and break the css)
> > > > 4. SmartSprite reference directive (css property) comments must be
> > > > placed before the semicolon and wrapped in unquot("")
>
> > > > Thanks,
> > > > Michael
>
> > > > On May 7, 12:18 pm, Nathan Weizenbaum <[email protected]> wrote:
> > > > > No, this is not currently (directly) supported. Seehttp://
> > > > github.com/nex3/haml/issues/closed#issue/143.
>
> > > > > If enough people want this, I could potentially add a special case,
> > but
> > > > I'd
> > > > > rather not.
>
> > > > > On Fri, May 7, 2010 at 11:41 AM, Michael <[email protected]>
> > wrote:
> > > > > > I use SmartSprites CSS Sprite Generator in my front-end development
> > > > > > work. Sass modifies SmartSprite directive comments and removes
> > > > > > property comments. Are there plans for an option to leave comments
> > > > > > alone?
>
> > > > > > Example SmartSprite directive:
> > > > > > /** sprite: button_arrows; sprite-image: url(../img/
> > > > > > button_arrows.gif); sprite-layout: vertical */
>
> > > > > > Sass Output:
> > > > > > /* sprite: button_arrows; sprite-image:
> > url(../img/button_arrows.gif);
> > > > > > sprite-layout: vertical */
>
> > > > > > Example SmartSprite property comment:
> > > > > > background: no-repeat url(../img/button_arrows_gray.gif) scroll
> > right
> > > > > > top #e5e5e5 /** sprite-ref: button_arrows; sprite-alignment: right;
> > */
>
> > > > > > SassOutput:
> > > > > > background: no-repeat url(../img/button_arrows_gray.gif) scroll
> > right
> > > > > > top #e5e5e5
>
> > > > > > I am using Haml/Sass 3.0.0.rc.4 (Classy Cassidy)
>
> > > > > > Thanks,
> > > > > > Michael
>
> > > > > > --
> > > > > > 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]<haml%[email protected]>
> > <haml%[email protected]<haml%[email protected]>
> > ><
> > > > haml%[email protected]<haml%[email protected]>
> > <haml%[email protected]<haml%[email protected]>
>
> > > > >.
> > > > > > For more options, visit this group at
> > > > > >http://groups.google.com/group/haml?hl=en.
>
> > > > > --
> > > > > 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]<haml%[email protected]><
> > haml%[email protected]<haml%[email protected]>
> > >.
> > > > > For more options, visit this group athttp://
> > > > groups.google.com/group/haml?hl=en.
>
> > > > --
> > > > 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]<haml%[email protected]><
> > haml%[email protected]<haml%[email protected]>
> > >.
> > > > For more options, visit this group at
> > > >http://groups.google.com/group/haml?hl=en.
>
> > > --
> > > 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] <haml%[email protected]>.
> > > For more options, visit this group athttp://
> > groups.google.com/group/haml?hl=en.
>
> > --
> > 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] <haml%[email protected]>.
> > For more options, visit this group at
> >http://groups.google.com/group/haml?hl=en.
>
> --
> 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
> athttp://groups.google.com/group/haml?hl=en.
--
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.
