Làm việc với CSS là việc liên tục của mọi thể loại dev : v. Có khi nào bạn thấy chán cách viết CSS ‘ chay ‘ mà bạn vẫn đang viết thường ngày ? Có cách nào để viết CSS một cách chuyên nghiệp hơn không ? Có đấy, cùng tìm hiểu và khám phá trong bài viết này nhé .

Tóm Tắt

CSS Preprocessor là gì?

CSS Preprocessors là ngôn từ tiền giải quyết và xử lý CSS. Nó có hiệu quả sẽ giúp bạn viết một cú pháp CSS gần nhau với một ngôn từ lập trình rồi compile nó ra CSS thuần .
Có rất nhiều CSS Preprocessor như SASS, LESS, Stylus …. Tuy nhiên trong khuôn khổ bài viết này, mình sẽ trình làng bạn về SASS .

Nếu bạn đã biết đến Typescript – javascript Preprocessor thì công dụng của SASS cũng như Typescript vậy đó.

Bạn đang đọc: SASS/SCSS là gì? Tìm hiểu cách viết CSS bằng SASS/SCSS

Cùng khám phá xem nó như thế nào nhé .

SASS là gì?

SASS ( Syntactically Awesome StyleSheets ) là một CSS Preprocessor giúp bạn viết CSS nhanh hơn và có cấu trúc rõ ràng hơn. Với SASS, bạn hoàn toàn có thể viết CSS theo thứ tự rõ ràng, quản trị những biến đã được định nghĩa sẵn, những class dùng chung hay hoàn toàn có thể tự động hóa nén tập tin CSS lại để bạn tiết kiệm chi phí dung tích .

SCCS là gì?

SASS được phong cách thiết kế và viết bởi những lập trình viên Ruby. Bởi vậy, Sass stylesheets sử dụng cú pháp giống như Ruby với việc không có những dấu ngoặc nhọn { }, dấu chấm phẩy, việc viết CSS như vậy không ‘ gần ‘ CSS thuần nên việc hiểu và đọc code SASS rất khó hiểu, kiểu như này :

.title 
     color= #fff;
     font-size= 50px;

Sass giống như vậy cho đến khi phiên bản 3.0 được phát hành vào tháng 5/2010, nó trình làng một cú pháp mới được gọi là SCSS ( Sassy CSS ). Cú pháp này nhằm mục đích thu hẹp khoảng cách giữa Sass và CSS bằng cách mang tới một cú pháp thân thiện với CSS .
Hiểu 1 cách đơn thuần, SCSS là một bản tăng cấp của SASS giúp tất cả chúng ta viết CSS một cách thuận tiện và dễ hiểu hơn .
Ok, let’s gooooooooooo ! ! !

Quy tắc xếp chồng (Nested Rule)

Ví dụ mình có một đoạn HTML như sau

Giả sử bạn chỉ muốn CSS cho thẻ ul với class menu, với CSS thuần bạn viết

.navbar ul.menu {
    list-style: none;
}

Nếu bạn liên tục muốn CSS cho thẻ li trong thẻ ul ( có class là menu ) thì

.navbar ul.menu li {
    padding: 5px;
}

Rồi bạn lại liên tục muốn CSS cho thẻ a trong thẻ li … thì cứ phải viết lặp đi lặp lại tên tag ( hoặc class, hoặc id ) cha của thẻ muốn css thì rất cực phải không nào ?
Nested Rule của SASS sinh ra để giúp bạn làm điều trên một cách đơn thuần hơn .
Cú pháp viết như sau :

.navbar {
    ul.menu {
        list-style: none;

        li {
            padding: 5px;

            a {
                text-decoration: none;
            }
        }
    }
}

Và sau khi được đoạn SASS trên được compile ra CSS thuần sẽ như sau :

.navbar ul.menu {
    list-style: none;
}
.navbar ul.menu li {
    padding: 5px;
}
.navbar ul.menu li a {
    text-decoration: none;
}

Thực tế quy tắc xếp chồng được sử dụng rất nhiều khi vào 1 project có viết css bằng SASS

Biến (Variable)

Biến chứa những giá trị mà bạn hoàn toàn có thể sử dụng nhiều lần, ví dụ mã màu, font hay kiểu chữ ….
Để khai báo một biến trong SASS, tất cả chúng ta sẽ viết dấu USD cùng với tên biến ( rất quen thuộc với những dev PHP =)) ) .
Ví dụ :

$whiteColor = #fff;

.navbar {
    ul.menu {
        list-style: none;

        li {
            padding: 5px;

            a {
                text-decoration: none;
                color: $whitecolor
            }
        }
    }
}

Quá ez nhỉ ?

Quy tắc Mixin

Với biến bạn chỉ có thể lưu 1 giá vào biến đó ? Giả sử ngoài thuộc tính color cho thẻ a, sau này mình muốn thêm font-size nữa thì sẽ ntn ? Bạn đang nghĩ đến việc viết thêm 1 biến $fontSize nữa phải ko ? Nghe được đấy, nhưng giả sử bạn có CSS cả color, cả fontSize cho nhiều thẻ a, hay p, hay h1 khác nhau thì cứ phải viết đi viết lại tên biến hử. Thử xem Mixin dưới xem có khác gì không nhá :V

Xem thêm: Vẽ tam giác cân bằng dấu sao trong C | Lập Trình Từ Đầu

Mixin là một chính sách khá phổ cập trong SASS. Công dụng của nó là mang nhiều thuộc tính mà bạn đã quy ước trong một mix nào đó rồi @ include vào một thành phần bất kể mà không cần phải viết lại những thuộc tính đó ( Ví dụ ở trên là color vs font-size )

@mixin colorVsFont {
    color: #fff;
    font-size: 50px;
}

.navbar {
    ul.menu {
        list-style: none;

        li {
            padding: 5px;

            a {
                text-decoration: none;
                @include colorVsFont;
            }
        }
    }
}

Hoặc nếu bạn k muốn color khi nào cũng là # fff, thì bạn hoàn toàn có thể truyền thuộc tính vào mix như 1 tham số bằng cách viết như sau

@mixin colorVsFont($color, $fontSize) {
    color: $color;
    font-size: $fontSize;
}

.navbar {
    ul.menu {
        list-style: none;

        li {
            padding: 5px;

            a {
                text-decoration: none;
                @include colorVsFont(#000, 50px);
            }
        }
    }
}

Như kiểu truyền params vào method ấy nhỉ =))

Extends – Kế thừa

Nghe giống OOP hem ? Thực ra là giống đấy. Cách thực thi sẽ là bạn định nghĩa ra 1 class, rồi những tag nào cần sử dụng thì @ extend nó vào là được rồi

.title-box {
    color: #dacb46;
    text-shadow: 1px 1px 1px #1a1a1a;
    display: inline-block;
    text-transform: uppercase;
}

.navbar {
    ul.menu {
        list-style: none;

        li {
            padding: 5px;

            a {
                text-decoration: none;
                @extend .title-box;
            }
        }
    }
}

Import

Đây là một cú pháp của SASS mà mình muốn trình làng với bạn vì nó rất hữu dụng và tiếp tục sử dụng trong những project. Nó khá giống cách bạn require hay include file này vào file khác trong PHP .
Giả sử bạn có 1 trang index, gồm có header, body toàn thân, footer. Thay vì bạn CSS cho những phần trên vào 1 style.css thì với SASS bạn làm như sau :

Tạo 1 file _header.scss để CSS riêng cho header.
Tạo 1 file _body.scss để CSS riêng cho body.
Tạo 1 file _footer.scss để CSS riêng cho footer.

( nhớ có dấu _ trước tên file được import )
Rồi ở file style.css ta chỉ cần @ import 3 file trên là ngon lành cành đào ngay

_header. scss

#header {
    // code sass here
}

_body. scss

#body {
    // code sass here
}

_footer. scss

#footer {
    // code sass here
}

style.scss

@import 'header';
@import 'body';
@import 'footer';

// code sass here

Khi bạn import sẽ không cần tên đuôi file (. scss ) nhé, thêm nữa là nhớ quan tâm đường dẫn của file bạn import .

Trình compile SASS

Có khá nhiều trình biên dịch SASS sang CSS thuần. Mình sẽ trình làng 2 công cụ mà mình đã sử dụng, ngoài những bạn hoàn toàn có thể tự search thêm nhé .

Koala
- Đây là phần mềm dùng để compile CSS Preprocessor như SASS, LESS… mình khá thường dùng nó khi viết SASS.
- Bạn có thể tải và cài đặt nó tại đây: http://koala-app.com/

Xem thêm: Struct trong C – Kiểu cấu trúc trong C | Ironhack Việt Nam

Laravel Mix
- Nếu bạn đang làm việc với project Laravel thì bạn chẳng cần đến phần mềm thứ 3 nữa vì Laravel đã tích hợp một công cụ gọi là Laravel Mix với rất nhiều tính năng, có thể compile các CSS Preprocessor sang CSS thuần là một trong những tính năng hay ho của nó.
- Bạn có thể tìm hiểu nó tại đây: https://laravel.com/docs/5.7/mix

Kết luận

Trên đây mình đã ra mắt bạn 1 số cú pháp thường dùng để viết CSS bằng SASS / SCSS. Sẽ còn những cú pháp khác nữa mình chưa kịp trình làng trong bài viết này, nếu bạn có nhu yếu và muốn hiểu sâu về nó nữa thì hoàn toàn có thể khám phá thêm. Nhưng mình nghĩ nhiêu đây bạn cũng đủ chiến rồi đấy
Nếu bạn đã đọc bài này đến đây rồi thì mình khuyên chân thành là đừng viết CSS ‘ chay ‘ nữa nhé ( kể cả với dev Back-end ), hãy viết SASS ngay và luôn .

Source: https://final-blade.com
Category : Kiến thức Internet

admin

final-blade.com