Nếu khác trong SCSS

Chúng ta có thể sử dụng câu điều kiện trong Sass dưới dạng @if, @else, @else if và @if not. Giống như các ngôn ngữ lập trình khác, ngôn ngữ này sẽ chỉ viết câu lệnh CSS nếu điều kiện được đáp ứng. Chúng là những câu lệnh thực sự hữu ích để sử dụng trong các vòng lặp và mixin mà chúng ta có thể muốn kiểm tra xem một điều kiện được đánh giá là đúng hay sai

@if, @else và @else nếu

Chúng tôi mở điều kiện của mình bằng @if và có thể theo dõi nó bằng @else if hoặc @else. Khi một điều kiện được đáp ứng thì css được tạo

@if $something {
    // do something
} @else if $something-else {
    // do something else
} @else {
    // or do this
}

Trong Sass 'null' và 'false' là sai;

Trong bài đăng cuối cùng của tôi, chúng tôi đã xem xét các vòng lặp trong Sass, vì vậy hãy sử dụng vòng lặp chủ đề trong ví dụ của chúng tôi

$themeColours: (
    "pink": #DC51AC,
    "red": #D64651,
    "orange": #E55937,
);

@each $themeColour, $i in $themeColours {
    body {
        &.#{$themeColour} {
            background-color: $i;

            @if $themeColour == "pink" {
                color: #000;
            } @else if $themeColour == "red" {
                color: #fff;
            } @else {
                color: #DEEDEE;
            }
        }	
    }
}

Ở đây chúng tôi đang lặp qua một mảng màu chủ đề để thay đổi màu văn bản nội dung. Chúng tôi đang sử dụng câu lệnh if để kiểm tra khóa ($themeColour) cho các giá trị “pink” và “red” và nếu không thì đặt màu mặc định. Đầu ra trông như thế này

/* Output */

body.pink {
    background-color: #DC51AC;
    color: #000; 
}

body.red {
    background-color: #D64651;
    color: #fff; 
}

body.orange {
    background-color: #E55937;
    color: #DEEDEE; 
}

@nếu không

Bạn cũng có thể đánh giá sai bằng cách sử dụng @if not. Để @if không hoạt động, bạn phải đặt dấu ngoặc đơn xung quanh đối số

$width: 50px;

div {
    width: $width;

    @if not ($width == 100px) {
        background: red;
    } else {
        background: blue;
    }
}

Câu lệnh này đặt nền thành 'đỏ' nếu $width không bằng 100px và thành 'xanh lam' nếu $width bằng 100px

SASS cũng cung cấp hỗ trợ cho kiểm soát luồng bằng cách cung cấp các quy tắc tại

@mixin borderstyle($color, $round: false) {
  border-color: $color;
}

  @if $round {
    border-radius: 5px;
  }

.blue-border {
  @include borderstyle(blue, $round: false);
}
.red-border-round {
  @include borderstyle(red, $round: true);
}

0,

@mixin borderstyle($color, $round: false) {
  border-color: $color;
}

  @if $round {
    border-radius: 5px;
  }

.blue-border {
  @include borderstyle(blue, $round: false);
}
.red-border-round {
  @include borderstyle(red, $round: true);
}

1 và

@mixin borderstyle($color, $round: false) {
  border-color: $color;
}

  @if $round {
    border-radius: 5px;
  }

.blue-border {
  @include borderstyle(blue, $round: false);
}
.red-border-round {
  @include borderstyle(red, $round: true);
}

2 có thể được sử dụng trong SASS để viết mã phức tạp bằng cách triển khai các điều kiện trong biểu định kiểu của bạn

Trong khi viết các hàm SASS hoặc SASS mixin, chúng ta có thể xác định các quy tắc kiểu khác nhau tùy thuộc vào giá trị của các đối số được cung cấp khi bao gồm một mixin hoặc một hàm được gọi. Điều này có thể được thực hiện bằng cách sử dụng các quy tắc SASS

@mixin borderstyle($color, $round: false) {
  border-color: $color;
}

  @if $round {
    border-radius: 5px;
  }

.blue-border {
  @include borderstyle(blue, $round: false);
}
.red-border-round {
  @include borderstyle(red, $round: true);
}

0 và

@mixin borderstyle($color, $round: false) {
  border-color: $color;
}

  @if $round {
    border-radius: 5px;
  }

.blue-border {
  @include borderstyle(blue, $round: false);
}
.red-border-round {
  @include borderstyle(red, $round: true);
}

1, giúp dễ dàng viết các quy tắc kiểu động hơn

SASS @mixin borderstyle($color, $round: false) { border-color: $color; } @if $round { border-radius: 5px; } .blue-border { @include borderstyle(blue, $round: false); } .red-border-round { @include borderstyle(red, $round: true); }0 Theo quy định

Có thể sử dụng quy tắc SASS

@mixin borderstyle($color, $round: false) {
  border-color: $color;
}

  @if $round {
    border-radius: 5px;
  }

.blue-border {
  @include borderstyle(blue, $round: false);
}
.red-border-round {
  @include borderstyle(red, $round: true);
}

0 để kiểm soát việc thực thi khối kiểu dựa trên một điều kiện

SASS @mixin borderstyle($color, $round: false) { border-color: $color; } @if $round { border-radius: 5px; } .blue-border { @include borderstyle(blue, $round: false); } .red-border-round { @include borderstyle(red, $round: true); }0. cú pháp

Cú pháp sử dụng quy tắc

@mixin borderstyle($color, $round: false) {
  border-color: $color;
}

  @if $round {
    border-radius: 5px;
  }

.blue-border {
  @include borderstyle(blue, $round: false);
}
.red-border-round {
  @include borderstyle(red, $round: true);
}

0 khá đơn giản,

$themeColours: (
    "pink": #DC51AC,
    "red": #D64651,
    "orange": #E55937,
);

@each $themeColour, $i in $themeColours {
    body {
        &.#{$themeColour} {
            background-color: $i;

            @if $themeColour == "pink" {
                color: #000;
            } @else if $themeColour == "red" {
                color: #fff;
            } @else {
                color: #DEEDEE;
            }
        }	
    }
}

3

Ở đây, nếu biểu thức đánh giá là đúng, thì khối được liên kết với quy tắc tại

@mixin borderstyle($color, $round: false) {
  border-color: $color;
}

  @if $round {
    border-radius: 5px;
  }

.blue-border {
  @include borderstyle(blue, $round: false);
}
.red-border-round {
  @include borderstyle(red, $round: true);
}

0 được đánh giá, biên dịch thành quy tắc kiểu CSS và nếu biểu thức đánh giá là sai, thì khối đó sẽ bị bỏ qua

SASS @mixin borderstyle($color, $round: false) { border-color: $color; } @if $round { border-radius: 5px; } .blue-border { @include borderstyle(blue, $round: false); } .red-border-round { @include borderstyle(red, $round: true); }0. Ví dụ

Hãy lấy một ví dụ để thấy quy tắc

@mixin borderstyle($color, $round: false) {
  border-color: $color;
}

  @if $round {
    border-radius: 5px;
  }

.blue-border {
  @include borderstyle(blue, $round: false);
}
.red-border-round {
  @include borderstyle(red, $round: true);
}

0 đang hoạt động

@mixin borderstyle($color, $round: false) {
  border-color: $color;
}

  @if $round {
    border-radius: 5px;
  }

.blue-border {
  @include borderstyle(blue, $round: false);
}
.red-border-round {
  @include borderstyle(red, $round: true);
}

Điều này sẽ được biên dịch thành CSS sau

$themeColours: (
    "pink": #DC51AC,
    "red": #D64651,
    "orange": #E55937,
);

@each $themeColour, $i in $themeColours {
    body {
        &.#{$themeColour} {
            background-color: $i;

            @if $themeColour == "pink" {
                color: #000;
            } @else if $themeColour == "red" {
                color: #fff;
            } @else {
                color: #DEEDEE;
            }
        }	
    }
}

8

SASS @mixin borderstyle($color, $round: false) { border-color: $color; } @if $round { border-radius: 5px; } .blue-border { @include borderstyle(blue, $round: false); } .red-border-round { @include borderstyle(red, $round: true); }1 Theo quy định

SASS

@mixin borderstyle($color, $round: false) {
  border-color: $color;
}

  @if $round {
    border-radius: 5px;
  }

.blue-border {
  @include borderstyle(blue, $round: false);
}
.red-border-round {
  @include borderstyle(red, $round: true);
}

1 at-rule được sử dụng với

@mixin borderstyle($color, $round: false) {
  border-color: $color;
}

  @if $round {
    border-radius: 5px;
  }

.blue-border {
  @include borderstyle(blue, $round: false);
}
.red-border-round {
  @include borderstyle(red, $round: true);
}

0 at-rule để cung cấp một khối thay thế được thực thi nếu biểu thức

@mixin borderstyle($color, $round: false) {
  border-color: $color;
}

  @if $round {
    border-radius: 5px;
  }

.blue-border {
  @include borderstyle(blue, $round: false);
}
.red-border-round {
  @include borderstyle(red, $round: true);
}

0 trả về false. Quy tắc

@mixin borderstyle($color, $round: false) {
  border-color: $color;
}

  @if $round {
    border-radius: 5px;
  }

.blue-border {
  @include borderstyle(blue, $round: false);
}
.red-border-round {
  @include borderstyle(red, $round: true);
}

1 là tùy chọn và không bắt buộc phải sử dụng nó cùng với quy tắc

@mixin borderstyle($color, $round: false) {
  border-color: $color;
}

  @if $round {
    border-radius: 5px;
  }

.blue-border {
  @include borderstyle(blue, $round: false);
}
.red-border-round {
  @include borderstyle(red, $round: true);
}

0

SASS @mixin borderstyle($color, $round: false) { border-color: $color; } @if $round { border-radius: 5px; } .blue-border { @include borderstyle(blue, $round: false); } .red-border-round { @include borderstyle(red, $round: true); }1. cú pháp

Cú pháp sử dụng quy tắc

@mixin borderstyle($color, $round: false) {
  border-color: $color;
}

  @if $round {
    border-radius: 5px;
  }

.blue-border {
  @include borderstyle(blue, $round: false);
}
.red-border-round {
  @include borderstyle(red, $round: true);
}

1 khá đơn giản,

/* Output */

body.pink {
    background-color: #DC51AC;
    color: #000; 
}

body.red {
    background-color: #D64651;
    color: #fff; 
}

body.orange {
    background-color: #E55937;
    color: #DEEDEE; 
}

7

GHI CHÚ. Không thể sử dụng quy tắc SASS

@mixin borderstyle($color, $round: false) {
  border-color: $color;
}

  @if $round {
    border-radius: 5px;
  }

.blue-border {
  @include borderstyle(blue, $round: false);
}
.red-border-round {
  @include borderstyle(red, $round: true);
}

1 nếu không có quy tắc

@mixin borderstyle($color, $round: false) {
  border-color: $color;
}

  @if $round {
    border-radius: 5px;
  }

.blue-border {
  @include borderstyle(blue, $round: false);
}
.red-border-round {
  @include borderstyle(red, $round: true);
}

0. Nó phải luôn tuân theo quy tắc

@mixin borderstyle($color, $round: false) {
  border-color: $color;
}

  @if $round {
    border-radius: 5px;
  }

.blue-border {
  @include borderstyle(blue, $round: false);
}
.red-border-round {
  @include borderstyle(red, $round: true);
}

0

SASS @mixin borderstyle($color, $round: false) { border-color: $color; } @if $round { border-radius: 5px; } .blue-border { @include borderstyle(blue, $round: false); } .red-border-round { @include borderstyle(red, $round: true); }1. Ví dụ

Hãy lấy một ví dụ để thấy quy tắc

@mixin borderstyle($color, $round: false) {
  border-color: $color;
}

  @if $round {
    border-radius: 5px;
  }

.blue-border {
  @include borderstyle(blue, $round: false);
}
.red-border-round {
  @include borderstyle(red, $round: true);
}

1 đang hoạt động

$width: 50px;

div {
    width: $width;

    @if not ($width == 100px) {
        background: red;
    } else {
        background: blue;
    }
}

3

Điều này sẽ được biên dịch thành CSS sau

$width: 50px;

div {
    width: $width;

    @if not ($width == 100px) {
        background: red;
    } else {
        background: blue;
    }
}

4

SASS @mixin borderstyle($color, $round: false) { border-color: $color; } @if $round { border-radius: 5px; } .blue-border { @include borderstyle(blue, $round: false); } .red-border-round { @include borderstyle(red, $round: true); }2 Theo quy định

Để xác định nhiều luồng có điều kiện, chúng ta có thể sử dụng quy tắc theo quy tắc

@mixin borderstyle($color, $round: false) {
  border-color: $color;
}

  @if $round {
    border-radius: 5px;
  }

.blue-border {
  @include borderstyle(blue, $round: false);
}
.red-border-round {
  @include borderstyle(red, $round: true);
}

2 cùng với quy tắc theo quy tắc

@mixin borderstyle($color, $round: false) {
  border-color: $color;
}

  @if $round {
    border-radius: 5px;
  }

.blue-border {
  @include borderstyle(blue, $round: false);
}
.red-border-round {
  @include borderstyle(red, $round: true);
}

0. SASS @else if at-rule có thể được sử dụng giữa @if at-rule và @else at-rule để bao gồm nhiều khối kiểu có điều kiện

SASS @mixin borderstyle($color, $round: false) { border-color: $color; } @if $round { border-radius: 5px; } .blue-border { @include borderstyle(blue, $round: false); } .red-border-round { @include borderstyle(red, $round: true); }2. cú pháp

Cú pháp của @else if at-rule tương tự như cú pháp của @if at-rule

$width: 50px;

div {
    width: $width;

    @if not ($width == 100px) {
        background: red;
    } else {
        background: blue;
    }
}

9

Giống như quy tắc

@mixin borderstyle($color, $round: false) {
  border-color: $color;
}

  @if $round {
    border-radius: 5px;
  }

.blue-border {
  @include borderstyle(blue, $round: false);
}
.red-border-round {
  @include borderstyle(red, $round: true);
}

0, quy tắc

@mixin borderstyle($color, $round: false) {
  border-color: $color;
}

  @if $round {
    border-radius: 5px;
  }

.blue-border {
  @include borderstyle(blue, $round: false);
}
.red-border-round {
  @include borderstyle(red, $round: true);
}

2 cũng lấy một biểu thức làm điều kiện và nếu biểu thức của quy tắc

@mixin borderstyle($color, $round: false) {
  border-color: $color;
}

  @if $round {
    border-radius: 5px;
  }

.blue-border {
  @include borderstyle(blue, $round: false);
}
.red-border-round {
  @include borderstyle(red, $round: true);
}

0 đánh giá là sai và biểu thức

@mixin borderstyle($color, $round: false) {
  border-color: $color;
}

  @if $round {
    border-radius: 5px;
  }

.blue-border {
  @include borderstyle(blue, $round: false);
}
.red-border-round {
  @include borderstyle(red, $round: true);
}

2 đánh giá là đúng, thì khối kiểu

@mixin borderstyle($color, $round: false) {
  border-color: $color;
}

  @if $round {
    border-radius: 5px;
  }

.blue-border {
  @include borderstyle(blue, $round: false);
}
.red-border-round {
  @include borderstyle(red, $round: true);
}

2 được biên dịch

Ngoài ra,

@mixin borderstyle($color, $round: false) {
  border-color: $color;
}

  @if $round {
    border-radius: 5px;
  }

.blue-border {
  @include borderstyle(blue, $round: false);
}
.red-border-round {
  @include borderstyle(red, $round: true);
}

2 phải luôn được sử dụng với quy tắc

@mixin borderstyle($color, $round: false) {
  border-color: $color;
}

  @if $round {
    border-radius: 5px;
  }

.blue-border {
  @include borderstyle(blue, $round: false);
}
.red-border-round {
  @include borderstyle(red, $round: true);
}

0, giống như quy tắc

@mixin borderstyle($color, $round: false) {
  border-color: $color;
}

  @if $round {
    border-radius: 5px;
  }

.blue-border {
  @include borderstyle(blue, $round: false);
}
.red-border-round {
  @include borderstyle(red, $round: true);
}

1

SASS @mixin borderstyle($color, $round: false) { border-color: $color; } @if $round { border-radius: 5px; } .blue-border { @include borderstyle(blue, $round: false); } .red-border-round { @include borderstyle(red, $round: true); }2. Ví dụ

Hãy lấy một ví dụ để xem quy tắc

@mixin borderstyle($color, $round: false) {
  border-color: $color;
}

  @if $round {
    border-radius: 5px;
  }

.blue-border {
  @include borderstyle(blue, $round: false);
}
.red-border-round {
  @include borderstyle(red, $round: true);
}

2 đang hoạt động

@mixin borderstyle($color, $round: false) {
  border-color: $color;
}

  @if $round {
    border-radius: 5px;
  }

.blue-border {
  @include borderstyle(blue, $round: false);
}
.red-border-round {
  @include borderstyle(red, $round: true);
}

0

Trong ví dụ trên, chúng tôi đã sử dụng

$width: 50px;

div {
    width: $width;

    @if not ($width == 100px) {
        background: red;
    } else {
        background: blue;
    }
}

39 làm tham số để xác định xem màu đó có phải là màu nguy hiểm, cảnh báo, v.v.

Hãy để chúng tôi lấy thêm một ví dụ bên dưới, ở đây chúng tôi đã sử dụng một mixin SASS cho các kiểu đường viền khác nhau

@mixin borderstyle($color, $round: false) {
  border-color: $color;
}

  @if $round {
    border-radius: 5px;
  }

.blue-border {
  @include borderstyle(blue, $round: false);
}
.red-border-round {
  @include borderstyle(red, $round: true);
}

2

Mã SASS ở trên sẽ được biên dịch thành mã CSS sau

@mixin borderstyle($color, $round: false) {
  border-color: $color;
}

  @if $round {
    border-radius: 5px;
  }

.blue-border {
  @include borderstyle(blue, $round: false);
}
.red-border-round {
  @include borderstyle(red, $round: true);
}

3

Vì vậy, trong hướng dẫn này, chúng ta đã học cách triển khai kiểm soát luồng trong SASS bằng cách sử dụng quy tắc theo quy tắc

@mixin borderstyle($color, $round: false) {
  border-color: $color;
}

  @if $round {
    border-radius: 5px;
  }

.blue-border {
  @include borderstyle(blue, $round: false);
}
.red-border-round {
  @include borderstyle(red, $round: true);
}

0,

@mixin borderstyle($color, $round: false) {
  border-color: $color;
}

  @if $round {
    border-radius: 5px;
  }

.blue-border {
  @include borderstyle(blue, $round: false);
}
.red-border-round {
  @include borderstyle(red, $round: true);
}

1 và

@mixin borderstyle($color, $round: false) {
  border-color: $color;
}

  @if $round {
    border-radius: 5px;
  }

.blue-border {
  @include borderstyle(blue, $round: false);
}
.red-border-round {
  @include borderstyle(red, $round: true);
}

2 trong biểu định kiểu của bạn để giúp biểu định kiểu của bạn năng động hơn

Chúng ta có thể sử dụng điều kiện if trong SCSS không?

#{} trong SCSS là gì?

Lệnh nào thực thi mã dựa trên điều kiện trong sass?

Các tính năng hấp dẫn nhất của Sass là gì?