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
1
vote
2 answers
Cutting down repeating code in Sass functions
I'm working on an HTML boilerplate that uses a lot of Sass to create a maintainable and easy to use code base. Part of that are a few functions:
// Returns the scale value found at $key.
@function get-type-scale($key) {
$value:…
Adi Purdila
- 15
- 5
0
votes
0 answers
How to add constant properties to Bootstrap map
Let's say I wanted to generate a responsive list of classes in bootstrap for a border: .customborder-sm-white, .customborder-md-white etc.
How would I also specify that the border for all those classes is always 3px high?
I can do the first part…
BrassMonkey
- 16
- 1
0
votes
1 answer
SASS Duplicating/Renaming a class containing map
I have an existing SASS map that looks like this:
@each $color, $value in $theme-colors {
.old-name-#{$color} {
color: $value;
}
}
I want to keep .old-name in my CSS but create a new alias with new naming. For other areas I'm just…
daggett
- 239
- 2
- 4
- 15
0
votes
1 answer
Bootstrap 5.2.3 adding custom color to map
I am trying to add an extra color to my Bootstrap 5.2.3 project, but it's not generating the bg-* or text-* classes.
I tried using the Bootstrap 5.1 solutions found on GitHub, like these:
$starorange: #df711b;
$custom-theme-colors: (
…
R-b-n
- 464
- 5
- 19
0
votes
1 answer
Any way to edit sass/scss file from styles tab in Chrome DevTools
Editing sass/scss is working via source maps only through code editor in devtools.
But when i make changes in elements -> styles tab, these changes are not saved to sass/scss file.
For example, if I change border-radius to another value, it will not…
AamirR
- 11,672
- 4
- 59
- 73
0
votes
1 answer
Sass error : function does not return a correct map
I´m trying to make a scss function to make a material colors palette.
This function should return a map but when I debug, I got this :
SassError: $map: gen-palette(green) is not a map.
This is my code :
$highlight-color:…
J.BizMai
- 2,621
- 3
- 25
- 49
0
votes
1 answer
Use function result as arglist
Is there an intelligent way to use the function result of map.get as an arglist without first saving the list to a variable?
@use "sass:map";
@mixin make-button-size($font-size, $padding-vertical, $padding-horizontal) {
// make-button-size…
MrMartiniMo
- 149
- 8
0
votes
1 answer
Get top X number of rows in sass map?
I've got this sass map:
$breakpoints: (
xs 0 $breakpoint-sm,
sm $breakpoint-sm + 1 $breakpoint-md,
md $breakpoint-md + 1 $breakpoint-lg,
lg $breakpoint-lg + 1 $breakpoint-xlg,
xlg $breakpoint-xlg + 1 $breakpoint-xxlg,
xxlg…
David
- 141
- 9
0
votes
1 answer
Loop through nested SASS Maps to create classes
I try to loop through nested sass maps to create button classes. is this possible?
my maps are nested like this:
$buttons: (
primary: (
border: 1px solid #ccc,
border-hover: 1px solid #ccc,
color: red,
color-hover: blue
),
…
nonnnnn
- 663
- 2
- 8
- 18
0
votes
2 answers
Possible to use a slice in a Sass map loop to start looping at the second instance?
I have a map of breakpoints as follows:
$grid-breakpoints: (
xs: 0,
sm: 568px,
md: 768px,
lg: 992px,
xl: 1280px,
xxl: 1500px
) !default;
And I need to loop over these, however I want to start the loop at the sm breakpoint.…
Jay
- 326
- 2
- 18
0
votes
1 answer
Trouble creating dynamic shaded color palette in SASS
I'm trying to dynamically create my color palettes from a set of base colors using SASS. I was previously creating each base color manually by first defining a set of color variables, then creating a map of each base color with various shades. Then…
no.
- 2,356
- 3
- 27
- 42
0
votes
1 answer
Auto generated sass maps
I'm trying to generate an automated system to define colors in SASS.
I have a map of colors named $brand-colors, and I would like the colors of this map to be used to generate the tints and shades in a second map, no matter how many colors there are…
Alessio Ripa
- 3
- 1
0
votes
1 answer
Merge multiple sass maps returns type string not map
Similar to this idea, I created a helper method to merge multiple sass maps.
https://stackoverflow.com/a/30740182/6413673
My Helper code as follows:
@function map-merge-all($maps...) {
$result: ();
@each $map in $maps {
$result:…
Breaker
- 319
- 2
- 11
0
votes
1 answer
How to create a recursive function in SASS that can accept a key and return a list of all ancestors?
I am trying to create a get-ancestors() function that takes a $key and returns all ancestors in a list like this:
$ancestors-map : (
'button' : (),
'small-button' : (
'button'
),
'hollow-button' : (
…
ungluck
- 1
- 1
0
votes
1 answer
Isolate nested sass map into new map
How can I isolate nested sass map into a new map? For example I have sass map like this:
$susy-setting: (
s: (
'columns': 4,
'gutters': 30px,
),
m: (
'columns': 8,
'gutters': 30px,
),
l: (
'columns': 12,
…
Nizamil Putra
- 582
- 1
- 7
- 26