Last modified on 01 Jun 2020.


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.

Loop in SCSS

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

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

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 5 in CSS[ref]

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