[SCSS] Convert SCSS Variable Arguments to JavaScript
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的更多相关文章
- convert image to base64 in javascript
convert image to base64 in javascript "use strict"; /** * * @author xgqfrms * @license MIT ...
- [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. ...
- [SCSS] Organize SCSS into Multiple Files with Partials
Tired of dealing with monolithic CSS files? Are requests for multiple CSS files hurting your perform ...
- javascript arguments与javascript函数重载
1.所 有的函数都有属于自己的一个arguments对象,它包括了函所要调用的参数.他不是一个数组,如果用typeof arguments,返回的是’object’.虽然我们可以用调用数据的方法来调用 ...
- 预编译scss以及scss和less px 转rem
预编译scss步骤: 1 搜索ruby并安装,点击 2 安装sass: 3 在hubuilder工具中设置预编译: 触发命令地址为ruby安装地址 命令参数为 %FileName% %FileBase ...
- [Javascript] Required function arguments in Javascript
In Javascript, all function arguments are optional by default. That means if you ever forget to pass ...
- 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, ...
- listening for variable changes in javascript
https://stackoverflow.com/questions/1759987/listening-for-variable-changes-in-javascript
- Sass使用教程
sass官网: http://sass-lang.com/ http://sass-lang.com/documentation/file.SASS_REFERENCE.html Sass和Scss的 ...
随机推荐
- [Apple开发者帐户帮助]三、创建证书(6)创建创建VoIP服务证书
VoIP:基于IP的语音传输(英语:Voice over Internet Protocol,缩写为VoIP)是一种语音通话技术,经由网际协议(IP)来达成语音通话与多媒体会议,也就是经由互联网来进行 ...
- 工具分享1:文本编辑器EditPlus、汇编编译器masm、Dos盒子
工具已打包好,需要即下载 链接 https://pan.baidu.com/s/1dvMyvW 密码 mic4
- Spring Boot (20) 拦截器
动态资源和静态资源 拦截器可以算是aop的一种实现,专门拦截对动态资源的后台请求,也就是拦截对控制层的请求,主要用于判断用户是否有权限请求后台.拦截器不会拦截静态资源,如spring boot默认静态 ...
- Android第一次项目
学习了一个月的Android,接触了人生中第一个安卓项目,对于一个小白来说,总结是很重要的学习方法,以下我把学到的东西总结以下: 1. 1>okhttp3用法解析(边贴代码边熟悉) public ...
- 171129-workaround on ubuntu-seting up piston for steem
setup ubuntu environment variables sudo vi /etc/environment Then set all below variables: percentCha ...
- Java常用设计模式《转》
设计模式:一个程序员对设计模式的理解:“不懂”为什么要把很简单的东西搞得那么复杂.后来随着软件开发经验的增加才开始明白我所看到的“复杂”恰恰就是设计模式的精髓所在,我所理解的“简单”就是一把钥匙开一把 ...
- Scala类型系统——高级类类型(higher-kinded types)
高级类类型就是使用其他类型构造成为一个新的类型,因此也称为 类型构造器(type constructors).它的语法和高阶函数(higher-order functions)相似,高阶函数就是将其它 ...
- HTML input 控件
<input type="file" id="file1" onChange="test()"> function test() ...
- CryptoJS简单使用(request.js) 拦截器的使用
首先准备一份明文和秘钥: var plaintText = 'aaaaaaaaaaaaaaaa'; // 明文var keyStr = 'bbbbbbbbbbbbbbbb'; // 一般key为一个字 ...
- 【JavaScript】通过封装自己的JSONP解决浏览器的跨域问题(Ajax跨域)
问题引出:要发送Ajax请求,就必须使用HTTP请求?什么是跨域问题? 什么是跨域问题:如果两个页面中的协议.域名.端口.子域名任意有一项不同,两者之间所进行的访问行动就是跨域的,而浏览器为了安全问题 ...