SASS P4 – Import – Partial – Media – Extend

Tram Ho

1. Import & Partial

Trong thực tế khi code scss ta thường chia nhỏ ra các file đảm nhiệm các chức năng khác nhau như _colors.scss or_variables.scss rồi dùng từ khóa @import để gọi vào.

File style.scss To import the above 2 files, we write the following code

Result

Note

  • The 3 files above are on the same level as each other
  • When importing, it is not necessary to write the scss file extension
  • I see 2 files _colors.scss and _variables.scss have underscores in front, that’s Partial usage, this means SASS won’t compile those files into css files

2. Media

Writing style @media Similar to writing CSS, often used when responsive websites

3. Extend

Inherit the properties of another selector. Use keywords @extend

Result

Selection area %extend will only inherit properties without compile.

Result

Chia sẻ bài viết ngay