3. Kỹ thuật nâng cao: Giới thiệu về Sass & NPM

3.1. Sass là gì.

SASS là một CSS Prepocessor giúp bạn viết CSS nhanh hơn và có cấu trúc rõ ràng hơn. Với SASS, bạn có thể viết CSS theo thứ tự rõ ràng, quản lý các biến đã được định nghĩa sẵn, có thể tự động nén tập tin CSS lại để bạn tiết kiệm dung lượng.

Các tính năng chính của Sass:

Variables: cho các giá trị sử dụng lại được như colors, font-sizes, spacing v.v ...

Nesting: HTML thường theo một cấu trúc lồng nhau (Nesting) chặt chẽ trong khi ở CSS nó thường là hỗn loạn. Với Sass bạn có thể tổ chức các stylesheet của bạn trong một cách tương tự như HTML chặt chẽ hơn, do đó làm giảm nguy cơ xung đột CSS.

Operators: có thể sử dụng biểu thức toán học trong CSS;

Partials and imports: để viết CSS ở nhiều file khác nhau và import chúng vào cùng 1 file;

Mixins: có thể tái sử dụng lại các đoạn mã code

Functions: tương tự như mixins, chỉ khác rằng...

Extends: cho phép bạn kế thừa các thuộc tính CSS của 1 selector.

Control directives: viết mã code phức tạp sử dụng điều kiện và vòng lặp.

3.2. Variables & Nesting

Variables: cho các giá trị sử dụng lại được như colors, font-sizes, spacing v.v ...

$color-primary: #f9ed69; //yellow color
nav {
  margin: 30px;
  background-color: $color-primary;
}

Tương đương khi chuyển sang CSS

nav {
  margin: 30px;
  background-color: #f9ed69;
}

Ví dụ:

nav {
  margin: 30px;
  background-color: $color-primary;

  &::after {
    content: "";
    clear: both;
    display:table;
  }
}

Tương đương khi chuyển sang CSS sẽ là

nav {
  margin: 30px;
  background-color: #f9ed69;
}
nav::after {
  content: "";
  clear: both;
  display: table;
}

3.3. Mixin, Extends & Functions.

Mixins: có thể tái sử dụng lại các đoạn mã code

@mixin clearfix {
  &::after {
    content: "";
    clear: both;
    display:table;
  }
}
nav {
  margin: 30px;
  background-color: $color-primary;
  @include clearfix;
}

Chuyển sang code CSS sẽ là

nav {
  margin: 30px;
  background-color: #f9ed69;
}
nav::after {
  content: "";
  clear: both;
  display: table;
}

Functions: tương tự như mixins, chỉ khác rằng...

Sass cung cấp rất nhiều danh sách trong các hàm. Họ cung cấp tất cả các loại mục đích bao gồm các chuỗi thao tác, các hoạt động liên quan đến màu sắc, và một số phương pháp toán học thuận tiện như random() và round().

Ví dụ1:

chúng ta sẽ tạo ra một đoạn mã nhanh chóng mà sử dụng draken (color,amount) để làm cho một hiệu ứng khi di chuột.

$color-secondary: #f08a5d; //orange
.btn-main{
  &:link {
    background-color: $color-secondary;
  }

  &:hover {
    background-color: darken($color-secondary, 10%);
  }
}

Chuyển sang CSS sẽ thành

.btn-main:link {
  background-color: #f08a5d;
}
.btn-main:hover {
  background-color: #ea5717;
}

Hoặc ta có thể tự tạo function tính toán cho riêng mình. Ví dụ 2:

@function divide($a, $b) {
  @return $a / $b;
}

nav {
  margin: divide(60,2)* 1px; // 30px
  background-color: $color-primary;
}

Chuyển sang CSS sẽ là:

nav {
  margin: 30px;
  background-color: #f9ed69;
}

Extends: cho phép bạn kế thừa các thuộc tính CSS của 1 selector.

Ví dụ:

...
%btn-placeholder {
  padding: 10px;
  display:inline-block;
  text-align: center;
  border-radius: 100px;
  width: $width-button;
  @include style-link-text($color-text-light);
}

.btn-main {
  &:link {
    @extend %btn-placeholder;
    background-color: $color-secondary;
  }
}
.btn-hot {
  &:link {
    @extend %btn-placeholder;
    background-color: $color-tertiary;
  }
}

Chuyển sang CSS sẽ là

.btn-main:link, .btn-hot:link {
  padding: 10px;
  display: inline-block;
  text-align: center;
  border-radius: 100px;
  width: 150px;
  text-decoration: none;
  text-transform: uppercase;
  color: #eee;
}

.btn-main:link {
  background-color: #f08a5d;
}
.btn-main:hover {
  background-color: #ea5717;
}

Tại sao không sử dụng Mixin mà lại dùng Extends?

https://codepen.io/ducna88/pen/YaXdBK

3.4. Cài đặt Sass qua NPM packages.

Cài đặt Nodejs

https://nodejs.org/en/download/

Download phiên bản phù hợp rồi cài đặt.

Nếu cài đặt thành công, ta có thể check bằng cách vào command line (terminal) gõ:

node -v
v8.10.0

Sau khi cài xong Node, ta vào thư mục dự án (ví dụ ..DucNA/Natours/starter) rồi gõ lệnh:

npm init

Tiếp tục run lệnh

$ npm install node-sass --save-dev

3.5. Viết và biên dích Sass qua NPM scripts

mkdir sass
cd sass
touch main.scss

Copy code từ file style.css sang file main.scss

Trong file package.json thêm đoạn code cấu hình

 "scripts": {
    "compile:sass" : "node-sass sass/main.scss css/style.css"
  },

Ra màn hình terminal gõ

npm run compile:sass

Code sass sẽ được convert thành css.

Nếu muốn liên tục convert từ Sass -> CSS ta thêm " -w" đoạn scripts trong file package.json

"scripts": {
    "compile:sass" : "node-sass sass/main.scss css/style.css -w"
  },

3.6. Cấu hình tự động Reload trang web khi có sự thay đổi file code.

Cài đặt live-server

sudo npm install live-server -g

Cd đến thư mục gốc của dự án ví dụ ../starter gõ lệnh

live-server

Nguồn gợi ý mở rộng về SASS: https://hieusensei.com/sass-can-ban

Kĩ thuật ClearFix là gì? https://freetuts.net/ky-thuat-clearfix-trong-css-446.html

3 - Kỹ thuật nâng cao: Giới thiệu về Sass & NPM