Tue, Oct 19, 21, tools, fonts cascading and selectors

Thi

Tools

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

.post-content{
  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

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

SCSS / SASS

๐Ÿ‘‰ Official references.

Loop

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

@each $size in $imgage-sizes{
  .img-full-#{$size}{
    width: $size/100*100%;
  }
}

Mixin (function)

::: col-2-equal

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

:::

The following wiki, pages and posts are tagged with

TitleTypeExcerpt
Beautiful day it is post create tag-home with stackoverflow search platform
Jekyll forloop without post Saturday-where_exp, you can do forloop without a loop using where or where_exp filters
Jekyll + liquid post Monday-jekyll-liquid, jekyll install on mac and ubuntu using docker
D3js trial and errors post Thursday, trying to integrate with jekyll and data mining
Pages in this site page This theme primarily uses pages. You need to make sure your pages have the appropriate frontmatter. One frontmatter tag your users might find helpful is the ...

{# nothing on index to avoid visible raw text #}