[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的 ...
随机推荐
- SQL Server2012 T-SQL基础教程--读书笔记(8 - 10章)
SQL Server2012 T-SQL基础教程--读书笔记(8 - 10章) 示例数据库:点我 CHAPTER 08 数据修改 8.1 插入数据 8.1.1 INSERT VALUES 语句 8.1 ...
- PCB LDI文件 自动化输出(改造)实现思路
由于工厂采用Liunxs系统输出LDI文件,由于我们数据库是用的Windows Server,编程语言是.net 无法与Liunxs系统进行有效对接, 所以造成才会造成LDI 资料输效率极低,人员工作 ...
- js开发规范,在php上也适用
本篇主要介绍JS的命名规范.注释规范以及框架开发的一些问题. 目录 1. 命名规范:介绍变量.函数.常量.构造函数.类的成员等等的命名规范 2. 注释规范:介绍单行注释.多行注释以及函数注释 3. 框 ...
- [转]RDLC 动态列
本文转自:http://blog.csdn.net/luochengbang/article/details/9964551 很久没有写博客了,关于动态列,国内很少资料有介绍动态列的,所想写点心得给哥 ...
- B - Magnets
Problem description Mad scientist Mike entertains himself by arranging rows of dominoes. He doesn't ...
- HTML 简要概述
注: 说实在的,这门语言的确不需要太多或太详细的篇幅来大书特书.掌握个大概,知道些特点及特性也就差不多了.人脑不是电脑,不需要死记硬背许多的属性和值,有一本帮助手册在手,胜过千言万语. 什么是 HTM ...
- bitmap实现背景透明
近日在项目中,一直被一个问题搞得头大的很,美工要把按钮图片弄成不规则的,但是在winform里实现又不仅仅是使用简单的png图片而已.在网上找到一些方法,稍微改了一点加工成项目所需. 贴出解决方案,以 ...
- AndroidStudio怎样导入library项目库
先打开一个Project,然后将libraryr的项目作为module进行导入: File菜单->import module菜单 以上只是导入进来,还没有作为与project真正有效的一部分.需 ...
- Mysql Workbench 执行sql语句删除数据时提示error code 1175
error code 1175是因为有安全模式限制 执行命令SET SQL_SAFE_UPDATES = 0;之后可以进行操作
- VMWare 在物理机待机后,报错“该虚拟机似乎正在使用中”
在物理机待机后,刚打开虚拟机,就弹出这个画面(这种情况经常出现在远程之后,本机待机之后) 点击确定后,就弹出 当点击取消,无反应,而且再次点击VM2又弹出以上窗口,点击获取所有权,则弹出以下窗口 上网 ...