If I use the following to generate a sprite map:
#import "ui-icons/*.png";
How can I get a reference to the sprite map that has been created. I want to pass it to the sprite-position($map) function.
Say you import via #import "icons/*.png", the variable $icons-sprites now contains the reference to the sprite-map function used by Compass' #import function.
The key is using $<folder>-sprites to reference that sprite map.
Related
I am trying to create a simple dark/inverted Bootstrap 4 theme (black background, white text) using the hackerthemes kit and overriding the bootstrap variables scss. Setting the background to black is simple enough with $body-bg: black, but I can't for the life of me figure out which variable controls text color.
I see headings-color defaults to inherit which I assume means inherit from the general text color, but I can't find where that is defined.
Help an idiot out? How can I set the base text color in Bootstrap 4 using SCSS?
Override body-color. In CSS text color of an element is controlled by the confusingly named color property. So the name of the bootstrap variable is derived from that.
In the same root folder as your bootstrap scss files, create a main.scss file. You can call it what you want: main, site, custom, etc.
/* main.scss */
/* import the necessary Bootstrap files */
#import "_functions.scss";
#import "_variables.scss";
/* make changes to the !default Bootstrap variables */
$body-color: #6D2077; //this is the text color
$body-bg: #F2F5F7; //this is the background color
$input-focus-border-color: #6D2077;
// Typography
//$font-size-base: 12px; // this changes the font-size throughout bootstrap
//$font-family-sans-serif: "Raleway", sans-serif;
//$font-size-base: 1rem;
//$line-height-base: 1.2;
/* here you can change the default colors, for example, text-danger. */
$theme-colors: ( "primary": purple, "danger": orange );
/* finally, import Bootstrap to set the changes! */
#import "bootstrap.scss";
Use a Scss compiler to convert the main.scss code to main.css.
Link to the main.css file from your code.
"#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.
I have a SASS built site, and I'd like to create a second color option for that site keeping the SASS code as DRY as possible.
One thought I had that partly works (and is here for clarity sake) is the following:
// regular theme (black)
#import "settings";
#import "styles";
// white theme
.white {
#import "white_settings";
#import "styles";
}
The above works for simple _styles.scss files, but when I try to use the same approach with Foundation #import "foundation", it only wraps some of the styles that in included in Foundation.
So my question is, is there any way to extend the styles I already have with a wrapping class (that would be set on the body tag) that would allow me to easily switch the color theme of the site without repeating the entire collection of SASS rules?
Optimal solution would also not repeat non-changed CSS properties like margin and padding, and only change the colors (which would be the only portion that would be different, and those are set in the settings).
Foundation has all of its styles wrapped in a mixin that prevents repeating it (ie. import once). This prevents you from reusing the code with different colors or other settings. Looking over the source of the mixin in question, you should be able to trick it into thinking the "module" hasn't been imported like this:
// the modules we want to import haven't been imported yet
$temp-modules: $modules;
.one {
// do some one specific stuff here
#import "styles";
}
// set $modules back to the state it was in before we did our import
$modules: $temp-modules;
.two {
// do some two specific stuff here
#import "styles";
}
// repeat as necessary
I have a Foundation 5 template and I was wondering if it is a good idea to change the media query ranges.
They are currently set in the _global.scss file, but I want to overwrite them through my _custom.scss file, so I don't have any troubles upgrading the framework in future. The problem is if I set the variables $small-range, $medium-range, etc. in my _custom.css file nothing happens.
My app.scss currently includes:
#import "settings";
#import "foundation";
#import "custom";
How can I do this without editing the default settings and components files?
Thank you in advance.
Add variables before #import "foundation"
#import "settings";
$small-range: (0em, 40em); //max-width 640px, mobile-only styles
$medium-range: (40.063em, 64em); // min-width 641px and max-width 1024px
$large-range: (64.063em, 90em); // min-width 1024px and max-width 1440px
$xlarge-range: (90.063em, 120em); //min-width 1441px and max-width 1920px
$xxlarge-range: (120.063em); //min-width 1921px
#import "foundation";
or you can create your own file such as my_settings and add these styles into this file:
#import "settings";
#import "my_settings";
#import "foundation";
If you want to change some range into px, better change all ranges into px from em
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").