attempting to customise Materialize css throws error - sass

I am trying to add a new colour palette to the materilize sass http://materializecss.com/color.html.
I have copied what I have seen in their sass files with a few new variables but it is not working.
in _color.scss I have added
$my-blue: (
"base": #0069B1,
);
in _variables.scss I have added
$my-primary-blue: color("my-blue", "base") !default;
then I modified a line in the _variables.scss to use my new color
from:
$button-background-focus: lighten($secondary-color, 4%) !default;
to
$button-raised-background-hover: lighten($my-primary-blue, 5%) !default;
I then get an error in compilation
>> Error: argument `$color` of `lighten($color, $amount)` must be a color

Figured it out, needed to add to a further color variable later on
$colors: (
"materialize-red": $materialize-red,
"red": $red,
"pink": $pink,
"purple": $purple,
"deep-purple": $deep-purple,
"indigo": $indigo,
"blue": $blue,
"light-blue": $light-blue,
"cyan": $cyan,
"teal": $teal,
"green": $green,
"light-green": $light-green,
"lime": $lime,
"yellow": $yellow,
"amber": $amber,
"orange": $orange,
"deep-orange": $deep-orange,
"brown": $brown,
"blue-grey": $blue-grey,
"grey": $grey,
"shades": $shades,
"my-blue": $my-blue,
) !default;

Related

Extend the $grid-breakpoints map-merge variable through project variables file

In the Bootstrap _variables.scss file there is some code setting the breakpoint sizes
$grid-breakpoints: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$grid-breakpoints: map-merge(
(
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
),
$grid-breakpoints
);
#include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
#include _assert-starts-at-zero($grid-breakpoints);
And I'm wondering if there is a way to add a new size to this list through a scss file outside of Bootstrap (since Bootstrap is through npm and will be overriden on update)
The size I'm trying to add is xxl: 1490px

Undefined variable error in Gulp when adding to grey scale in Bootstrap 4 Beta

I've started using Gulp for the first time today and I've been playing around changing some of the variables in the _variables.scss files to modify the theme. I added a grey to the grayscale in the colour system and when I came to compile this out to css with gulp I got an error:
Error: node_modules\bootstrap\scss_variables.scss Error: Undefined
variable: "$grey-950".
on line 135 of node_modules/bootstrap/scss/_variables.scss $body-bg: $grey-950 !default;
----------------------------^
My understanding of the _variables.scss file and the greyscale was that I could just slip an extra one in provided I mapped it out like so:
// stylelint-disable
$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #868e96 !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$gray-950: #222222 !default;
$black: #000 !default;
$grays: () !default;
$grays: map-merge((
"100": $gray-100,
"200": $gray-200,
"300": $gray-300,
"400": $gray-400,
"500": $gray-500,
"600": $gray-600,
"700": $gray-700,
"800": $gray-800,
"900": $gray-900,
"950": $gray-950
), $grays);
Then I should be able to use it for the page background:
// Body
//
// Settings for the `<body>` element.
$body-bg: $grey-950 !default;
$body-color: $gray-900 !default;
Is there a step I might be missing?
your $body-bg variable is grey-950 !default;
shouldn't it be gray-950 !default?

SCSS compiling error: expecting color

Live page in question:
http://a.nyaii.com
There is an error when .scss file is being compiled. I'm not unfamiliar with HTML/CSS, but .scss is totally new to me, so I have no clue how to fix this. Any solutions or hints are greatly appreciated.
This page is built with Gantry 5 template using joomla. After I include .scss files from MaterializeCSS I get this error.
Related lines are:
line triggering error Found in _variables.scss line 2-3
$primary-color: color("materialize-red", "lighten-2") !default;
$primary-color-light: lighten($primary-color, 15%) !default;
definition of function color Found in _color.scss line 402
#function color($color, $type) {
#if map-has-key($colors, $color) {
$curr_color: map-get($colors, $color);
#if map-has-key($curr_color, $type) {
#return map-get($curr_color, $type);
}
}
#warn "Unknown `#{name}` in $colors.";
#return null;
}
definition of $colors Found in _color.css line 340
$colors: (
"materialize-red": $materialize-red,
"red": $red,
"pink": $pink,
"purple": $purple,
"deep-purple": $deep-purple,
"indigo": $indigo,
"blue": $blue,
"light-blue": $light-blue,
"cyan": $cyan,
"teal": $teal,
"green": $green,
"light-green": $light-green,
"lime": $lime,
"yellow": $yellow,
"amber": $amber,
"orange": $orange,
"deep-orange": $deep-orange,
"brown": $brown,
"blue-grey": $blue-grey,
"grey": $grey,
"shades": $shades
);
definition of $materialize-red Found in _color.css line 10
$materialize-red: (
"lighten-5": #fdeaeb,
"lighten-4": #f8c1c3,
"lighten-3": #f3989b,
"lighten-2": #ee6e73,
"lighten-1": #ea454b,
"base": #e51c23,
"darken-1": #d0181e,
"darken-2": #b9151b,
"darken-3": #a21318,
"darken-4": #8b1014,
);
Above codes can be found here:
http://a.nyaii.com/templates/rt_antares/custom/scss/materialize.scss
http://a.nyaii.com/templates/rt_antares/custom/scss/components/_variables.scss
http://a.nyaii.com/templates/rt_antares/custom/scss/components/_color.scss
All dependencies can be found here
http://a.nyaii.com/templates/rt_ambrosia/custom/scss/components/
This is a known bug because Gantry5 uses sass 3.2 as compiler, they are working on it. See https://github.com/gantry/gantry5/issues/1117

Sass configuration map with default values

I am creating css using SASS and would like to make it possible for another developer to create a custom css by changing sass variables. This works fine when I in my base file use a single variable like this:
$text-color: #000 !default;
To test the override I create a new project where I first declare an override for the variable and then import the "base" sass file.
$text-color: #0074b;
#import "base-file";
But I would also like to use maps for configuration but then I do not get the override to work. How should I use configuration maps that can be overriden?
$colors: (text-color: #000, icon-color: #ccc );
Adding !default after #000 gives me a compilation error: expected ")", was "!default,")
Adding !default after the ) gives no error but the variables does not get overwritten either.
Any ideas on what I am doing wrong?
I don't think the functionality you want exists in standard Sass. I built this function though that does what you're asking for:
//A function for filling in a map variable with default values
#function defaultTo($mapVariable: (), $defaultMap){
//if it's a map, treat each setting in the map seperately
#if (type-of($defaultMap) == 'map' ){
$finalParams: $mapVariable;
// We iterate over each property of the defaultMap
#each $key, $value in $defaultMap {
// If the variable map does not have the associative key
#if (not map-has-key($mapVariable, $key)) {
// add it to finalParams
$finalParams: map-merge($finalParams, ($key : $value));
}
}
#return $finalParams;
//Throw an error message if not a map
} #else {
#error 'The defaultTo function only works for Sass maps';
}
}
Usage:
$map: defaultTo($map, (
key1 : value1,
key2 : value2
));
Then if you have a mixin for something, you can do this sort of thing:
#mixin someMixin($settings: ()){
$settings: defaultTo($settings, (
background: white,
text: black
);
background: map-get($settings, background);
color: map-get($settings, text);
}
.element {
#include someMixin((text: blue));
}
Outputted CSS:
.element { background: white; color: blue; }
So you would use it like this based on what you said in the question:
$colors: defaultTo($colors, (
text-color: #000,
icon-color: #ccc,
));
Bootstrap has solved this issue as:
$grays: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$grays: map-merge(
(
"100": $gray-100,
"200": $gray-200,
"300": $gray-300,
"400": $gray-400,
"500": $gray-500,
"600": $gray-600,
"700": $gray-700,
"800": $gray-800,
"900": $gray-900
),
$grays
);
https://github.com/twbs/bootstrap/blob/v4.1.3/scss/_variables.scss#L23

Is it possible to make multiple css sheets from single layout-scss page, and multiple variable-scss sheets?

I'm attempting to integrate scss with the .net theming functionality.
Ideally most scss would be in a dedicated directory, but each theme would have its own scss page containing exclusively the variable values for that particular theme.
The problem I'm encountering is that I need to pass placeholder variables to the _layout.scss sheet, and then have their values updated by the theme scss sheets. Currently the original null values are outputted.
SCSS Files
Resources/SCSS/_variables.scss
$theme_color: null;
Resources/SCSS/_layout.scss
#import "variables";
div {
color: $theme_color;
}
Themes/Blue/blue.scss
$theme_color: #0000ff !default;
#import '../../Resources/SCSS/layout';
Themes/Red/red.scss
$theme_color: #ff0000 !default;
#import '../../Resources/SCSS/layout';
Desired CSS Output Files
blue.css
div {
color: #0000ff;
}
red.css
div {
color: #ff0000;
}
You have it backwards. The !default flag tells Sass that this is the value to use if it doesn't a previous declaration doesn't exist.
$foo: red;
$foo: blue !default;
#debug $foo; // red
$bar: red !default;
$bar: blue;
#debug $bar; // blue
You need to place the !default flag on the default null values, not the theme values.

Resources