[SCSS] Convert SCSS Variable Arguments to JavaScript

標籤：ado   convert   ons   span   shadows   int   log   sas   button   

We will learn how to convert variable arguments by using rest operator in JavaScript.

 

.sass-btn {  color: #fff;  background-color: #0069d9;  margin: 5px;  @include button-size();  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);}@mixin box-shadow($shadows...) {  -moz-box-shadow: $shadows;  -webkit-box-shadow: $shadows;  box-shadow: $shadows;}

Scss "$shadows..." the same as "...shadows" in Javascript.

export const boxShadow = (...shadows) => `  -moz-box-shadow: ${shadows};  -webkit-box-shadow: ${shadows};  box-shadow: ${shadows};`

 

interesting thing is ...shadows in Javascript is an Array, but if we put into ${}, then it conver to a string:

const shadows = [‘red‘, ‘blue‘];console.log(`${shadows}`); // red, blue

 

[SCSS] Convert SCSS Variable Arguments to JavaScript