I have the following list in SASS and some classes:
$list: 10px, 15px, 20px
.class1: nth($list, 1)
.class2: nth($list, 2)
.class3: nth($list, 3)
Is there any to make a default value for the list, so if I don't show 3 different values, the nth($list, 3) doesn't return an error and assigns a default value instead?
index() wasn't working for me cause it needs the value as second parameter.
I would recommend using a function as getter for the list values like:
$list: 10px, 15px, 20px;
#function getListEntry ($list, $index) {
#if length($list) >= $index {
#return nth($list, $index);
};
#return 0px;
}
.class1{
margin: getListEntry($list, 1)
}
DEMO
You can use Index and if functions of sass to check if the index exists in the list.
For example, if you set the default value with 2:
$value: index($list,4);
#if $value == null {
$value: 2;
} #else {
$value : nth($list, $value);
}
Hope it helps.
Regards.
Related
I want to perform mathematical operations using the font-size information with the function below. I remove the rem unit information of $font-size using the sass build-in string functions, but then I cannot perform mathematical operations because the value type is string.
Is there a way to convert a string value type to numeric value type in sass?
#use "../abstracts/variables" as *;
#use "sass:math";
#function em($value, $font-size) {
$length: str-length(#{$font-size}); //sample-think about it font-size 1.125rem
$trim: ($length - 3);
$data: str-slice(#{$font-size}, 1, $trim);
$result: math.div($value, $data);
#return $result + "em";
}
It would probably be better to use a helper function to remove the unit of $font-size such as this one.
#function stripUnit($number) {
#if meta.type-of($number) == "number" and not math.is-unitless($number) {
#return math.div($number, $number * 0 + 1);
}
#return $number;
}
#function em($value, $font-size) {
$data: strip-unit($font-size);
$result: math.div($value, $data);
#return $result + "em";
}
I need to create a function to get a list of all unique items from multiple lists. Let's consider the following example:
$list-1: top, left, color;
$list-2: top, color, border;
#function get-unique-items($lists...) {
$unique-items: ();
// do the magic
#return $unique-items;
}
#debug get-unique-items($list-1, $list-2);
// should return: top, left, color, border
Can anyone do the magic?
You can do like this:
#function get-unique-items($lists...) {
$unique-items: ();
#each $list in $lists {
#each $item in $list {
#if not index($unique-items, $item) {
$unique-items: append($unique-items, $item, comma);
}
}
}
#return $unique-items;
}
I want to check if the value provides to a function is a map or not.
#function func($props...) {
#if(is-map($props)) {
#return 'something';
}
#else {}
}
h1 {
color: func((color: red));
}
I'm getting the error:
(color: red) isn't a valid CSS value.
What am I doing wrong?
I personally never heard about any native Sass function called is-map. If you want to check the type of something, use the type-of function, so for example, checking for type-of($props) == map would solve your problem in this case.
#function func($props...) {
#if(type-of($props) == map) {
#return 'something';
}
#else {}
}
Because function returns map. Not a color as expected. Use map-get to get the access to properties values.
#return map-get($props, color);
And you have the variable argument. To get the first of arguments use nth($props, 1).
Sassmeister demo.
Update
If parameters in map are dynamic you can use this mixin instead of function.
#mixin print($declarations) {
#if $declarations {
#each $property, $value in $declarations {
#{$property}: $value
}
} #else {
#error "mixin print: $declarations is not specified";
}
}
Mixin sassmeister demo.
How do I return a hex code using the SASS lighten function?
#function returnHexValue($color){
#debug $color;
#if $color == "white" {
#return "#fff";
}
#if $color == "black" {
#return "#000";
}
#return $color;
}
When I use something like returnHexValue(lighten(#000,100%));, I still get the value returned as white instead of #fff.
You can use following function that will force Hex value
#function force-hex($color) {
#if type-of($color) == 'color' {
$hex: str-slice(ie-hex-str($color), 4);
#return unquote("\##{$hex}");
}
#return $color;
}
body{
color: force-hex(lighten(#000,100%));
}
Already there are few request in SASS github project to prevent conversion of Hex to a color value. You can follow below issues
https://github.com/sass/sass/issues/343
https://github.com/sass/sass/issues/363
I created the map with colors and their modifications (light, dark etc) and custom function for getting values from this map.
$colors: (
text: #383838,
cyan: (
base: #54c2e3,
light: lighten(#54c2e3, 15%),
dark: darken(#54c2e3, 15%)
)
)
#function color($color-name, $color-variant:null) {
#if $color-variant != null {
#return map-get(map-get($colors,$color-name),$color-variant);
} #else {
#if type-of(map-get($colors,$color-name)) == 'map' {
#return map-get($colors,'base');
} #else {
#return map-get($colors,$color-name);
}
}
}
But when i put this function inside rgba:
background: rgba(color(cyan), .5);
i get an error
Error: argument `$color` of `rgba($color, $alpha)` must be a color
Is there any possible way to use functions as parameters inside sass rgba function?
Maybe i'm blind, but i couldn't google an answer.
Based on my understanding, the problem was with the value returned by the custom function.
The below line of code within the #if part of the #else condition would actually not return anything based on your settings. You should first get the color's map based on the value passed as argument and then pick the base color value from that map.
#return map-get($colors,base);
So, the correct #return statement should have been like in the below code block.
#function color($color-name, $color-variant:null) {
#if $color-variant != null {
#return map-get(map-get($colors,$color-name),$color-variant);
} #else {
#if type-of(map-get($colors,$color-name)) == 'map' {
#return map-get(map-get($colors,$color-name),base); /* your problem was here */
} #else {
#return map-get($colors,$color-name);
}
}
}
CodePen Demo (the a tag's color and background are set using the output of the function).