Sass & Scss & CSS3 `@mixin` & `@include` & `@import` & `variable` VS code & codes snippets
Sass & Scss
@mixin
& @include
& @import
& variable
https://sass-lang.com/guide
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
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!"
}
}