Since Sass version 3.3 there is a new data type: maps. Sass maps add dimensionality to lists and allow users to collect values into named groups and access those groups dynamically.
Questions tagged [sass-maps]
31 questions
33
votes
1 answer
Sass map.get() doesn't work. map-get() does. What gives?
Problem: map.get() doesn't work. map-get() does work.
I set up a map of color values and created a simple function to retrieve them.
While doing the retrieval, I followed the Sass documentation which states that you can retrieve a map value using…
LICHEN
- 566
- 1
- 4
- 10
15
votes
2 answers
SASS : How to generate a map using a loop
My goal is to generate a SASS map to store variants of colors that are stored in the following map:
$colors : (
jet : #333333,
wintergreen-dream : #588C73,
eton-blue : #8FC0A9,
sunglow :…
Vladimir
- 456
- 1
- 7
- 20
9
votes
1 answer
SASS : Check if a variable is a map
Is there something like is-map($some_variable) in SASS?
I have tried looking into the documentation but there is none there.
qtgye
- 3,580
- 2
- 15
- 30
8
votes
2 answers
Why do I get a Syntax Error: SassError: expected "{"?
The example given by the sass map.set documentation doesn't work, why is that?
@use "sass:map";
$font-weights: (
'regular': 400,
'medium': 500,
'bold': 700
);
map.set($font-weights, 'extra-bold', 900);
// ("regular": 400, "medium": 500,…
Wenfang Du
- 8,804
- 9
- 59
- 90
4
votes
2 answers
How can an empty Map be created in Sass?
The following code will create an empty map in the variable $test, but is there a proper way to accomplish the this? This seems too hackish to be the best way to get an empty map.
$test: map-remove((default:null), 'default');
@if type-of($test) !=…
roydukkey
- 3,149
- 2
- 27
- 43
4
votes
1 answer
SCSS/SASS get values from nth nested maps
I'm having trouble trying to retrieve values within nested sass maps. I have a map that looks like this:
$breakpoints : (
xl: (
page-width: 1170px,
gutter: 30px,
base-font-size: 17px
),
l: (
…
The Sloth
- 367
- 5
- 18
3
votes
0 answers
Gulp Sass error when using map.get() instead of map-get()
In Visual Studio I'm using Gulp to compile Sass, using gulp-sass 4.0.2. When I use map.get() to get a mapped value, I get an error in Task Runner Explorer, but when I use map-get(), it works fine. So apparently it recognizes the latter syntax, but…
jbyrd
- 5,287
- 7
- 52
- 86
3
votes
1 answer
Sass map dynamic keys
Is it possible to use variables as keys to define a map?
Example code
$types: (
'INPUT': 1,
'SELECT': 2,
'BUTTON': 3,
);
$colors: (
$types['INPUT'] : #f44336,
$types['SELECT']: #2196f3,
…
unloco
- 6,928
- 2
- 47
- 58
2
votes
2 answers
Check if SASS Map exists
How do I check if a SASS Map already exists and only define one if this is not the case?
I have tried:
@if ($myMap) {
// do someting
}
and
@if variable-exists($myMap) {
// do something
}
But I get the error "Undefined variable: "$myMap"?
I'm sure…
James Howell
- 1,392
- 5
- 24
- 42
1
vote
1 answer
SASS - Passing map through map_merge results in similar looking but not equivalent map
I'm trying to write a function to dynamically apply some transformations to a previously defined map of colours for an angular material theme. The problem is that the result that comes out of the function is wrong, somehow.
I've printed the result…
Tantelope
- 597
- 1
- 8
- 24
1
vote
1 answer
SASS Maps: Can I export the contents as CSS properties?
I am trying to find the most efficient way to output multiple color values from a function. The function (will eventually) take the base color and output a color scheme using sass functions (think complementary, tertiary, monochromatic, etc...).…
blur
- 29
- 9
1
vote
2 answers
SASS mapped property doesn't enter in IF else statement
I'm just pulling my hair right know.
I have a mixing that receives a simple object. Depending on the value of one of the properties should enter inside de IF statement or the ELSE one.
However it's always evaluating as TRUE and can't figure…
Barleby
- 618
- 2
- 9
- 20
1
vote
0 answers
Dynamically creating breakpoints with columns in sass
What I would like to do is loop through my media queries and columns in sass. For example, I have generated the column classes with the following code:
$__grid--columns: 12;
$__grid--breakpoints: (
small:0,
medium:667px,
large:1024px,
…
justin.esders
- 1,316
- 4
- 12
- 28
1
vote
1 answer
Passing multiple arguments in SASS Mixin to output set of classes or single class
$base-space: 1rem !default;
$space-map : (
'1o9': $base-space,
'1o8': $base-space/8,
'1o4': $base-space/4,
'1o2': $base-space/2,
) !default;
@mixin containers($new-space-map) {
@each $name, $value in $new-space-map {
…
user2359466
- 17
- 2
- 8
1
vote
1 answer
Use a particular Sass map depending on variable
I've run into an issue where it's easier for me to define two base maps that can be flicked between using a single variable (Seems easier for base, light/dark themes)
https://codepen.io/anon/pen/bLwNaW
I'm trying to set $theme-being-used, check it…
Sean Keenan
- 93
- 1
- 8