Sass & Scss & CSS3 `@mixin` & `@include` & `@import` & `variable` VS code & codes snippets



Sass & Scss & CSS3

Sass & Scss

​@mixin​​ & ​​@include​​ & ​​@import​​ & ​​variable​

​https://sass-lang.com/guide​

Sass & Scss & CSS3_SCSS

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);
}


Sass & Scss & CSS3_SASS_02

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!"
}
}