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