Undefined SASS operation - css

I get and error when trying to execute this in a #for loop.
That's the error:
Undefined operation "1 * calc(400px + 6%)".
And this is the line where the error comes from:
top: ($i + 1) % 3 * calc(400px + 6%);
And this is the #for loop:
#for $i from 0 through 9 {
$card: "card-" + $i;
.card-#{$i} {
left: ($i + 1) % 3 * calc(20% + 6.66% * 2);
top: ($i + 1) % 3 * calc(400px + 6%);
}
}
For the left prop it works perfectly, just as I expected it to work, but I don't get what the error is about when comes to top.


Put everything inside calc
#for $i from 0 through 9 {
$card: "card-" + $i;
.card-#{$i} {
left: calc(#{($i + 1) % 3}*(20% + 6.66% * 2));
top: calc(#{($i + 1) % 3}*(400px + 6%));
}
}

Related

My Del operator in GLSL appears to have an underflow error which results in a black area, how can I prevent that from happening?

I am writing a ShaderToy to model De Broglie-Bohm theory to help me visualize quantum mechanics from a deterministic perspective. A key part is the Del(∇) operator for calculating gradients for diffusing a field.
Right now I appear to have something that looks like it's diffusing, but I believe it runs into an underflow error and a black splotch appears. How do I prevent it from forming? This is what it looks like:
Here is the Del operator code:
vec4 del(in vec4[9] points){
vec4 deltaX = ((points[2 * 3 + 0] + points[2 * 3 + 1] + points[2 * 3 + 2])/3.
- (points[0 * 3 + 0] + points[0 * 3 + 1] + points[0 * 3 + 2])/3.)/2.;
vec4 deltaY = ((points[0 * 3 + 2] + points[1 * 3 + 2] + points[2 * 3 + 2])/3.
- (points[0 * 3 + 0] + points[1 * 3 + 0] + points[2 * 3 + 0])/3.)/2.;
return vec4((deltaX + deltaY).rgb, 1.);
}
vec4 delTex(sampler2D tex, ivec2 coord){
vec4[9] surroundingPoints = vec4[9](vec4(1),vec4(1),vec4(1),vec4(1),vec4(1),vec4(1),vec4(1),vec4(1),vec4(1));
for(int x = 0; x < 3; x++){
for(int y = 0; y < 3; y++){
surroundingPoints[x * 3 + y] = texelFetch(tex,(ivec2(coord) + (ivec2(x,y) - ivec2(1))), 0);
}
}
return del(surroundingPoints);
}
void mainImage(out vec4 fragColor, in vec2 coord) {
if(iMouse.x > 0. && iMouse.y > 0. && abs(coord.x - iMouse.x) < 5. && abs(coord.y - iMouse.y) < 5.) {
fragColor = vec4(1.,0.,1.,1.); return;
}
if(coord.x == 0. || coord.y == 0.){
fragColor = vec4(1.,0.,1.,1.);return;
}
// texelFetch(iChannel0, ivec2(coord), 0) +
fragColor = texelFetch(iChannel0, ivec2(coord), 0) + delTex(iChannel0, ivec2(coord)); return;
//fragColor = texelFetch(iChannel0, ivec2(coord), 0);
}

So I figured it out, the numbers were overflowing because the gradient was being added to the original pixel. I used the min() function to clamp the number to below 1. and there is no black square anymore.

Opencl 3D array indexing

I have 3D array (height, width, depth). My global worksize is (height * width * depth). and local work size is 1. In kernel code how I can get row offset and column offset?
I am doing the convolution operation in opencl. In C we do as follow,
// iterating through number of filters
for(c = 0; c < number_of_filters; c++)
{
for(h = 0; h < out_height; h++)
{
for(w = 0; w < out_width; w++)
{
vert_start = h * stride;
vert_end = vert_start + f_size ;
hor_start = w * stride;
hor_end = hor_start + f_size;
sum = 0;
for(c_f = 0; c_f < input_channel; c_f++)
{
for(h_f = vert_start; h_f < vert_end; h_f++)
{
for(w_f = hor_start; w_f < hor_end; w_f++)
{
// computing convolution
sum = sum +
(INPUT[(c_f * input_height * input_width) + (h * input_width) + w] *
FILTER[(c_f * filt_height* filt_width) + (h_f * filt_width) + w_f)]);
}
}
}
// storing result in output
OUTPUT[(c * out_height * out_width) + (h * out_width) + w] = sum;
}
}
}
I am not getting how to get that row offset and column offset from image for convolution in opencl?

SASS: convert RGBa back to hex?

I am aware SCSS can convert Hex to RGBa, but is there an option for the opposite?
My situation is this: I am given a colour palette that I am not allow to change. This includes a solid accent colour:
$color-accent: #039B15;
I've been asked to use this as a pale background colour, with 80% opacity. That's easy, I can just use rgba():
$color-accent-bg: rgba($color-accent, .2);
However, there is a situation where I need to nest elements with the same opaque background colour - because the colours are opaque they darken when nested.
Is there a way I can convert $color-accent-bg back to hexidecimal with SASS?
Ps: tried using lighten() but that seems to only work up to 66% light.

IMO simple rgba($color-accent-bg, 1) would do the trick - it returns same color as $color-accent.
Otherwise, you can use #ie_hex_str($color). It converts colors to hex string in #AARRGGBB format.
Converts a color into the format understood by IE filters.
Examples: ...
ie-hex-str(rgba(0, 255, 0, 0.5)) => #8000FF00
Since it returns string, you can remove AA part like in last line in following snippet:
$color-accent: #039B15;
$color-accent-bg: rgba($color-accent, .2);
$ie-hex: ie_hex_str($color-accent-bg); //#33039B15
$back-to-color-accent: unquote('#' + str_slice($ie-hex, 4)); //#039B15

Convert RGBa to Hex(transparent. no background, 8-bit color).
Tested solution i have written this code in scss and then converted to sass
In your Scss put:
// convert string to number
#function to-number($value) {
#if type-of($value) == 'number' {
#return $value;
} #else if type-of($value) != 'string' {
#error 'Value for `to-number` should be a number or a string.';
}
$result: 0;
$digits: 0;
$minus: str-slice($value, 1, 1) == '-';
$numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9);
#for $i from if($minus, 2, 1) through str-length($value) {
$character: str-slice($value, $i, $i);
#if (index(map-keys($numbers), $character) or $character == '.') {
#if $character == '.' {
$digits: 1;
} #else if $digits == 0 {
$result: $result * 10 + map-get($numbers, $character);
} #else {
$digits: $digits * 10;
$result: $result + map-get($numbers, $character) / $digits;
}
}
}
#return if($minus, -$result, $result);;
}
#function decimal-round ($number, $digits: 0, $mode: round) {
$n: 1;
// $number must be a number
#if type-of($number) != number {
#warn '#{ $number } is not a number.';
#return $number;
}
// $digits must be a unitless number
#if type-of($digits) != number {
#warn '#{ $digits } is not a number.';
#return $number;
} #else if not unitless($digits) {
#warn '#{ $digits } has a unit.';
#return $number;
}
#if $digits > 0 {
#for $i from 1 through $digits {
$n: $n * 10;
}
}
#if $mode == round {
#return round($number * $n) / $n;
} #else if $mode == ceil {
#return ceil($number * $n) / $n;
} #else if $mode == floor {
#return floor($number * $n) / $n;
} #else {
#warn '#{ $mode } is undefined keyword.';
#return $number;
}
}
#function rgba-to-hex($rgba){
$colorCode: ( '0','1', '2','3','4','5','6','7','8','9','A','B','C','D','E', 'F');
// 255 / 100 = 2.55
// 10 / 16 = 0.625
$alpha: alpha($rgba);
// ============================================= RED ================================
$redStr: ''+(red($rgba) / 16);
$index: str-index($redStr, ".");
// add decimal number incase it does not have and update index
#if $index == null { $redStr: $redStr+'.0'; $index: str-index($redStr, ".");};
// #debug $redStr '========================================================';
$redInteger : to-number(str-slice($redStr, 0, $index - 1));
$redDecimal: decimal-round(to-number(str-slice($redStr, $index + 1, $index + 1)) / 0.625);
// ============================================= GREEN ============================
$greenStr: ''+(green($rgba) / 16);
$index: str-index($greenStr, ".");
// add decimal number incase it does not have and
#if $index == null { $greenStr: $greenStr+'.0'; $index: str-index($greenStr, ".");};
$greenInteger : to-number(str-slice($greenStr, 0, $index - 1));
$greenDecimal: decimal-round(to-number(str-slice($greenStr, $index + 1, $index + 1)) / 0.625);
// ============================================= BLUE ============================
$blueStr: ''+(blue($rgba) / 16);
$index: str-index($blueStr, ".");
// add decimal number incase it does not have and
#if $index == null { $blueStr: $blueStr+'.0'; $index: str-index($blueStr, ".");};
$blueInteger : to-number(str-slice($blueStr, 0, $index - 1));
$blueDecimal: decimal-round(to-number(str-slice($blueStr, $index + 1, $index + 1)) / 0.625) ;
// if interger is 16 sent decimal should be 0
//#debug 'blue: '+ $blueStr +' interter: '+ $blueInteger +' decimal: '+ $blueDecimal;
// $blue: blue($rgba) / 2.55;
// ============================================= ALPHA ============================
$alphaStr: ''+ decimal-round((($alpha*100)*2.55) /16) ;
$index: str-index($alphaStr, ".");
#if $index == null { $alphaStr: $alphaStr+'.0'; $index: str-index($alphaStr, ".");};
//#debug 'alphaStr: '+ decimal-round(to-number($alphaStr)) ;
$alphaInteger : ''+to-number(str-slice($alphaStr, 0, $index - 1));
$index: str-index($alphaInteger, ".");
#if $index == null { $alphaInteger: $alphaInteger+'.0'; $index: str-index($alphaInteger, ".");};
$alphaInteger : to-number(str-slice($alphaStr, 0, $index - 1));
$alphaDecimal: to-number(str-slice(''+to-number(str-slice($alphaStr, $index + 1, str-length($alphaStr))) / 0.625, 0, 2)) ;
// #debug 'Integer: ==== '+$alphaInteger;
// #debug 'Decimal: ==== '+$alphaDecimal;
#return unquote("#"+nth($colorCode, $redInteger + 1)+nth($colorCode, $redDecimal + 1)+nth($colorCode, $greenInteger + 1)+nth($colorCode, $greenDecimal + 1) +nth($colorCode, $blueInteger + 1)+nth($colorCode, $blueDecimal + 1)+nth($colorCode, $alphaInteger + 1)+nth($colorCode, $alphaDecimal + 1));
};
Usage
$result : rgba-to-hex( rgba(192, 84, 84, 0.582));
#debug $result;
.my-class{
background-color: rgba-to-hex( rgba(192, 84, 84, 0.582));
}
OutPut
Terminal:
#C0535390
css build file:
.my-class{
background-color: #C0535390;
}
In your sass file put:
#function to-number($value)
#if type-of($value) == 'number'
#return $value
#else if type-of($value) != 'string'
#error 'Value for `to-number` should be a number or a string.'
$result: 0
$digits: 0
$minus: str-slice($value, 1, 1) == '-'
$numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9)
#for $i from if($minus, 2, 1) through str-length($value)
$character: str-slice($value, $i, $i)
#if (index(map-keys($numbers), $character) or $character == '.')
#if $character == '.'
$digits: 1
#else if $digits == 0
$result: $result * 10 + map-get($numbers, $character)
#else
$digits: $digits * 10
$result: $result + map-get($numbers, $character) / $digits
#return if($minus, -$result, $result)
#function decimal-round ($number, $digits: 0, $mode: round)
$n: 1
#if type-of($number) != number
#warn '#{ $number } is not a number.'
#return $number
// $digits must be a unitless number
#if type-of($digits) != number
#warn '#{ $digits } is not a number.'
#return $number
#else if not unitless($digits)
#warn '#{ $digits } has a unit.'
#return $number
#if $digits > 0
#for $i from 1 through $digits
$n: $n * 10
#if $mode == round
#return round($number * $n) / $n
#else if $mode == ceil
#return ceil($number * $n) / $n
#else if $mode == floor
#return floor($number * $n) / $n
#else
#warn '#{ $mode } is undefined keyword.'
#return $number
#function rgba-to-hex($rgba)
$colorCode: ( '0','1', '2','3','4','5','6','7','8','9','A','B','C','D','E', 'F')
// 255 / 100 = 2.55
// 10 / 16 = 0.625
$alpha: alpha($rgba)
// ============================================= RED ================================
$redStr: ''+(red($rgba) / 16)
$index: str-index($redStr, ".")
// add decimal number incase it does not have and update index
#if $index == null
$redStr: $redStr+'.0'
$index: str-index($redStr, ".")
$redInteger : to-number(str-slice($redStr, 0, $index - 1))
$redDecimal: decimal-round(to-number(str-slice($redStr, $index + 1, $index + 1)) / 0.625)
// ============================================= GREEN ============================
$greenStr: ''+(green($rgba) / 16)
$index: str-index($greenStr, ".")
// add decimal number incase it does not have and
#if $index == null
$greenStr: $greenStr+'.0'
$index: str-index($greenStr, ".")
$greenInteger : to-number(str-slice($greenStr, 0, $index - 1))
$greenDecimal: decimal-round(to-number(str-slice($greenStr, $index + 1, $index + 1)) / 0.625)
// ============================================= BLUE ============================
$blueStr: ''+(blue($rgba) / 16)
$index: str-index($blueStr, ".")
#if $index == null
$blueStr: $blueStr+'.0'
$index: str-index($blueStr, ".")
$blueInteger : to-number(str-slice($blueStr, 0, $index - 1))
$blueDecimal: decimal-round(to-number(str-slice($blueStr, $index + 1, $index + 1)) / 0.625)
// ============================================= ALPHA ============================
$alphaStr: ''+ decimal-round((($alpha*100)*2.55) /16)
$index: str-index($alphaStr, ".")
#if $index == null
$alphaStr: $alphaStr+'.0'
$index: str-index($alphaStr, ".")
$alphaInteger : ''+to-number(str-slice($alphaStr, 0, $index - 1))
$index: str-index($alphaInteger, ".")
#if $index == null
$alphaInteger: $alphaInteger+'.0'
$index: str-index($alphaInteger, ".")
$alphaInteger : to-number(str-slice($alphaStr, 0, $index - 1))
$alphaDecimal: to-number(str-slice(''+to-number(str-slice($alphaStr, $index + 1, str-length($alphaStr))) / 0.625, 0, 2))
#return unquote("#"+nth($colorCode, $redInteger + 1)+nth($colorCode, $redDecimal + 1)+nth($colorCode, $greenInteger + 1)+nth($colorCode, $greenDecimal + 1) +nth($colorCode, $blueInteger + 1)+nth($colorCode, $blueDecimal + 1)+nth($colorCode, $alphaInteger + 1)+nth($colorCode, $alphaDecimal + 1))
$result : rgba-to-hex( rgba(192, 84, 84, 0.582))
#debug 'peter =='+$result
I didn't test the sass file i just remove the semicolon, '{' and '}'.

You could try #039B1580 but i believe this method doesn't work on all browsers

How to generate grid in sass like stylus?

I can generate grid in stylus:
generate-grid(mod)
total = 0
for n, x in 0..11
total = round(8.3333333% * (x + 1))
.{mod}-{x + 1}
flex 0 0 total
.offset-{mod}-{x + 1}
margin-left total
But if I do this in sass then I'll get a bunch of mistakes. How to do it correctly?
#function generate-grid() {
#for $i from 1 through 12 {
.col-{$i} {
width: 8.3333333% * $i;
}
.offset-{$i} {
margin-right: 8.3333333% * $i;
}
}
}

interpolation is different than stylus in sass, it use #{}:
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#Interpolation_____

How can I use a loop to create a comma delimited value without an extra comma at the end?

I'm using #for to create multiple box-shadow arguments:
.myclass {
$bxsw : "";
#for $i from 1 through 10 {
$bxsw : $bxsw + " -" + $i + "px -" + $i + "px " + brown + ",";
}
box-shadow: #{$bxsw};
}
Which gives me:
.myclass {
box-shadow: -1px -1px brown, -2px -2px brown, -3px -3px brown, -4px -4px brown, -5px -5px brown, -6px -6px brown, -7px -7px brown, -8px -8px brown, -9px -9px brown, -10px -10px brown,;
}
Notice that last extra comma? This causes Firefox not to render the box-shadows. Is there a programmatic way of removing the last comma?

The simplest method is to append to a comma delimited list.
.myclass {
$bxsw : ();
#for $i from 1 through 10 {
$bxsw : append($bxsw, $i * -1px $i * -1px brown, comma);
}
box-shadow: $bxsw;
}
http://sassmeister.com/gist/7b8221953c7ca9813aea

Method #1: One option is to set a base value for $bxsw, then iterate the loop from 2:
.myclass {
$bxsw : "-1px -1px brown";
#for $i from 2 through 10 {
$bxsw : $bxsw + ", -" + $i + "px -" + $i + "px " + brown;
}
box-shadow: #{$bxsw};
}
Method #2: Another option would be checking if the $bxsw is not empty in order to append the comma:
.myclass {
$bxsw : "";
#for $i from 1 through 10 {
#if ($bxsw != "") { $bxsw: $bxsw + ", "; }
$bxsw : $bxsw + "-" + $i + "px -" + $i + "px " + brown;
}
box-shadow: #{$bxsw};
}
Method #3: And also we can check if the current iteration number is the last one or not:
.myclass {
$bxsw: ""; $from: 1; $to: 10;
#for $i from $from through $to {
$bxsw : $bxsw + "-" + $i + "px -" + $i + "px " + brown;
#if ($i < $to) { $bxsw: $bxsw + ", "; }
}
box-shadow: #{$bxsw};
}

Resources