01/10/2018, 17:00

Ý nghĩa của ký tự '+' trong SCSS

Mình có một đoạn scss như thế này:

.slider-item {
  position: relative;
  transform: scale(.9);
  transform-origin: center right;
  transition: .25s transform;

  img {
    width: 100%;
  }

  &.slick-current,
  &.slick-center {
    transform: scale(1);
    transform-origin: center center;
    transition: .25s transform;
    z-index: 3;

    + .slider-item {
      transform-origin: center left;
      left: -50px;
    }
  }
}

Mình không hiểu ý nghĩa của + trong trường hợp này, mọi người có ai biết thì chỉ hộ mình. Cảm ơn!

Hung viết 19:01 ngày 01/10/2018

SCSS là preprocessor, đoạn code liên quan đến + của em sau khi biên dịch ra CSS như thế này

.slider-item.slick-current + .slider-item,
.slider-item.slick-center + .slider-item {
  transform-origin: center left;
  left: -50px;
}

Dấu + mà em hỏi là 1 trong các cách của CSS selector, gọi là adjacent sibling combinator. Cú pháp nó như sau:

element1 + element2 {
 ...
}

Khi đó tất cả element2 đứng kế bên trực tiếp theo sau element1 được chọn.

Ví dụ sau #item2 được chọn nhưng #item3 không được chọn:

<div class="parent">
  <div class="child" id="item1">First item</div>
  <div class="child" id="item2">Second item</div>
  <div class="child" id="item3">Third item</div>
</div>

#item1 + .child {
  color: #eee;
}

Nếu thêm 1 item giữa #item1 và #item2 thì sẽ không có item nào được chọn. Vì + chỉ lấy phần tử liền kề trực tiếp

<div class="parent">
  <div class="child" id="item1">First item</div>
  <div class="another-child" id="another-item">another item</div>
  <div class="child" id="item2">Second item</div>
  <div class="child" id="item3">Third item</div>
</div>

Bình luận về bài viết này

Chia sẻ tin đăng đến bạn bè

Gửi Messenger

Bài liên quan

Lê Quý Nguyên

0 chủ đề

0 bài viết

Tác giả nổi bật