How to overwrite SCSS variables when compiling to CSS - sass

I'm trying to use jqtouch theming which is based on SASS and COMPASS. I have a file custom.scss with the most simple code, one import and one variable to overwrite:
#import 'jqtouch';
// Override variables
$base-color: #fe892a;/* The default base which is later used for toolbar, list, and button backgrounds.*/
When I now compile the scss file to css, it will basically just generate the jqtouch css with my filename. The color specification is nowhere to be seen, although the variable is definitley correct per documentation (Official Guide) and in the jqtouch.scss file, which I import for costumizing.
I'm running Sass 3.2.9 and Compass 0.12.2 on a Windows machine.
I've tried it with more variables and different file imports, but the result is always, that my override values are not incorporated.
The ruby config file for compass seems to be unsuspicious.
Does anyone have an idea what goes wrong in the process so that my override values are ignored?

You're setting the color after it has already been used. Basically, what you're trying to do is this:
$color: red;
.foo {
background: $color;
}
$color: green;
Depending on how jqtouch is written, you might not be able to modify the colors at all. You need the variables to be set as a default in order to overwrite them ahead of time:
$color: green;
$color: red !default; // red is only used if $color is not already set
.foo {
background: $color; // color is green
}
So your code should be written as such:
// Override variables
$base-color: #fe892a;/* The default base which is later used for toolbar, list, and button backgrounds.*/
#import 'jqtouch';

Related

Change Bootstrap 4 text colors

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.

Chrome DevTools points to wrong sass file in sourcemap

I generate my CSS and Source Mpas from SASS files using gulp-sourcemaps and I have noticed that sometimes, when an element has a color defined as a variable, the sourcemap points to the variable's SCSS file, rather than the element's SCSS file.
So if, for example, an element is styled in, let's say, "_nav.scss" and the color variable is defined in "_colors.scss":
.navigation-top a {
font-weight: 600;
color: $color__topnav-text;
transition: color 0.2s;
}
The CSS Source Map for this element points to "colors.scss" in Chrome's DevTools instead of "nav.scss". This is the case only for a few elements. DevTools still points to the correct SCSS file for most elements, which use color variables.
Is this a Chrome bug, or is there a problem with the generated Source Map?

Multiple themes using SASS

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

Including a fallback solid color in a Compass Sass gradient?

I am using compass on my site, and have created a style such as:
#include background-image(linear-gradient(top, #C9C9C9, #FFF));
The problem is, this doesn't incluse a solid-color fallback for older IEs. Do I simply have to include a line like
background-color: #c9c9c9;
Or is there a way to have Compass handle this automatically for me?
As far as I know there is no way in Compass to have the background color automatically computed from a background-image declaration, because of the way it is built : you could have several gradients in there, and Compass can't really know which of all those colors is supposed to be the base one.
One way I advice is to create a gradient-wrapper like the following :
=gradient-horizontal($startColor: #555555, $endColor: #333333)
background-color: $endColor
background-color: mix($startColor, $endColor) // Second possibility
+filter-gradient($startColor, $endColor, horizontal)
+background-image(linear-gradient(left, $startColor, $endColor))

How to get the value of a CSS property in SASS?

I'd like to store the current value of a property for later use. It's already been solved for jQuery.
The issue is that I'm using a #mixin to apply a CSS hack in several places (Justified Block List) and I'd like to restore the font-size property in .block-list * (currently all text in sub-elements is just collapsed).
Unsatisfactory workarounds:
Save the global default font size in a separate file and pass it to the #mixin on #import. This is of course in the general case not the same font size as the objects which the mixin is applied to.
Save the font size whenever you change it, and pass that. This tangles up the files involved, since it's not very elegant to #include the typography stylesheet in several otherwise unrelated files.
Use more jQuery.
Possibly satisfactory workarounds:
Override the font size with a stronger rule on the first ancestor which changes it. This could be tricky to determine.
There's no way to tell the computed value of a property until the styles are actually applied to a document (that's what jQuery examines). In the stylesheet languages, there's no "current" value except the initial value or the value you specify.
Save the font size whenever you change it, and pass that seems best, and #BeauSmith has given a good example. This variant lets you pass a size or fallback to a defined global:
=block-list($font-size: $base-font-size)
font-size: 0
> li
font-size: $font-size
If you have a mixin which is doing something "hacky" with the font size, then you will probably need to reset the font size as you have noticed. I suggest the following:
Create a Sass partial to record your projects config variables. I suggest _config.sass.
Define your base font-size in _config.sass:
$base-font-size: 16px
Add #import _config.sass at the top of your main sass file(s).
Update the mixin to reset the font-size to your $base-font-size:
#mixin foo
nav
font-size: 0 // this is the hacky part
> li
font-size: $base-font-size // reset font-size
Note: If you are using the SCSS syntax, you'll need to update the examples here.

Resources