Change SCSS output

[marjanbajc]

Hi,

can you change SCSS output?

Let me explain what I would like to do.

It would be nice if I could join background-position and height/width in one class and put this rules under :before selector

The way we are doing our icons is with background-position and pseudo selectors.

Is this even possible?

So the SCSS would look like this:

//common class and mixin
@mixin svg-sprite {
background: url("sprite-95857db8.svg") no-repeat;
}

.icon {
&:before {
content: "";
display: block;
@include svg-sprite;
}
}
icon-arrow-left-gray {
&:before {
background-position: 0 6.594594594594595%;
width: 27px;
height: 44px;
}
}

Thank you for any help or direction.

[jkphl]

Hey @marjanbajc,

I guess you've got two option:

1. You may prepend the SCSS file name with an underscore (so that Sass won't render a stylesheet out of it by default) and then create your own main SCSS file, importing svg-sprite's one and @extend the auto-generated selectors one by one (which would be a manual process).
2. You may go ahead and create your own SCSS template and use it for rendering the stylesheet. Please see here for some information.

Cheers, Joschi

[marjanbajc]

The second I submitted this I found template/dest. And I've been searching for a while how to do it. Oh well :)

Thank you for the reply. And really really great plugin, great work!

[jkphl]

You're welcome! :)

[marjanbajc]

One more thing...how do I display all of the icons in the template?

[jkphl]

I'm not sure if I really understand your question, but there's the mode.<mode>.example option (see here) to create a demo page of your sprite. Is this what you're after?

[marjanbajc]

Let me clarify.

I have in 'template':

@mixin svg-sprite {
background: url("{{sprite}}") no-repeat;
content: "";
display: block;
}

.{{common}} {
&:before {
@include svg-sprite;
}
}

Which works perfectly. Not sure how to get a list of icons/classes.
I've tried
{{#svg}}
{{name}}
{{/svg}}
but it doesn't work.

[marjanbajc]

Cool, found it in node_modules. Thanks again for your help.