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
Related
I'm developing a standard create-react-app-based webapp using WebStorm as an IDE. For this code:
$colors: ( 'primary': #000, 'error': #acda5a);
:export {
#each $key,
$value in $colors {
#{unquote($key)}: $value;
}
}
I'm getting the error Unknown pseudo selector 'export' -- any idea why?
Exporting sass variables with the webpack :export directive is not yet supported, please follow WEB-41662 for updates
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;
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?
I have a custom mixin in SASS to generate a table and it takes simply some arguments for generating the colors and little details. This is the beginning:
#mixin generate-table($background, $foreground, $border: 3px, $background-hover: null, $foreground-hover: null) {
#debug "Background: #{$background}";
#debug "Foreground: #{$foreground}";
$background-hover: hover($background) !default;
$foreground-hover: hover($foreground) !default;
The issue is that I always get an error with my hover-color function that color is NULL, even if I pass normal values to it (used debugging to see if they contain stuff or not). This is the function:
#function hover($color, $ratio: 15%) {
#if (lightness($color) > 50%) {
#return darken($color, $ratio);
} #else {
#return lighten($color, $ratio);
}
}
It gives me this error: Error: $color: null is not a color for `lightness' which doesn't make sense at all.
Now, as I was trying stuff out I figured that when I pass the values directly to the function (within the mixin) it works. So what is going on/what can I do to fix this issue?
EDIT: How I call the mixin:
table {
#include generate-table($background: #FFF, $foreground: #000);
I also tried using the colors as strings like this:
table {
#include generate-table($background: '#FFF', $foreground: '#000');
and of course without direct assiciation like thas as well:
table {
#include generate-table(#FFF, #000);
which all had the same result.
change the statements to these,it should work
#function hover($color, $ratio: 15%) {
#if (lightness($color) > 50%) {
#return darken($color, $ratio);
} #else {
#return lighten($color, $ratio);
}
}
#mixin generate-table($background, $foreground, $border: 3px, $background-hover: null, $foreground-hover: null) {
$background-hover:hover($color:$background)!default;
$foreground-hover:hover($color:$foreground) !default;
}
table{
#include generate-table($background:#FFFFFF, $foreground:#000000);
}
Hope this helps
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