Một số tip khi code SCSS (Phần 1)

Dưới đây là một số tip mà mình đã sử dụng khi code SCSS mà mình nghĩ là nó sẽ có ích với những bạn mới.

1. Sử dụng BEM naming convention:

.header {
  &__title {
    font-size: 20px;
  }
  &__navigation {
    list-style: none;
    display: flex;
  }
  &__navigation-item {
    margin-right: 10px;
  }
}

2. Sử dụng @mixin và @extend:

@mixin clearfix() {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

.header {
  @include clearfix();
}

.btn {
  @extend .header;
  background-color: blue;
}

3. Sử dụng variables:

$primary-color: blue;

.header {
  background-color: $primary-color;
}

.btn {
  background-color: $primary-color;
}

4. Sử dụng các operator và hàm:

$base-font-size: 16px;

.header {
  font-size: $base-font-size * 1.5;
  color: darken($primary-color, 20%);
}

5. Sử dụng media queries:

@media (max-width: 768px) {
  .header {
    &__title {
      font-size: $base-font-size * 1.2;
    }
    &__navigation {
      flex-direction: column;
    }
  }
}