Sass & Scss & CSS3

Sass & Scss

@mixin & @include & @import & variable

https://sass-lang.com/guide

Sass Playground

scss

https://sass.js.org/

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

http://cssnext.io/playground/

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

  1. 【Sass/SCSS】预加载器中的“轩辕剑”

    [Sass/SCSS]预加载器中的"轩辕剑" 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 随着前端 ...

  2. sass/scss 和 less的区别

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

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

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

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

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

  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. [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. ...

  9. sass/scss 和 less对比

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

随机推荐

  1. 20155209实验一《Java开发环境的熟悉》实验报告

    20155209实验一<Java开发环境的熟悉>实验报告 实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用Eclipse 编辑.编译.运行.调试Java程序. 实验步骤一 ...

  2. 20155305乔磊2016-2017-2《Java程序设计》第二周学习总结

    20155305乔磊 2016-2017-2 <Java程序设计>第二周学习总结 教材学习内容总结 第三章学习了基本类型 整数(short.int.long) 字节(byte) 浮点数(f ...

  3. SSM框架及例子(转)

    SSM 手把手教你整合最优雅SSM框架:SpringMVC + Spring + MyBatis 博客地址:http://blog.csdn.net/qq598535550/article/detai ...

  4. 【LG3243】[HNOI2015]菜肴制作

    题面 洛谷 题解 首先我们有个非常显然的思路, 就是直接拓扑排序,用小根堆代替队列再按顺序输出,但是很显然是错的, 因为这只保证了字典序最小,而无法保证答案最优,\(<2,4>,<3 ...

  5. 【转】CentOS下MySQL忘记root密码解决方法

    原文转自:http://www.cnblogs.com/sbaicl/articles/3132010.html 1.首先确认服务器出于安全的状态,也就是没有人能够任意地连接MySQL数据库. 因为在 ...

  6. python常用模块详解2

    序列化模块补充: 1.json格式的限制,json格式的key必须是字符串数据类型 2.json格式的字符串必须是"" 如果数字是key,那么dump之后会强转成字符串数据类型 i ...

  7. Python和Pycharm的安装

    目录 安装Python 安装Pycharm IDE 破解Pycharm 用Pycharm创建Python工程 安装Python 去Python官网下载Python软件,网址:https://www.p ...

  8. Java+Selenium 3.x 实现Web自动化 - Maven打包TestNG,利用jenkins执行测试

    1. Jenkins本地执行测试 or 服务器端执行测试 测试代码计划通过jenkins执行时,通过网上查询各种教程,大多数为本地执行测试,由此可见,本地执行是大多数人的选择. 经过探讨,最终决定采用 ...

  9. 3星|《给你讲个笑话:我是创业公司CEO》:创业成功就是上帝掷骰子

    给你讲个笑话:我是创业公司CEO 作者有过数次创业经历,最后一次在济南创业,后来公司搬到北京,看书中的交代公司目前好像还不算太成功.书中交代作者公司的业务是文化产品的策划,没细说做什么,也没说做成过哪 ...

  10. elasticsearch备份与恢复

    备注:以下代码在kibana插件下运行: # 创建一个备份用的仓库# type:fs文件系统# 支持Shared filesystem, Amazon S3, HDFS和Azure #Cloud# l ...