Compass sprites: applying individual styles to every sprite class without writing out each sprite name manually - sass

I'm magic-importing my sprites:
// Creating a concatenated sprite image out of all sprites in the "/images/sprites/" folder
$sprites-layout: vertical
#import sprites/*.png
$sprites-sprite-dimensions: true // Image width and height will be applied to all sprite classes
+all-sprites-sprites // Generate all sprite classes
I would like to add custom styles to every sprite. I managed to add styles common to all sprites by declaring a class before magic-importing (magic import seems to extend this class for every sprite):
.sprites-sprite // This code will be applied to all sprite classes
#extend %inline-block
But I would also like to apply styles individual to each sprite. E. g. I would like to use min-width instead of width.
As a temprorary solution, I list all my sprite names manually:
=sprite-custom-styles($item)
+sprites-sprite($item)
padding-left: px(sprites-sprite-width($item) * 1.3)
min-width: sprites-sprite-width($item)
#each $item in foo, bar, baz, quux
.sprites-#{$item}
+sprite-custom-styles($item)
This is very burdensome, I would like to do this automatically.
Maybe magic importing creates a list of names that I can use? Or maybe I could define a mixin with a certain name that magic importing would call on every sprite class?

You can retrieve the list of names with the function sprite-names($map), like that:
#each $item in sprite-names($sprites-sprites)
...
Compass creates the sprite map $<map>-sprites after importing images (#import "<map>/*.png").

Related

Google Material 2 globally overriding the <md-toolbar> opacity and padding

"#angular2-material/toolbar": "2.0.0-alpha.6-2"
I want to change the background opacity and padding of the <md-toolbar> for my entire application.
My application is importing from index.html:
#import "default-theme";
#import 'variables';
#import 'overlay';
#import 'live-announcer';
I am using the Material 2 My thinking is that I need to somehow override these settings within the Material 2 toolbar.scss file (excerpted below):
md-toolbar {
...
padding: 0 $md-toolbar-padding;
...
background: md-color($md-background, app-bar);
}
I've dug into the toolbar.js file within the vendor folder and it appears to embed the entire toolbar.css... therefore it seems that the only place that I have the opportunity to override either of these style properties is within any of my components that use MdToolbar via my components' stylesUrls... (btw: this does work)
I'm guessing that I've missed something, because what I want to do seems like it would be a fairly common desire (although may it would be anathema to using Google Material --- I'm not certain how staunch the community is about elements such as padding, background transparency, and the like)... in either case my ignorance needs to be lifted in order to proceed with confidence.

C3.js make area chart not opaque

Im following using this example : http://c3js.org/samples/chart_area_stacked.html
I am going to make an area chart for many dataSets and I want to make it so the area chart is not see through. Is there any property I can set or class I can add that will make it so?
You can change the opacity to make the areas opaque by overriding below css rule:-
.c3-area {
opacity: 1 !important;
}
Note:- Markers and tooltip vertical line is not visible fully because of side-effects.
Which looks as shown below:-

Foundation SASS/SCSS Variables

I am trying to move over from Bootstrap to Zurb Foundation.
Bootstrap uses *-color for text colour and *-bg for background colours.
I'm a little confused with Foundation's naming scheme:
What is the difference between $topbar-link-bg-hoverand $topbar-link-bg-color-hover?
Both their names suggest that they change the background colour of a link in the top bar, both are given a colour.
Foundation structure has lots of details, if you search these variables in Foundation you can find them in _top-bar.scss file. Look at it, how used these variables:
// Apply the hover link color when it has that class
&:hover:not(.has-form) > a {
background-color: $topbar-link-bg-color-hover;
#if ($topbar-link-bg-hover) {
background: $topbar-link-bg-hover;
}
}
$topbar-link-bg-color-hover value can equal with color because use for background-color and $topbar-link-bg-hover value can equal with image or anything else(background css values).

Three.js shadow delete

I customized Three.js example 'webgl_loader_json_objconverter.html'.
(This file is simple obj file loader)
I want to delete model's shadow.
I erase lines 'scene.add({light})' inside code, then all models be black color.
I want to render model's original texture and original color.
shadow is not required.
Is it possible?

SASS/Compass: How do I set unique spacing for a single image in my sprite?

I am using SASS/Compass to automagically generate my sprites. I have set a default spacing for all of the images using:
$sprite-spacing:10px;
#import "sprite/*.png";
How do I change the spacing for one of the images in my sprite?
Compass does have a few per-sprite configuration options, and spacing is one of them. You could do:
$sprites-home-spacing: 15px;
If your sprite map is named sprites and your single sprite is named home. See the "Options per Sprite" section at http://compass-style.org/help/tutorials/spriting/customization-options/ for more.

Resources