[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.
It shows how to convert a very basic button written in Sass (SCSS) to CSSinJS without using any CSS in JS libraries. It uses native JavaScript variables and template literals.
The whole basic idea for CSSinJS is insert css into the Document's head in runtime... (of course not so well proference, better to do it in compile time)... but anyhow that is the basic idea.
// constants.js
const paddingY = '7px'
const paddingX = '10px'
const baseFontSize = '1rem'
const borderRadius = '5px' // buttons.js
const button = `
.cssinjs-btn {
padding: ${paddingY} ${paddingX};
font-size: ${baseFontSize};
border-radius: ${borderRadius};
color: #fff;
background-color: green;
}
` // Render styles.
document.head.appendChild(
document.createElement('style')
).textContent = button
[CSSinJS] Convert Sass (SCSS) Styled Button to CSSinJS with JavaScript Templates and Variables的更多相关文章
- sass/scss 和 less的区别
一. Sass/Scss.Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多出好些功能(如变量 ...
- 前端编码规范(4)—— CSS 和 Sass (SCSS) 规范
CSS and Sass (SCSS) style rules ID and class naming ID和class(类)名总是使用可以反应元素目的和用途的名称,或其他通用名称.代替表象和晦涩难懂 ...
- CSS预处理器 Less Sass,Scss 编译 Sourcemap调试
sass.less和stylus的安装使用和入门实践 SASS用法指南 Sass Basics CSS预处理器 css preprocessor 预处理器即preprocessor,预处 ...
- Sass & Scss & CSS3
Sass & Scss & CSS3 Sass & Scss @mixin & @include & @import & variable https: ...
- 「Vue」vue-cli 3.0集成sass/scss到vue项目
vue-cli 3提供了两种方式集成sass/scss: 创建项目是选择预处理器sass手动安装sass-loader创建项目选择预处理器sass$ vue create vuedemo? Pleas ...
- Less、Sass/Scss
一.Less.Sass/Scss是什么? 1.Less: 是一种动态样式语言. 对CSS赋予了动态语言的特性,如变量.继承.运算.函数. Less 既可以在客户端上运行 (支持IE 6+, Webki ...
- Vue-cli 3.0 使用Sass Scss Less预处理器
项目中使用预处理器,可以有效减少css代码量,使用Sass||Scss||Less; 预处理器 你可以在创建项目的时候选择预处理器 (Sass/Less/Stylus).如果当时没有选好, 内置的 w ...
- sass/scss 和 less对比
一. Sass/Scss.Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多出好些功能(如变量 ...
- 2019最新create-react-app创建的react中使用sass/scss,以及在react中使用sass/scss公共变量的方法
Sass(英文全称:Syntactically Awesome Stylesheets)是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言.Sas ...
随机推荐
- H5页面在线制作工具搜集
1.初页 http://chuye.cloud7.com.cn/ 2.易企秀 http://eqxiu.com/#/home 3.最酷 http://www.zuiku.com/ 4.易传单 http ...
- 路飞学城Python-Day7
Moudle 2 1.鸡汤中国人均阅读4.35本:日本40本:韩国17本:法国20本:以色列60本成长的路上需要读书,坚持读书内心会得到升华的想法不要太多,尽量多读书,多充电多读书,多看报,少吃零食, ...
- moment.js获取本周本月本年的开始日期和结束日期
//获取本日 const startDate = moment().format('YYYY-MM-DD'); const startDate = moment().format('YYYY-MM-D ...
- Session与Token认证机制 前后端分离下如何登录
字号 1 Web登录涉及到知识点 1.1 HTTP无状态性 HTTP是无状态的,一次请求结束,连接断开,下次服务器再收到请求,它就不知道这个请求是哪个用户发过来的.当然它知道是哪个客户端地址发过来的 ...
- (noip模拟二十一)【BZOJ2500】幸福的道路-树形DP+单调队列
Description 小T与小L终于决定走在一起,他们不想浪费在一起的每一分每一秒,所以他们决定每天早上一同晨练来享受在一起的时光. 他们画出了晨练路线的草图,眼尖的小T发现可以用树来描绘这个草图. ...
- shell 整数
[] (())和[[]] -eq == 或= -ne != -gt > -ge >= -lt < -le <= [root@web02 ~ ...
- 纯净版linux (debian)挂载VirtualBox共享文件夹
使用的虚拟机版本是:VirtualBox-5.2.8-121009 使用的linux版本是:Linux debian 4.9.0-7-amd64 tty 1. 开始配置 1.1:打开虚拟机设置,打开你 ...
- macOS seria 10.12升级到macOS Mojave的报错:xcrun: error: invalid active developer path, missing xcrun
今天升级mac系统到macOS mojave后,在终端操作gitlab时遇到一行莫名其妙的错误: xcrun: error: invalid active developer path (/Libra ...
- shell的通俗理解
(引自:https://zhidao.baidu.com/question/557066905.html) [一] shell的含义: 首先shell的英文含义是“壳”: 它是相对于内核来说的,因为它 ...
- 洛谷 P3146 [USACO16OPEN]248
P3146 [USACO16OPEN]248 题目描述 Bessie likes downloading games to play on her cell phone, even though sh ...