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 #, 2px 6px 10px #);
} @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的更多相关文章

  1. convert image to base64 in javascript

    convert image to base64 in javascript "use strict"; /** * * @author xgqfrms * @license MIT ...

  2. [CSSinJS] Convert Sass (SCSS) Styled Button to CSSinJS with JavaScript Templates and Variables

    This is an introduction to CSSinJS that doesn't require any JavaScript knowledge, just a basic CSS. ...

  3. [SCSS] Organize SCSS into Multiple Files with Partials

    Tired of dealing with monolithic CSS files? Are requests for multiple CSS files hurting your perform ...

  4. javascript arguments与javascript函数重载

    1.所 有的函数都有属于自己的一个arguments对象,它包括了函所要调用的参数.他不是一个数组,如果用typeof arguments,返回的是’object’.虽然我们可以用调用数据的方法来调用 ...

  5. 预编译scss以及scss和less px 转rem

    预编译scss步骤: 1 搜索ruby并安装,点击 2 安装sass: 3 在hubuilder工具中设置预编译: 触发命令地址为ruby安装地址 命令参数为 %FileName% %FileBase ...

  6. [Javascript] Required function arguments in Javascript

    In Javascript, all function arguments are optional by default. That means if you ever forget to pass ...

  7. To add private variable to this Javascript literal object

    You can use number as function/variable name, the numberic name can't be accessed from parent scope, ...

  8. listening for variable changes in javascript

    https://stackoverflow.com/questions/1759987/listening-for-variable-changes-in-javascript

  9. Sass使用教程

    sass官网: http://sass-lang.com/ http://sass-lang.com/documentation/file.SASS_REFERENCE.html Sass和Scss的 ...

随机推荐

  1. [Apple开发者帐户帮助]三、创建证书(6)创建创建VoIP服务证书

    VoIP:基于IP的语音传输(英语:Voice over Internet Protocol,缩写为VoIP)是一种语音通话技术,经由网际协议(IP)来达成语音通话与多媒体会议,也就是经由互联网来进行 ...

  2. 工具分享1:文本编辑器EditPlus、汇编编译器masm、Dos盒子

    工具已打包好,需要即下载 链接 https://pan.baidu.com/s/1dvMyvW 密码 mic4

  3. Spring Boot (20) 拦截器

    动态资源和静态资源 拦截器可以算是aop的一种实现,专门拦截对动态资源的后台请求,也就是拦截对控制层的请求,主要用于判断用户是否有权限请求后台.拦截器不会拦截静态资源,如spring boot默认静态 ...

  4. Android第一次项目

    学习了一个月的Android,接触了人生中第一个安卓项目,对于一个小白来说,总结是很重要的学习方法,以下我把学到的东西总结以下: 1. 1>okhttp3用法解析(边贴代码边熟悉) public ...

  5. 171129-workaround on ubuntu-seting up piston for steem

    setup ubuntu environment variables sudo vi /etc/environment Then set all below variables: percentCha ...

  6. Java常用设计模式《转》

    设计模式:一个程序员对设计模式的理解:“不懂”为什么要把很简单的东西搞得那么复杂.后来随着软件开发经验的增加才开始明白我所看到的“复杂”恰恰就是设计模式的精髓所在,我所理解的“简单”就是一把钥匙开一把 ...

  7. Scala类型系统——高级类类型(higher-kinded types)

    高级类类型就是使用其他类型构造成为一个新的类型,因此也称为 类型构造器(type constructors).它的语法和高阶函数(higher-order functions)相似,高阶函数就是将其它 ...

  8. HTML input 控件

    <input type="file" id="file1" onChange="test()"> function test() ...

  9. CryptoJS简单使用(request.js) 拦截器的使用

    首先准备一份明文和秘钥: var plaintText = 'aaaaaaaaaaaaaaaa'; // 明文var keyStr = 'bbbbbbbbbbbbbbbb'; // 一般key为一个字 ...

  10. 【JavaScript】通过封装自己的JSONP解决浏览器的跨域问题(Ajax跨域)

    问题引出:要发送Ajax请求,就必须使用HTTP请求?什么是跨域问题? 什么是跨域问题:如果两个页面中的协议.域名.端口.子域名任意有一项不同,两者之间所进行的访问行动就是跨域的,而浏览器为了安全问题 ...