Sass & Scss & CSS3
Sass & Scss & CSS3
Sass & Scss
@mixin
&@include
&@import
&variable
Sass Playground
scss
https://codepen.io/webgeeker/pen/NeaKjm
.scss
@import "_variables";
@import "_demo";
/* scss variables */
$default-color: #000;
// mixin
@mixin common-lable($color) {
color: $color;
display: inline-block;
width: 55px;
text-align: center;
}
.audit-common-lable{
@include common-lable($default-color);
&::after{
display: inline-block;
content: ":";
}
}
.audit-common-lable-placeholder{
@include common-lable($default-color);
}
.css
.imported {
content: "yay, file support!";
}
/* scss variables */
.audit-common-lable {
color: #000;
display: inline-block;
width: 55px;
text-align: center;
}
.audit-common-lable::after {
display: inline-block;
content: ":";
}
.audit-common-lable-placeholder {
color: #000;
display: inline-block;
width: 55px;
text-align: center;
}
CSS3 Playground
var
https://css3playground.com/
https://www.w3.org/TR/?title=css
@charset "UTf-8";
/**
*
* @author xgqfrms
* @license MIT
* @copyright xgqfrms
*
* @description css3-var.css
*
*/
:root {
--color: #000;
--default-color: #fff;
--new-color: #0f0;
}
*{
color: var(--color);
}
VS code & codes snippets
{
"CSS3 Template": {
"prefix": "c3t",
"body": [
"@charset \"UTf-8\";",
"",
"/**",
" * ",
" * @author xgqfrms",
" * @license MIT",
" * @copyright xgqfrms",
" * ",
" * @description $1.css",
" * ",
" */",
"",
":root {",
" --color: #000;",
" --default-color: #fff;",
" --new-color: #0f0;",
"}"
],
"description": "CSS3 Template & code snippets!"
}
}
Sass & Scss & CSS3的更多相关文章
- 【Sass/SCSS】预加载器中的“轩辕剑”
[Sass/SCSS]预加载器中的"轩辕剑" 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 随着前端 ...
- 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,预处 ...
- 「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 ...
- [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. ...
- sass/scss 和 less对比
一. Sass/Scss.Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,比css比多出好些功能(如变量 ...
随机推荐
- 20155209实验一《Java开发环境的熟悉》实验报告
20155209实验一<Java开发环境的熟悉>实验报告 实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用Eclipse 编辑.编译.运行.调试Java程序. 实验步骤一 ...
- 20155305乔磊2016-2017-2《Java程序设计》第二周学习总结
20155305乔磊 2016-2017-2 <Java程序设计>第二周学习总结 教材学习内容总结 第三章学习了基本类型 整数(short.int.long) 字节(byte) 浮点数(f ...
- SSM框架及例子(转)
SSM 手把手教你整合最优雅SSM框架:SpringMVC + Spring + MyBatis 博客地址:http://blog.csdn.net/qq598535550/article/detai ...
- 【LG3243】[HNOI2015]菜肴制作
题面 洛谷 题解 首先我们有个非常显然的思路, 就是直接拓扑排序,用小根堆代替队列再按顺序输出,但是很显然是错的, 因为这只保证了字典序最小,而无法保证答案最优,\(<2,4>,<3 ...
- 【转】CentOS下MySQL忘记root密码解决方法
原文转自:http://www.cnblogs.com/sbaicl/articles/3132010.html 1.首先确认服务器出于安全的状态,也就是没有人能够任意地连接MySQL数据库. 因为在 ...
- python常用模块详解2
序列化模块补充: 1.json格式的限制,json格式的key必须是字符串数据类型 2.json格式的字符串必须是"" 如果数字是key,那么dump之后会强转成字符串数据类型 i ...
- Python和Pycharm的安装
目录 安装Python 安装Pycharm IDE 破解Pycharm 用Pycharm创建Python工程 安装Python 去Python官网下载Python软件,网址:https://www.p ...
- Java+Selenium 3.x 实现Web自动化 - Maven打包TestNG,利用jenkins执行测试
1. Jenkins本地执行测试 or 服务器端执行测试 测试代码计划通过jenkins执行时,通过网上查询各种教程,大多数为本地执行测试,由此可见,本地执行是大多数人的选择. 经过探讨,最终决定采用 ...
- 3星|《给你讲个笑话:我是创业公司CEO》:创业成功就是上帝掷骰子
给你讲个笑话:我是创业公司CEO 作者有过数次创业经历,最后一次在济南创业,后来公司搬到北京,看书中的交代公司目前好像还不算太成功.书中交代作者公司的业务是文化产品的策划,没细说做什么,也没说做成过哪 ...
- elasticsearch备份与恢复
备注:以下代码在kibana插件下运行: # 创建一个备份用的仓库# type:fs文件系统# 支持Shared filesystem, Amazon S3, HDFS和Azure #Cloud# l ...