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

    }

}