SASS variable

Question

Im actually trying to get a value of an input and assign it to background color like this @import "compass";

.r {
$red:attr(value)
}
.g {
$green:attr(value)
}
.b {
$blue:attr(value)
}
&body {
background:rgb($red,$green,$blue)
}
. Is it possible ? ( using sass /HTML only ) thanks !

Answer 1

Hi Valentin Janvier ,

Good question. There are at least two parts to this question.

Firstly, SASS has a built-in function for mixing colors, so you don't have to create one from scratch.

http://www.tutorialsteacher.com/sass/sass-color-functions

Secondly, the attr() function is used with the content property. I've tried to use it in other ways, but it just doesn't do much of anything else.

Can you please expand a bit on where you planned on retrieving the "value of an input" from? Maybe I'm just not reading it right at the moment. :P

Answer 2

Also, some additional notes (unrelated to your question, but related to the code you posted):

It seems like you are creating local variables (inside the brackets) expecting to be able to use them in other contexts (outside of the brackets). Maybe consider declaring them as global variables (outside any/all brackets) instead or using a mixin.

The "&" is meant to be used inside brackets and won't work with &body. Maybe think of "&" as a selector concatenator? I think it was probably a typo here though.

Anyway, just some additional observations. I hope this helps! :)

Answer 3

Hi Valentin Janvier,

I'm glad we can be of some help to you. :)

Thank you for clarifying the inputs. I would have to agree with Calviղ here as I have not run across any situation where HTML is able to pass values to a preprocessor (e.g. SASS). But, I would imagine that you could fake it without JS by pre-setting all the different combinations in a color picker and showing/hiding the respective background div. However, I would never do that because even if I had the patience, the sheer volume of CSS code generated by my preprocessing shenanigans will likely exceed IE's cap at best and more likely have terrible performance implications (even if minified). The ROI of using a little bit of JS is astronomically higher.

Answer 4

Ok , thank you very much for your time

Answer 5

You cannot pre-processing SASS with HTML contents, SASS don't recognize HTML content during pre-process to CSS.

Answer 6

Thank you for your answers. If you want to know more about my work, i try to take a value of Three input type range from HTML and to apply this in the body background : rgb(input1,input2,input3). I could easy use javascript but apparently we can do this without any js.

Answer 7

Anytime! 👍