SASS/SCSS : CSS Preprocessor không thể thiếu cho Frontend Developer. ( phần II )
Sass
8
White

Vinh Trần viết ngày 24/04/2018

trong phần này, mình sẽ đề cập tới cú pháp và một số tính năng rất cơ bản của SASS mà ai cũng có thể nắm được chỉ sau 15 phút đọc, SASS đương nhiên là có những phần hay hơn, phần đó mình sẽ đề cập đến trong phần 3 của series.

Những phần cơ bản nhất

Kiểu dữ liệu:

Sass hỗ trợ sử dụng bốn kiểu dữ liệu, đó là

  • số ( kể cả đơn vị )

  • Chuỗi ( dù được quote hay không quote )

  • màu sắc

  • luận lý đúng sai Boolean

Cú pháp

Biến ( variables )

Chứa nội dung mà bạn sử dụng nhiều trong stylesheet. Bạn có thể chứa các giá trị vào đó, như màu sắc, font stack, và bất kỳ giá trị CSS nào bạn muốn sử dụng.

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

sẽ được compile ra:

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

Cú pháp lồng nhau ( nesting )

để style cho class .bar nằm trong class .foo, ta viết như sau:

.foo{
    .bar {
        property: 'value .bar';
    }
}

sẽ compile ra :

.foo .bar {
    property: 'value .bar';
}

tương tự, chúng ta cũng có thể sử dụng các CSS combinator khác như child selector ( > ), adjacent sibling selector (+), general sibling selector (~)

.foo {
  > .bar {
    property: 'value .bar'
  }
  + .boop {
    property: 'value .boop';
  }
  ~ .boo {
    property: 'value .oo'
  }
}

sẽ compile ra

.foo > .bar {
  property: "value .bar";
}
.foo + .boop {
  property: "value .boop";
}
.foo ~ .boo {
  property: "value .boo";
}
Sử dụng cùng biểu tượng "và" ( Ampersand ) - &
.foo {
  &__bar {
      property: "value .bar";
  }

  &__boop {
      property: "value .boop";
  }

  &.boo {
      property: "value .foo.boo";
  }
}

sẽ compile ra như sau:

.foo__bar {
  property: "value .bar";
}
.foo__boop {
  property: "value .boop";
}
.foo.boo {
  property: "value .foo.boo";
}

vì thế, chúng cực kỳ thích hợp khi dùng với BEM naming

.Block {
  property: 'value block';
  &__Element {
    property: 'value block__element';
  }
  &--Modifier {
    property: 'value block--modifier';
  }
}

Sẽ compile ra

.Block {
  property: "value block";
}
.Block__Element {
  property: "value block__element";
}
.Block--Modifier {
  property: "value block--modifier";
}

và sử dụng với các pseudo class và pseudo element:

.Block {
  property: 'value block';
  &:Hover {
    property: 'value hover';
  }
  &:After {
    property: 'value after';
  }
}

Sẽ compile ra

.Block {
  property: "value block";
}
.Block:Hover {
  property: "value hover";
}
.Block:After {
  property: "value after";
}

! --- BẠN NÊN CÂN NHẮC GIỮA VIỆC DỄ ĐỌC VÀ SỰ TIỆN LỢI KHI SỬ DỤNG CÚ PHÁP XẾP LỒNG --!

trên đây mình đã đề cập đến một số cái cơ bản về cú pháp mà bạn có thể sử dụng ngay, những cái khác hay ho hơn mình sẽ đề cập đến trong phần 3 .

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Vinh Trần

2 bài viết.
1 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
3 2
Những khái niệm đầu tiên Nó là gì ? Sass là viết tắt của cụm Syntactically Awesome Style Sheets ( Style Sheet có cú pháp ảo diệu , đại loại thế ...
Vinh Trần viết 4 tháng trước
3 2
Bài viết liên quan
White
4 3
Đây là vấn đề đau đầu và thường gây tranh cải nhất trong khi bạn làm việc nhóm hoặc cả chính những lúc bạn muốn xem lại code của mình. Thối quen l...
tuds viết hơn 2 năm trước
4 3
White
3 2
Những khái niệm đầu tiên Nó là gì ? Sass là viết tắt của cụm Syntactically Awesome Style Sheets ( Style Sheet có cú pháp ảo diệu , đại loại thế ...
Vinh Trần viết 4 tháng trước
3 2
White
2 0
Đầu tiên tôi sẽ liệt kê một số thứ bạn cần nắm, chạm, sờ khi dùng @each trong Sass trước nhé. Đặt biến Bạn có thể dễ dàng đặt 1 biến mà bạn cần s...
tuds viết hơn 2 năm trước
2 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
2 bài viết.
1 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!