programming html

Sử dụng scss html

Bất kỳ lập trình viên nào cũng phải từng công việc liên quan đến CSS. Tuy nhiên, làm việc với CSS thuần túy trong một khoảng thời gian dài, bạn sẽ thấy nó rất thỏa mãn. Bạn có thể viết CSS một cách chuyên nghiệp hơn, nhanh hơn và rõ ràng mạch lạc hơn bằng SASS/SCSS

CSS Preprocessor là gì?

CSS Preprocessors là ngôn ngữ tiền xử lý CSS. Là một ngôn ngữ kịch bản mở rộng của CSS và được biên dịch thành cú pháp CSS giúp bạn viết CSS nhanh hơn và có cấu trúc rõ ràng hơn. CSS Preprocessor có thể giúp bạn viết CSS tiết kiệm thời gian, dễ dàng bảo trì và phát triển CSS

SASS/SCSS là gì?

SASS/SCSS là một CSS tiền xử lý chương trình [CSS tiền xử lý]. Nó giúp bạn viết CSS theo cách của một ngôn ngữ lập trình, có cấu trúc rõ ràng, giám sát mạch, dễ phát triển và bảo mật mã hơn. Ngoài ra nó còn có rất nhiều thư viện hỗ trợ kèm theo giúp bạn viết mã CSS một cách dễ dàng đơn giản hơn. Có rất nhiều loại CSS Preprocessor trong đó bao gồm SASS, Stylus hay LESS

Menu 1

Menu 2

Ví dụ nếu bạn chỉ muốn CSS cho thẻ ul với menu lớp, với CSS thuần bạn sẽ viết

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

Nếu bạn tiếp tục muốn CSS cho thẻ li trong thẻ ul [có lớp là menu] thì

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

Sau đó, bạn muốn tiếp tục CSS cho thẻ a trong thẻ li… bạn sẽ phải lặp lại tên thẻ [hoặc lớp hoặc id] cha của thẻ muốn css thì sẽ rất mệt và chán. Thay vào đó bạn có thể sử dụng Nested Ruled của SASS để giúp mọi thứ trở nên đơn giản hơn một cách rõ ràng. Ví dụ

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

        li {
            padding: 3px;

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

Và sau khi đoạn SASS được biên dịch ra CSS thuần sẽ như sau

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

Thực tế mình nhận thấy rằng quy tắc xếp chồng này cũng được sử dụng rất nhiều khi vào 1 project có viết css

Biến – biến

Sử dụng biến với SCSS vô cùng cơ bản, bạn chỉ cần đặt tên cho biến – bắt đầu bằng $. Biến thể chứa các giá trị mà chúng ta sử dụng nhiều lần ví dụ như mã màu, phông chữ hoặc kiểu chữ

$RedColor = #fff;

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

        li {
            padding: 3px;

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

Quy tắc Mixin

Mixin giúp bạn tạo các hàm được sử dụng trong SCSS, bạn hoàn toàn có thể truyền các tham số vào bên trong nó để sử dụng

Mixin là một biến thể chế độ khá phổ biến 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 hỗn hợp 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 các thuộc tính đó [Ví dụ ở trên là màu sắc so với kiểu phông chữ]

@mixin colorVsStyle {
    color: #f06;
    font-style: italic;
}

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

        li {
            padding: 5px;

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

Hoặc nếu bạn không muốn tô màu lúc nào cũng là #f06, thì bạn có thể truyền thuộc tính vào hỗn hợp dưới dạng 1 tham số bằng cách viết như sau

________số 8

It type as transfer params to method

Kế thừa – Extends

Khi nghe đến extends hay còn gọi là kế thừa, thì có thể bạn sẽ nghĩ ngay đến OOP [lập trình hướng đối tượng] đúng không?

.title-box {
    color: ##2EFEC8;
    text-shadow: 0px 0px 10px #6E6E6E;
    display: inline-block;
    text-transform: uppercase;
}

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

        li {
            padding: 4px;

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

Nhập khẩu

Cú pháp import của SASS rất hữu dụng và thường xuyên được sử dụng trong các dự án. Nó tương tự như cách bạn yêu cầu hoặc bao gồm tệp này vào tệp khác trong PHP

Đặt trường hợp bạn có 1 trang index, bao gồm header, body, footer. Thay vì sử dụng CSS cho những cái trên một phong cách. css thì với SASS bạn sẽ thực hiện như sau, nhớ có dấu _ trước tên tệp được nhập

Tạo 1 tệp _header. scss to CSS private for header
_cơ thể người. scss to CSS private for body
_footer. scss to CSS private for footer
Rồi ở file style. css ta chỉ cần @import 3 tệp trên mượt mà ngay

_tiêu đề. scss

_cơ thể người. scss

_footer. scss

Phong cách. scss

Loop

Mệnh đề điều kiện IF

Trình biên dịch SASS

Hiện nay tồn tại trong tương đối nhiều trình biên dịch SASS sang CSS thuần túy. Trong đó có hai trình biên dịch mình xài thường xuyên, mình sẽ giới thiệu ở bên dưới. Ngoài ra, bạn có thể tự tìm kiếm thêm các trình duyệt khác nhé

gấu túi

Đây là phần mềm dùng để biên dịch CSS Preprocessor như SASS, LESS… mình hay dùng nó khi viết SASS
Nó hoàn toàn miễn phí nếu bạn có thể tải và cài đặt nó tại. http. // ứng dụng koala. com/

2. Hỗn hợp Laravel

Nếu bạn đang làm việc bằng Laravel thì bạn không cần đến phần mềm thứ 3 đâu vì bản thân Laravel đã tích hợp một công cụ có tên là Laravel Mix rất đa năng, biên dịch các CSS Preprocessor sang CSS thuần túy là một trong những tính năng nâng cao
Bạn có thể tìm hiểu thêm về nó tại. https. // ấu trùng. com/docs/5. 7/trộn

Kết luận

Như những gì mình vừa trình bày ở phía trên, các bạn cũng có thể thấy những sức mạnh mà SASS/SCSS mang lại trong việc viết CSS, nó biến việc làm việc với SCSS như làm việc với một ngôn ngữ lập trình thực tế. Ngoài ra, với việc phải biên dịch từ SCSS ra CSS cũng cho phép chúng ta có thể sử dụng 1 số tính năng như. tự động thêm tiền tố vào các thuộc tính CSS3, định dạng lại các tệp CSS [nén hoặc ko nén]