Confusing usage of SCSS version

[clementoriol]

Hello ! I must say I'm a bit confused about the usage of the iconizr's SCSS option outputs.

While you're providing some nice Sass / LESS example, some usage points remains obscure. Or maybe I'm just missing something..?

For exemple, since your exemple is exporting SCSS partials, I guess they're supposed to be included in the main stylesheet, like any partial. But which one to include ? If I want fallbacks, what can I do ? Am i just supposed to choose a stylesheet and include it and voila ? Or is there any way to have the same fallback as the CSS version ?

I guess the loader won't work, since it's designed to pick CSS files, and using partials they're aren't any.

Could anyone please enlighten me ? Is the SCSS outputs capable of providing fallbacks, and if so, how can I use them ? I'd love to be able to extend some icons classes, but without losing the great support iconizr provides !

Thanks a bunch !

[jkphl]

Hi @clementoriol,

first of all thanks for your feedback! As you're mentioning iconizr's LESS support, I assume you are using the Node / Grunt version, right? So actually your issue should rather go there ... Anyway, I'll try to answer your questions. ;)

As documented here, you can precisely control where the Sass output files will be created and how they will be named. In the simplest case, you will start with

render:  {
    scss: true
}

which will simply "turn on" Sass file output. The following files will be created into the main output directory:

|-- icons
|   |-- icons.png
|   `-- icons.svg
|-- sprite-loader-fragment.html
|-- sprite-png-data.css
|-- sprite-png-data.scss
|-- sprite-png-sprite.css
|-- sprite-png-sprite.scss
|-- sprite-svg-data.css
|-- sprite-svg-data.scss
|-- sprite-svg-sprite.css
`-- sprite-svg-sprite.scss

As you can see, the Sass files are created without preceding underscore (which happens to make them "main" files) and are all named sprite-*.scss — as the default file name prefix is sprite and we didn't configure anything else.

Now, if you run the Sass precompiler on these files, they will overwrite the corresponding CSS files, as they are named exactly the same (only they have the .css file extension of course). These are the CSS files that are expected by the HTML loader fragment with exactly these names at exactly this location. So if you opt for different Sass file names (e.g. by prepending an underscore _ to make them "partials"), all you need to do is ensure that they somehow end up as the CSS files listed above. To achieve this, you will want to import them into appropriately named Sass main files. I'll give you an example — imagine you have this file & folder structure (I tend to use a different directory for the Sass files — of course you need to configure the Sass precompiler appropriately to use separate input and output directories then):

|-- css
`-- sass
    |-- sprite-png-data.scss
    |-- sprite-png-sprite.scss
    |-- sprite-svg-data.scss
    `-- sprite-svg-sprite.scss

The Sass files should import their corresponding partial (see below) and may contain additional styles for your graphics:

@import './partial-png-data';

/* Extend the default styles as you like ... */
.svg-weather-clear {
    margin: 1em;
}

/* ... */

Next, use a render configuration like this (to make the Sass output files partials):

render:  {
    scss: '../sass/_partial' // In this example given as path relative to the main output directory
}

You will end up with this:

|-- css
|   |-- icons
|   |   |-- icons.png
|   |   `-- icons.svg
|   |-- sprite-loader-fragment.html
|   |-- sprite-png-data.css
|   |-- sprite-png-sprite.css
|   |-- sprite-svg-data.css
|   `-- sprite-svg-sprite.css
`-- sass
    |-- _partial-png-data.scss
    |-- _partial-png-sprite.scss
    |-- _partial-svg-data.scss
    |-- _partial-svg-sprite.scss
    |-- sprite-png-data.scss
    |-- sprite-png-sprite.scss
    |-- sprite-svg-data.scss
    `-- sprite-svg-sprite.scss

If you run the precompiler on the sass directory, it will process the main sprite-*.scss files (with each of them importing it's corresponding partial) and overwrite the css/sprite-*.css files. This way, you can easily implement your own customization layer on top of the automatically generated Sass files needing to recreate them each time you run iconizr. Seen from the HTML loader fragment's perspective, there's no difference between the genuine CSS files or the ones created by Sass, as long as they are named and located the same.

I hope this was helpful!?

Cheers, Joschi

[clementoriol]

Hey @jkphl, thanks for such a complete answer.

First of all, yeah, sorry, I wanted to post the issue in the grunt-iconizr repo, but I guess I mixed up the tabs..!

Anyway, thank you a lot for taking the time to detailing all of that. I was looking for more control over the selectors and the output style, and I thought the point of generating .scss files was to enable that. I was in fact more looking for something like the Mustache templates ;)

Personally, I'm still keeping the generated stylesheets as CSS instead of SCSS, even though I'm working on a full-SCSS project. It just seems more convenient because of the use of the loader, and I can still add custom styles someplace else. But it's a very personal choice, and I can understand how someone would want all-SCSS files.

Anyway, thanks for taking the time to write such a complete and quick answer :)

[jkphl]

You're welcome! And yes, in case you fancy customizing the selectors and stuff, the Mustache templates are your friends. Just create / configure cutomized versions and do whatever you like. Happy spriting! :)

Cheers, Joschi