Sass & Scss & CSS3

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