CODEWITHSUNDEEP
javascriptsass
mark-cas
mark-cas

Reputation: 21

Is it possible to use a user input's value in sass?

I am creating a colour palette and i have seen a lot of ways online to it using sass which i am using in the project, however i am taking a user input (hex code) and wish to print them out with different percentage variants - to show the user a lighter/darker version of #ff0000 for example.

Is this possible? I have seen things such as:

$color: #3cb878;
$light: lighten($color,15%);
$dark: darken($color,15%);

And ideally i would like "$color" to be the user input and then i can print multiple percentage variants out.

Thanks!

Upvotes: 2

Views: 780

Answers (3)

Reactgular
Reactgular

Reputation: 54811

Yes you can!

There is a SASS compiler written in JavaScript that you can run inside the browser.

https://github.com/medialize/sass.js/

You'll have to perform a search and replace on the SASS source code via JavaScript, and then compile it. You can then show this to the user by inserting it into the DOM.

To run the library is really simple:

<script src="dist/sass.js"></script>
<script>
  var scss = '$someVar: 123px; .some-selector { width: $someVar; }';
  sass.compile(scss, function(result) {
    console.log(result);
  });
</script>

Upvotes: 1

Joschi
Joschi

Reputation: 2974

Not really performant and complicated and thus not recommended - but what would work if you can script the server: post the user input to server, write it to sass files and recompile the css.

Maybe a predefined set of colors the user can select from is enough here?

Upvotes: 0

dom_ahdigital
dom_ahdigital

Reputation: 1679

Since SASS has to be compiled to CSS for the browser, you could use a Javascript function to lighten or darken your users inputted color using this link from CSS Tricks.

Upvotes: 0

Related Questions