learn-sass.scss

// define variable
$font-size-of-content: 14px;
$color-of-content: #241313;
$background-color-content: #ccc;
//----------------------------------------- extends simple
.parent {
    background-color: #E21B1B;
    font-size: 12px;
}
.class1 {
    @extend .parent;
    padding: 0, 0 1, 10;
}

//----------------------------------------- extends place holder
%parent {
    background-color: $background-color-content;
    font-size: $font-size-of-content;
    text-align: center;
}
.class2 {
    @extend %parent;
    padding: 0, 0 1, 10;
}
.class3 {
    @extend %parent;
    vertical-align: center;
    color: #FFFFFF;
}

//----------------------------------------- variable
.content {
    color: $color-of-content;
    font-size: $font-size-of-content;
}

//----------------------------------------- Nested Selector
.wrapper {
    %parent {
        color: $color-of-content;
        font-size: $font-size-of-content;
    }
    #header {
        @extend %parent;
        background-color: #71E614;
    }
    #footer {
        @extend %parent;
        background-color: #B6A1A1;
    }
}

// ------------------------------------------ @mixin & @if @else
@mixin message($backgroud, $color) {
    // operator: and, or, not
    @if $backgroud != '' {
        background: $backgroud;
    } @else {
        background: grey;
    }
    color: $color;
    font-size: $font-size-of-content;
    @content; // them @content neu muon bo sung them noi dung cho mixin
}
.success {
    @include message(red, blue) {
        padding-top: 10px;
    };
}
.error {
    @include message(#5A2424, green);
}

// ------------------------------------------- @for - through - to
@for $i from 1 through 4 {
    #item-#{$i}{
        background: red
    }
}
@for $i from 1 to 4 {
    #item-#{$i}{
        background: blue
    }
}

//-------------------------------------------- @while
$index : 1;
@while $index <= 2
{
    .col-xs-#{$index}{
        background: red;
    }
    // Tăng bước lặp lên, nếu không sẽ bị lặp vô hạn
    $index : ($index + 1);
}

//------------------------------------------- @each
$class-name : col-xs-1 col-xs-2 col-xs-3;
// cac phan tu cach nhau boi khoang trang
@each $name in $class-name {
    .#{$name} {
        background: green;
    }
}

//------------------------------------------ @function
@function width_wrapper($value) {
    @return ($value + 20px);
}
.wrapper{
    width: width_wrapper(80px);
}

/*
unquote($string)                        Xóa các cặp quote ra khỏi chuỗi $string.
quote($string)                          Thêm cặp quote bao quanh chuỗi $string
str-length($string)                     Trả về tổng số ký tự của chuỗi $string
str-insert($string,$insert,$index)      Thêm chuỗi $insert vào chuỗi $string tại vị trí $index
str-index($string, $substring)          Kiểm tra vị trí xuất hiện chuỗi $subtring trong chuỗi $string
str-slice($string,$start-at,[$end-at])  Cắt chuỗi bắt đầu từ $start-at và kết thúc tại $end-at, trường hợp không truyền $end-at thì nó lấy đến cuối chuỗi.
to-upper-case($string)                  Chuyển chuỗi $string sang chữ in hoa
to-lower-case($string)                  Chuyển chuỗi $string sang chữ in thường
*/