$_1:rgb(25, 25, 27),
$_2:rgb(252, 243, 243))
{
--colors-1: $_1;
--colors-2: $_2;
}
the code above when compiled to CSS gets interpreted as:
/* ... */
--colors-1: $_1;
instead of:
/* ... */
--colors-1: rgb(25, 25, 27);
for some reason sass mixin args when used in :root{} they don't get interpolated
as a workaround for this I use #{} like so
--colors-1: #{$_1};
Related
I have this assertion :
cy.get('.myelement').should('have.css', 'background-color','rgb(75, 221, 51)')
I want to replace it with hexadecimal representation as following:
cy.get('.myelement').should('have.css', 'background-color','#4BDD33')
but I get this error from cypress :
expected <.myelement> to have CSS property background-color with the value #4BDD33, but the value was rgb(75, 221, 51)
any help
You can do something like this:
Install the rgb-hex package
npm install rgb-hex
In your test suite file import the package
import rgbHex from 'rgb-hex';
In your test write:
cy.get('.myelement')
.invoke('css', 'background-color')
.then((bgcolor) => {
expect(rgbHex(bgcolor)).to.eq('4bdd33')
})
I'd take the reverse approach of Alapan -- I prefer to modify my expected and leave my actual values alone. To do this, you'd need a way to turn your expected Hex value into the rgb() format.
const hexToRgb = (hex) => {
const rValue = ParseInt(hex.substring(0, 2), 16);
const gValue = ParseInt(hex.substring(2, 4), 16);
const bValue = ParseInt(hex.substring(4), 16);
return `rgb(${rValue}, ${gValue}, ${bValue})`;
}
cy.get('.myelement').should('have.css', 'background-color', hexToRgb('4BDD33'));
If you wanted to include the # in the hex string, you would just need to ignore it in setting the values, most likely by increasing every number in the substring() functions by one.
Overall, I think that Alapan's solution is easier, but this is just something to consider.
I am working on an angular library and am trying to create a function that takes a color pallet and a name and returns a list so I can create CSS variables. Any help or ideas is appreciated!
$violets-palette: (
100: #e1cced,
200: #9064b3,
300: #6a408a,
400: #5d357e,
500: $violet,
600: #311a52,
700: #2d054c,
800: #28053d,
900: #1f0532
);
$reds-palette: (
50: #fee9e8,
100: #fbc8c6,
200: #f9a4a1,
300: #f77f7b,
400: #f5635e,
500: $precise-red,
600: #f1413c,
700: #ef3833,
800: #ed302b,
900: #ea211d
);
#function createVariables($palette, $name){
#each $key, $value in $palette {
#if $key != 'contrast' {
#if $key == 500 {
#return '--' + $name + ':' + #{$value};
} #else {
#return #{'--' + $name + '-' + $key} + ':' + #{$value};
}
}
}
}
:root{
//This would loop over the returned list
createVariables($reds-palette, 'precise-red');
}
I want it to add this to the style sheet...
--precise-red-50
--precise-red-100
--precise-red-200
--precise-red-300
--precise-red-400
--precise-red
--precise-red-600
--precise-red-700
--precise-red-800
--precise-red-900
Why your #function not works: With #return you end the function and #return's the result ... so your #function will stop on the first step in your loop.
So, if you really want to use a function first write the values to a map and return the map to a var.
But note: in SASS a #function is not the best choice to write code to css. It is more used to return a single value. If you would need a multiused solution use a #mixin (it is to write calculated code to the css file) or if it is a single task in your project a simple #each loop does the job as well.
One more thinking:
Only writing var names to css does not even helps without advising a value to it. So maybe you like to do:
:root {
--precise-red-50: #fee9e8;
--precise-red-100: #fbc8c6;
...
}
However. We had a very similar question here some days ago. Maybe you like to have a look ... It was about writing css color vars based on lists/maps similar to yours to css file. If with or without advising color to the css vars ... please adapt the code to your needs:
https://stackoverflow.com/a/66854088/9268485
Update: Additional Example
Here is another similar example from the last days. In this case the task was to write the color swatch build on a color direct to css vars. The shades had been calculated in same process:
https://stackoverflow.com/a/66850423/9268485
(If you are not confirm with Bootstrap colors and color maps here is a short overview to this example: https://getbootstrap.com/docs/5.0/customize/color/)
I am doing some calculations with in my mixins and need to return a value in %.
#include breakpoint(sm) {
padding-left: ($content-block) + %;
padding-right: ($content-block) + %;
}
This is supposed to return 10% but when running Compass, I get the following error:
error scss/main.scss (Line 265 of scss/_mixins.scss: Invalid CSS after
"...l ox--xs) + ": expected expression (e.g. 1px, bold), was "%;")
Any idea on how to make this work?
Seems like I must have some syntax error with my function?
Defined as so:
#function v($i, $a: $ba) {
$ca: $i*$a;
$x: $r*(sin($ca) + $p*sin($q*$ca));
$y: $r*(cos($ca) - $p*cos($q*$ca));
$z: $r*sin(($q + 1)*$ca);
#return $x, $y, $z;
}
in my output style.css document I still see the function calls:
--v: v($i)
In this case, you need to use interpolation where you call your function:
.selector {
--v: #{v($i)};
}
With Sass' ability to use variables, one would hope there is a large set of logic functions we can do with them.
Is there a way to do something like this?
$someVar: someValue !default;
#switch $someVar
{
#case 'red':
.arbitrary-css here {}
#break;
#case 'green':
.arbitrary-css here {}
#break;
#case 'blue':
.arbitrary-css here {}
#break;
}
However, I can't find anything in the Sass reference about this.
No there isn't any supported switch statement in sass but if you only need to use the switch statement to tweak a variable, you can use sass maps in a switch statement sort of way.
Using SASS maps in place of a switch statement
$newVar: map-get((
case_1_test_name : case_1_return_value,
case_2_test_name : case_2_return_value,
), $testVar);
So here's an example:
$vehicle: car;
$vehicleSeating: map-get((
car : 4,
bus : 20,
), $vehicle);
//$vehicleSeating = 4
The above example translated into if/else statements:
$vehicle: car;
#if ($vehicle == 'car') {
$vehicleSeating: 4;
} #else if ($vehicle == 'bus'){
$vehicleSeating: 20;
}
//$vehicleSeating = 4
Sass doesn't support Switch Case.
Sass only support four control directives:
#if
#for
#each
#while