Sử dụng SASS / SCSS

SASS / SCSS là gì

SASS (Systematically Awesome Style Sheets) là một một ngôn ngữ kịch bản tiền xử lý, từ nó được chuyển đổi ra CSS bằng các công cụ biên dịch khác nhau. SASS có hai loại cú pháp. Cú pháp gốc ban đầu là loại cú pháp viết theo kiểu thụt đầu dòng giống như Haml, nó phân chia các khối code bằng ký tự xuống dòng và thụt đầu dòng, các file viết theo cú pháp này thường để phần mở rộng .sass

Cú pháp viết code SASS thứ hai là SCSS (Sassy CSS), nó sử dụng các định dạng các khối code giống như chính CSS. Nó sử dụng {} để bọc khối code và ký hiệu ; để chia dòng trong khối lệnh đó. Các code viết theo SCSS lưu trong file có phần mở rộng .css

/*SASS*/

$color1: red
$color2: lime

a
    color: $color1
    &:hover
        color: $color2

/*SCSS*/

$color1: red;
$color2: lime;

a {
    color: $color1;
    &:hover {
        color: $color2;
        }
    }

/*CSS*/

a {
    color: red;
}
a:hover {
    color: lime;
}

Chọn cách viết theo SCSS

Khi sử dụng SASS bạn có thể tùy thích chọn viết theo cú pháp SASS hay SCSS, nếu chọn SASS thì có vẻ ngắn gọn, dễ đọc nhưng nó lại không kế thừa cú pháp CSS. Nên chọn cú pháp SCSS vì nó kế thừa chính CSS, nghĩa là một đoạn mã CSS, đưa vào SCSS thì nó chấp nhận luôn đoạn mã đó, nên bạn sẽ thấy rất quen thuộc. Tóm lại khi bạn viết SASS theo cú pháp SCSS thì bạn viết giống hệt CSS nhưng có thêm một vài mở rộng như biến, hàm, toán tử ...

Để thuận tiện, quen thuộc với CSS từ đây nói đến SASS là ám chỉ viết theo cú pháp SCSS

Để biên dịch SASS thành CSS xem : Biên dịch SCSS thành CSS

Tóm tắt SCSS

//Biến
$red: #833;
body {
  color: $red;
}

//Comment
//comment 1 dòng
/*
     comment nhiều dòng
 */

//Lồng nhau
ul.nav {
  list-style: none;
  li {
    padding: 10px;
  }
}

//Lồng thuộc tính
.box {
    border: {
        color: black;   //=>border-color:
        width: 2px;
        radius:5px;
    }
}

//parent Selector
.article {
    padding: 20px;
    color: antiquewhite;
    &.title {                  //=>.article.title
        color: red;
    }

    .inner & {                 //=>.inner .article
        color: green;
    }

    &-middle {                 //=>.article-middle
        background: #ca2020;
      }

}

//pseudo selector
a {
  text-decoration: none;
  &:hover, &:active {
    text-decoration: underline;
  }
}

//@extend
.box {
  border: 1px solid red;
}

.quote {
  @extend .box;
}

//@extend - placeholder
%box {
    border: 1px solid red;
  }

.quote {
    @extend %box;
}

//@mixin, biểu thức số học
$base-font-size: 16;

@mixin font-size($size) {
  font-size: ($size / $base-font-size) + rem;
}

.title {
  @include font-size(32);
}

//@function - hàm
@function px2rem($pxsize) {
    @return ($pxsize/16)+rem;
}

p.detail {
    font-size: px2rem(20);
}

//@if / @else
@mixin my-font-type($font: 'base') {
    @if ($font==bold) {
        font-family: 'Avenir-Demi';
    }
    @else if ($font==italic) {
        font-family:
            'Avenir-LightItal';
    }
    @else {
        font-family: 'Avenir-Light';
    }
}

.title1 {
    @include my-font-type('bold');
    font-weight: bold;
}

//@for, @each, list
// SCSS
//Khai báo 4 biến lưu mã màu
$home: #F7E900;
$about: #FF5F09;
$news: #A0005E;
$links: #41004B;
//Tạo biến list (danh sách) với 4 phần tử trên
$pages: $home,
$about,
$news,
$links;

@for $i from 1 through length($pages) {
    body.page-#{$i} {
        background: nth($pages, $i);
    }
}


@each $item in $pages {
    body.section-#{ index($pages, $item)} {
        background: $item;
    }
}