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的更多相关文章

  1. sass/scss 和 less的区别

    一. Sass/Scss.Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多出好些功能(如变量 ...

  2. 前端编码规范(4)—— CSS 和 Sass (SCSS) 规范

    CSS and Sass (SCSS) style rules ID and class naming ID和class(类)名总是使用可以反应元素目的和用途的名称,或其他通用名称.代替表象和晦涩难懂 ...

  3. CSS预处理器 Less Sass,Scss 编译 Sourcemap调试

    sass.less和stylus的安装使用和入门实践     SASS用法指南    Sass Basics CSS预处理器 css preprocessor 预处理器即preprocessor,预处 ...

  4. Sass & Scss & CSS3

    Sass & Scss & CSS3 Sass & Scss @mixin & @include & @import & variable https: ...

  5. 「Vue」vue-cli 3.0集成sass/scss到vue项目

    vue-cli 3提供了两种方式集成sass/scss: 创建项目是选择预处理器sass手动安装sass-loader创建项目选择预处理器sass$ vue create vuedemo? Pleas ...

  6. Less、Sass/Scss

    一.Less.Sass/Scss是什么? 1.Less: 是一种动态样式语言. 对CSS赋予了动态语言的特性,如变量.继承.运算.函数. Less 既可以在客户端上运行 (支持IE 6+, Webki ...

  7. Vue-cli 3.0 使用Sass Scss Less预处理器

    项目中使用预处理器,可以有效减少css代码量,使用Sass||Scss||Less; 预处理器 你可以在创建项目的时候选择预处理器 (Sass/Less/Stylus).如果当时没有选好, 内置的 w ...

  8. sass/scss 和 less对比

    一. Sass/Scss.Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多出好些功能(如变量 ...

  9. 2019最新create-react-app创建的react中使用sass/scss,以及在react中使用sass/scss公共变量的方法

    Sass(英文全称:Syntactically Awesome Stylesheets)是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言.Sas ...

随机推荐

  1. NOIp2018模拟赛四十二

    今天看标题终于回到了“NOIP模拟赛”,十分高兴啊! 然后一打开题目: ********** 所以今天又是一场NOIPlus模拟赛(微笑) 成绩:0+70+0=70 A题想了个贪心被myh两分钟cha ...

  2. centos7 jumpserver 部署和使用手册(二)

    前面已经介绍了jumpserver的部署,基于这篇部署文档,下面介绍下部署完成后的的功能使用: 一.系统设置 1.1根据提供的帐号密码(admin/admin)登录jumpserver 修改 url ...

  3. tree 核心命令参数

    常用参数: -a  显示所有文件 包括隐藏文件 -d 只显示目录 -f 显示每个文件的全路径 -i 不显示树枝 常与-f一起搭配 -L 显示的层数 -F 区分哪个文件是目录 [root@ftp:/va ...

  4. __weak修饰符

    前言 在 HAL 库中,很多回调函数前面使用__weak 修饰符. weak 顾名思义是“弱”的意思,所以如果函数名称前面加上__weak 修饰符,我们一般称这个函数为“弱函数”. 加上了__weak ...

  5. 最多包含2/k个不同字符的最长串

    看这里的解答: http://www.cnblogs.com/grandyang/p/5351347.html 通用解决了2和k的问题.

  6. Dubbo分布式服务框架入门(附project)

    要想了解Dubbo是什么,我们不防先了解它有什么用. 使用场景:比方我想开发一个网上商城项目.这个网上商城呢,比較复杂.分为pc端web管理后台.微信端销售公众号,那么我们分成四个项目,pc端站点,微 ...

  7. xcode 及 MAC 经常使用快捷键

    郝萌主倾心贡献,尊重作者的劳动成果,请勿转载. 假设文章对您有所帮助,欢迎给作者捐赠,支持郝萌主,捐赠数额任意.重在心意^_^ 我要捐赠: 点击捐赠 Cocos2d-X源代码下载:点我传送 黑苹果键盘 ...

  8. C语言:constkeyword、结构体

    前几节内容的解说,主要是内存地址及指针的分析.这一节解说一下easy混淆的keywordconstant及结构体的知识. 一.constkeyword 1. 字符常量的指针 char const *p ...

  9. HTML5 界面元素 Canvas 參考手冊

    HTML5 界面元素 Canvas 參考手冊 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协 ...

  10. nginx 1.5 支持websocket

    proxy_pass http://backend; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set ...