Sass & Scss & CSS3
2024-08-28 16:55:15
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!"
}
}
最新文章
- Java中将unix时间戳转化为正常显示时间
- 关闭linux centos各种声音
- 为DAG预留群集名称对象(CNO)
- 理解UIEdgeInsets
- nodejs http.get乱码问题处理方法
- WPF利用Image实现图片按钮
- bash基础知识
- wxpython 安装教程
- sublime中css输入分号后自动提示的烦恼
- Xamarin使用ListView开启分组视图Cell数据展示bug处理
- sql serve 数据库游标的使用
- AtCoder Grand Contest 032-B - Balanced Neighbors (构造)
- SQLServer脚本编写
- Netty入门——客户端与服务端通信
- 关于PHP中的webshell
- Linux c++ time different
- day15(模块引用笔记)
- 解题:APIO 2018 铁人两项
- 在ubuntu16安装supervisor 并 启动 .net core.
- Implementing x / 6 Using Only Bit Manipulations