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

Sass

10

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 .