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. 20155203 2016-2017-3 《Java程序设计》第4周学习总结

    20155203 2016-2017-3 <Java程序设计>第4周学习总结 教材学习内容总结 1.父类和子类类似于集合和元素,不同的地方是子类可以拓展(extends)父类之外的方法. ...

  2. 20155235 2016-2017-1 《Java程序设计》第3周学习总结

    20155235 2016-2017-1 <Java程序设计>第3周学习总结 教材学习内容总结 第四章 认识对象 类与对象 定义类 使用标准类 对象指定与相等性 基本类型打包器 打包基本类 ...

  3. P145MathTool测试类的编写

    如果我们在方法的自变量个数事先无法决定如何处理,比如: System.out.printf("%d",10); System.out.printf("%d %d" ...

  4. 20155318 2016-2017-2《Java程序设计》课程总结

    20155318 2016-2017-2<Java程序设计>课程总结 每周作业链接 预备作业1:亦师亦友--我所期望的师生关系,对专业的认识与期望等 预备作业2:没有了自主,学习的小船说翻 ...

  5. WPF MVVM从入门到精通2:实现一个登录窗口

    原文:WPF MVVM从入门到精通2:实现一个登录窗口   WPF MVVM从入门到精通1:MVVM模式简介 WPF MVVM从入门到精通2:实现一个登录窗口 WPF MVVM从入门到精通3:数据绑定 ...

  6. Java集合——LinkedList源码详解

    )LinkedList直接继承于AbstractSequentialList,同时实现了List接口,也实现了Deque接口. AbstractSequentialList为顺序访问的数据存储结构提供 ...

  7. PostgreSQL的pg_stats学习

    磨砺技术珠矶,践行数据之道,追求卓越价值 回到上一级页面: PostgreSQL统计信息索引页     回到顶级页面:PostgreSQL索引页 对于pg_stas,说明文档在这里: http://w ...

  8. 【转载】OGRE中用到的设计模式

    原文:OGRE中用到的设计模式 1.       单例模式(Singleton) 2.       工厂方法(Factory Method)  3.       适配器模式(Adapter)  4.  ...

  9. centos7下mysql 开启远程登录

    安装mysql 安装mysql就不做过多的介绍了,相信小伙伴们都可以很轻松的安装 进入mysql命令行 mysql -u用户名 -p密码 新建远程登录的用户 grant all on *.* to a ...

  10. 探寻ASP.NET MVC鲜为人知的奥秘(3):寻找多语言的最佳实践方式

    如果你的网站需要被世界各地的人访问,访问者会使用各种不同的语言和文字书写习惯,那么创建一个支持多语言的网站就是十分必要的了,这一篇文章就讲述怎么快速合理的创建网站对多语言的支持.接下来通过一个实例来讲 ...