SASS P4 – Import – Partial – Media – Extend

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 hay_variables.scss rồi dùng từ khóa @import để gọi vào.

$primary-300: #64B5F6;$primary-400: #42A5F5;$primary-600: #1E88E5;

$font-size-base: 14px;$font-size-large:ceil(($font-size-base* 1.25));// ~18px$font-size-small:ceil(($font-size-base* 0.85));// ~12px

File style.scss để import 2 file ở trên ta viết code như sau

@import"variables";@import"colors";.title {font-size:$font-size-small;color:$primary-300;}

Kết quả

.title{font-size: 12px;color: #64B5F6;}

Lưu ý

• 3 file ở trên nằm cùng cấp ngang hàng với nhau
• Khi import việc ghi cả đuôi file scss là không cần thiết
• Ta thấy 2 file _colors.scss và _variables.scss có gạch dưới ở phía trước, đó là cách dùng của Partial, điều này có nghĩa SASS sẽ không biên dịch các file đó ra file css

2. Media

Cách viết @media tương tự như viết của CSS, thường dùng khi responsive website

@media(min-width: 1200px){.col-lg-6{width: 50%;}}

3. Extend

Kế thừa các thuộc tính của một selector khác. Sử dụng từ khóa @extend

.btn {display: inline-block;margin-bottom: 0;font-weight: normal;text-align: center;vertical-align: middle;touch-action: manipulation;cursor: pointer;background-image: none;border: 1px solid transparent;white-space: nowrap;padding: 7px 12px;font-size: 13px;line-height: 1.5384616;border-radius: 3px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}.btn-primary {@extend .btn;color: #fff;background-color: #2196F3;border-color: #2196F3;}

Kết quả

.btn, .btn-primary{display: inline-block;margin-bottom: 0;font-weight: normal;text-align: center;vertical-align: middle;touch-action: manipulation;cursor: pointer;background-image: none;border: 1px solid transparent;white-space: nowrap;padding: 7px 12px;font-size: 13px;line-height: 1.5384616;border-radius: 3px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}.btn-primary{color: #fff;background-color: #2196F3;border-color: #2196F3;}

Vùng chọn %extend sẽ chỉ kế thừa các thuộc tính mà không compile.

%btn{display: inline-block;margin-bottom: 0;font-weight: normal;text-align: center;vertical-align: middle;touch-action: manipulation;cursor: pointer;background-image: none;border: 1px solid transparent;white-space: nowrap;padding: 7px 12px;font-size: 13px;line-height: 1.5384616;border-radius: 3px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}.btn-primary {@extend%btn;color: #fff;background-color: #2196F3;border-color: #2196F3;}

Kết quả

.btn-primary{display: inline-block;margin-bottom: 0;font-weight: normal;text-align: center;vertical-align: middle;touch-action: manipulation;cursor: pointer;background-image: none;border: 1px solid transparent;white-space: nowrap;padding: 7px 12px;font-size: 13px;line-height: 1.5384616;border-radius: 3px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}.btn-primary{color: #fff;background-color: #2196F3;border-color: #2196F3;}