Code CSS chuyên nghiệp và đơn giản hơn với SASS - Phần 2

Ở bài viết trước, mình đã giới thiệu qua các quy tắc khi biết css bằng scss sao cho code chúng ta ngắn gọn trực quan và dễ hiểu nhất. Các bạn có thể tham khảo phần 1 tại đây. Ở bài viết này, mình xin giới thiệu các mệnh đề được sử dụng trong SASS.

Mệnh đề "if"

Tương tự như các ngôn ngữ lập trình, cú pháp If() trong sass cho phép trả về 1 trong 2 kết quả tùy thuộc điều kiện đầu vào đúng/sai. Cú pháp này chỉ sữ dụng được với từng style như ví dụ dưới đây. Ví dụ 1:

#input.scss
$value: 3;
.menhde-if1 {
	font-weight: If($value > 5, bold, nomarl);
}

$value: 6;
.menhde-if2 {
	font-weight: If($value > 5, bold, nomarl);
}

Kết quả sau khi biên dịch sẻ là

#output.css
.menhde-if1 {
  font-weight: nomarl;
}
.menhde-if2 {
  font-weight: bold;
}

Mệnh đề "@if-@else"

Sử dụng cú pháp này khi bạn muốn trả về một block gồm nhiều style hay class khác nhau. Ngoài ra chúng ta hoàn toàn có thể dùng nhiều điều kiện lồng nhau như ví dụ dưới đây. Ví dụ 2:

#input.scss
@mixin trai-cay($value) {
  @if $value == mauvang {
  	background-color: yellow;
    .noi-dung {
        color: black;
    }
  }
  @else if $value == mautim {
  	background-color: purple;
    .noi-dung {
        color: white;
    }
  }
  @else {
  	backround-color: red;
    .noi-dung {
        color: green;
    }
  }
}
.trai-chuoi {
  @include trai-cay(mauvang);
}
.trai-cherry {
  @include trai-cay(mautim);
}
.trai-tao, .ca-chua {
  @include trai-cay(maudo);
}

Kết quả sau khi biên dịch sẻ là

#output.css
.trai-chuoi {
  background-color: yellow;
}
.trai-chuoi .noi-dung {
  color: black;
}
.trai-cherry {
  background-color: purple;
}
.trai-cherry .noi-dung {
  color: white;
}
.trai-tao, .ca-chua {
  backround-color: red;
}
.trai-tao .noi-dung, .ca-chua .noi-dung {
  color: green;
}

Mệnh đề "@for"

Cú pháp này được sử dụng để tạo ra nhiều styles giống nhau về mặt cấu trúc style và chỉ khác nhau ở giá trị. Với mỗi lần lặp, ta sẻ sử dụng chính biến đếm của vòng lặp đó để điều chỉnh giá trị cho các style Ví dụ 3:

#input.scss
@for $i from 1 through 3 {
    .cap-do-#{$i} {
      font-size: 10px + 5 * $i;
      padding-left: 10px * $i; 
    }
}

Kết quả sau khi biên dịch là

#output.css
.cap-do-1 {
  font-size: 15px;
  padding-left: 10px;
}
.cap-do-2 {
  font-size: 20px;
  padding-left: 20px;
}
.cap-do-3 {
  font-size: 25px;
  padding-left: 30px;
}

Mệnh đề "@while"

Cú pháp @while lặp lại liên tục cho khi điều kiện vẫn còn đúng. Với cú pháp này bạn cần chú ký trường hợp lặp mãi mãi khi điều kiện luôn đúng. Ví dụ4:

#input.scss
$i: 1;
@while $i <= 3 {
    .cap-do-#{$i} {
      font-size: 10px + 5 * $i;
 	  padding-left: 10px * $i;
    }
    $i: $i + 1;
}

Kết quả sau khi biên dịch là

#output.css
.cap-do-1 {
  font-size: 15px;
  padding-left: 10px;
}
.cap-do-2 {
  font-size: 20px;
  padding-left: 20px;
}
.cap-do-3 {
  font-size: 25px;
  padding-left: 30px;
}

Mệnh đề "@each"

Cú pháp này gán một biến giatri với một danh sách(mãng) các giá trị. @each set giatri cho từng giá trị trong danh sách, sau đó sử dụng $$iatri để xuất ra styles sau khi biên dịch. Chúng ta có các cách viết như sau Ví dụ 5:

#input.scss
@each $icon in (facebook google wsm)  {
    .kieu1-#{$icon} {
        background-image: url('/images/#{$icon}.png');
    }
}

@each $icon, $color in (facebook, blue), (google, red), (wsm, orange)  {
    .kieu2-#{$icon} {
        background-image: url('/images/#{$icon}.png');
      	color: $color;
    }
}


@each $icon, $color in (facebook: blue, google: red, wsm: orange)  {
    .kieu3-#{$icon} {
        background-image: url('/images/#{$icon}.png');
      	color: $color;
    }
}

Kết quả sau khi biên dịch là

#output.css
.kieu1-facebook {
  background-image: url("/images/facebook.png");
}
.kieu1-google {
  background-image: url("/images/google.png");
}
.kieu1-wsm {
  background-image: url("/images/wsm.png");
}
.kieu2-facebook {
  background-image: url("/images/facebook.png");
  color: blue;
}
.kieu2-google {
  background-image: url("/images/google.png");
  color: red;
}
.kieu2-wsm {
  background-image: url("/images/wsm.png");
  color: orange;
}
.kieu3-facebook {
  background-image: url("/images/facebook.png");
  color: blue;
}
.kieu3-google {
  background-image: url("/images/google.png");
  color: red;
}
.kieu3-wsm {
  background-image: url("/images/wsm.png");
  color: orange;
}

Trên đây là bài viết mình giới thiệu đến các bạn cú pháp của các mệnh đề điều kiện được áp dụng trong SASS. Qua hai bài viết (phần 1) vừa qua mình hi vọng nó sẻ giúp các bạn có thể kiểm soát và làm chủ tốt hơn các stylesheets của mình. Bài viết không tránh khỏi nhiều thiếu sót mong các bạn có thể góp ý trực tiếp bằng cách comment vào bài viết này. Cảm ơn và chúc các bạn thành công!