CSS / SCSS discrete note draft

Last modified 5 months ago / Edit on Github
This is a draft, the content is not complete and of poor quality!


px vs em vs rem vs %

  • px: not responsive.
  • em: flexible + scalable + translated to px.
    • Relative to element on which it's used.
    • 1em = 16px (default font-size Google Chrome)
    • Used for: headings, paragraphs, texts, elements related to typography (padding, margin).
  • rem: flexible + scalable + translated to px.
    • Relative to root HTML's font size.
    • Change root font size -> change the hold project.
  • %: relative to another component.
    • Used for height, width properties.

Automatically watch and convert scss to css

Easy: if you use VSC

  1. Install extension Live Sass Compiler

  2. Open settings and add following,

    "liveSassCompile.settings.formats": [
    "format": "expanded",
    "extensionName": ".css",
    "savePath": "/",
  3. Click on "Watch Sass" at the bottom line of VSC.

  4. Everytime you save or make some changes on /sass/style.scss, /style.css will be automatically updated.

Any scss file to css file

Using gulp,

npm install gulp-cli -g
npm install gulp -D
npx -p touch nodetouch gulpfile.js
gulp --help

# then use
sass --watch <scss folder>:<css folder>

style.scss to style.css

  1. Install ruby.

  2. Update ruby (if you installed it before) and install compass,

    gem update --system
    gem install compass
  3. cd to the current working theme.

  4. Create a folder named sass in the root of this theme.

  5. Create a file config.rb which contains below codes, this file is for compass

    http_path = "/" #root level target path
    css_dir = "." #targets our default style.css file at the root level of our theme
    sass_dir = "sass" #targets our sass directory
    images_dir = "images" #targets our pre existing image directory
    javascripts_dir = "js" #targets our JavaScript directory
    # You can select your preferred output style here (can be overridden via the command line):
    # output_style = :expanded or :nested or :compact or :compressed
    # To enable relative paths to assets via compass helper functions.
    # note: this is important in wordpress themes for sprites
    relative_assets = true
  6. Inside folder sass, create a folder named _partials, all partial scss files will be located in this folder. For example, we use _font.scss to store all styles relating to font for the theme.

  7. Inside folder sass, create a file named style.scss, after every modification, this file will be generated by compass and overwirte the style.css file in the root theme folder. In the content of this file, you place,

    @import "compass";
    @import "_partials/font";
  8. Use terminal and run following command (suppose that you are already in the theme folder). From this step, everytime you modify style.scss or files in _partials folder, the compass will automatically update the changes and overwrite to the style.css file in root theme folder.

    compass watch

Using FontAwesome in CSS

👉 Official doc.

.login::before {
content: "\f007";
font-family: "Font Awesome 5 Free";
font-weight: 900;

Heading numbering

// don't count h1, from h2 only
body{counter-reset: h2counter;}

h1 {counter-reset: h2counter;}
h2 {counter-reset: h3counter;}
h3 {counter-reset: h4counter;}

h2:before {
content: counter(h2counter) ".\0000a0\0000a0";
counter-increment: h2counter;}

h3:before {
content: counter(h2counter) "." counter(h3counter) ".\0000a0\0000a0";
counter-increment: h3counter;}

h4:before {
content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) ".\0000a0\0000a0";
counter-increment: h4counter;}

TOC numbering

counter-reset: item;
list-style-type: none;
ol {
counter-reset: item;
list-style-type: none;}
li {
&::before {
content: counters(item, ".") ". ";
counter-increment: item;}}


👉 Official references.

$self to cast

.component {
$self: &; // Hey look, it's our new best friend!
// scss codes

&--reversed {
//scss codes

// Here, we use $self to get the correct scope
#{ $self }__child-element {
background: rebeccapurple;

// gives
.component--reversed .component__child-element {
background: rebeccapurple;


$imgage-sizes: 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100;

@each $size in $imgage-sizes{
width: $size/100*100%;

Mixin (function)

@mixin column-count($ncol) {
column-count: $ncol;
-webkit-column-count: $ncol;
-moz-column-count: $ncol;
-moz-column-count: $ncol;
// usage
@include column-count(3);

BEM syntax

  • "BEM" = Block, Element, Modifier.
  • Goal: better understand the relationship between the HTML and CSS.
  • Smart: everything is a class and nothing is nested.

👉 Read more: BEM 101 | CSS-Trick

/* Block component */
.btn {}

/* Element that depends upon the block */
.btn__price {}

/* Modifier that changes the style of the block */
.btn--orange {}
.btn--big {}


.block {
&__element {
&--modifier {

// Another style
.block {
@at-root #{&}__element {
@at-root #{&}--modifier {

// Get you
.block {
.block__element {
.block--modifier {


// Alpha
$main-color: #806eea;
// With alpha 33%
.style {
color: rgba($main-color, 0.33);
// Or
$color: rgba(20,20,20, .5);


Tailwind's documentation is great, this part contains just my additionally personal notes.

  • Tailwind uses regular expressions to extract every string that could possibly be a class name (ref).

  • Dynamic class names (ref):

    <!-- Not working -->
    <div class="text-{{ error ? 'red' : 'green' }}-600"></div>

    <!-- Working -->
    <div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>
  • We can use Safelisting classes for some customized classes.

Support Thi Support Thi