Làm câu hỏi với CSS là việc liên tiếp của số đông thể một số loại dev :v. Có lúc nào bạn thấy chán biện pháp viết CSS "chay" mà các bạn vẫn sẽ viết thường xuyên ngày? bao gồm cách nào nhằm viết CSS một cách bài bản hơn ko ? bao gồm đấy, cùng tò mò trong bài viết này nhé.
Bạn đang xem: Scss là gì
CSS Preprocessors là ngôn từ tiền cách xử lý CSS. Nó có chức năng sẽ giúp bạn viết một cú pháp CSS ngay gần nhau cùng với một ngôn ngữ lập trình rồi compile nó ra CSS thuần.
Có tương đối nhiều CSS Preprocessor như SASS, LESS, Stylus.... Mặc dù trong khuôn khổ bài viết này, bản thân sẽ reviews bạn về SASS.
Nếu các bạn đã nghe biết Typescript - javascript Preprocessor thì tác dụng của SASS cũng như Typescript vậy đó.
Cùng mày mò xem nó thế nào nhé.
SASS là gì?SASS (Syntactically Awesome StyleSheets) là 1 trong những CSS Preprocessor giúp cho bạn viết CSS nhanh hơn với có cấu trúc rõ ràng hơn. Cùng với SASS, chúng ta có thể viết CSS theo sản phẩm công nghệ tự rõ ràng, cai quản các đổi thay đã được khái niệm sẵn, các class dùng thông thường hay có thể tự động hóa nén tập tin CSS lại nhằm bạn tiết kiệm ngân sách dung lượng.
SASS có phong cách thiết kế và viết bởi các lập trình viên Ruby. Vày vậy, Sass stylesheets sử dụng cú pháp hệt như Ruby cùng với việc không có các vệt ngoặc nhọn , dấu chấm phẩy, bài toán viết CSS vậy nên không "gần" CSS thuần cho nên việc hiểu với đọc code SASS rất nặng nề hiểu, hình dạng như này:
.title color= #fff; font-size= 50px;Sass giống như vậy cho đến khi phiên bạn dạng 3.0 được vạc hành vào tháng 5/2010, nó giới thiệu một cú pháp new được hotline 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ới CSS bằng phương pháp mang tới một cú pháp thân thiết với CSS.
Hiểu 1 cách đơn giản, SCSS là một bạn dạng nâng cung cấp của SASS giúp họ viết CSS một cách dễ ợt và dễ hiểu hơn.
Xem thêm: Giải Bài 51 Trang 46 Sgk Toán 7 Tập 2, Giải Bài 51 Trang 46
Ok, let"s gooooooooooo !!!
Quy tắc xếp ck (Nested Rule)Ví dụ mình gồm một đoạn HTML như sau
div class="container"> div class="row"> div class="navbar col-12"> a class="brand">edingsport.neta> ul class="menu"> li>a href="#">Menu 1a>li> li>a href="#">Menu 2a>li> ul> div> div>div>Giả sử các bạn chỉ ý muốn CSS cho thẻ ul với class menu, cùng với CSS thuần các bạn viết
.navbar ul.menu list-style: none;Nếu bạn liên tiếp muốn CSS mang lại thẻ li vào thẻ ul (có class là menu) thì
.navbar ul.menu li padding: 5px;Rồi các bạn lại liên tiếp muốn CSS đến thẻ a vào thẻ li... Thì cứ đề nghị viết lặp đi tái diễn tên tag (hoặc class, hoặc id) phụ vương của thẻ mong muốn css thì cực kỳ cực đề nghị không làm sao ?
Nested Rule của SASS sinh ra để giúp bạn làm cho điều bên trên một cách đơn giả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 thời điểm được đoạn SASS bên trên được compile ra CSS thuần vẫn 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ế phép tắc xếp ông chồng được sử dụng rất nhiều khi vào 1 project bao gồm viết css bằng SASS
Laravel Mix
Nếu các bạn đang thao tác làm việc với project Laravel thì chúng ta chẳng đề xuất đến ứng dụng thứ 3 nữa bởi vì Laravel đã nhập vào một pháp luật gọi là Laravel phối với không hề ít tính năng, rất có thể compile những CSS Preprocessor lịch sự CSS thuần là trong số những tính năng tốt ho của nó.Kết luậnTrên phía trên mình đã giới thiệu bạn 1 số cú pháp thường dùng làm viết CSS bởi SASS/SCSS. Vẫn còn những cú pháp khác nữa mình không kịp giới thiệu trong bài viết này, nếu bạn có nhu cầu và mong hiểu sâu về nó nữa thì gồm thể tham khảo thêm tại đây. Tuy vậy mình nghĩ nhiêu đây các bạn cũng đầy đủ chiến rồi đấy
Nếu các bạn đã đọc bài bác này đến đây rồi thì mình khuyên tình thực là đừng viết CSS "chay" nữa nhé (kể cả cùng với dev Back-end), hãy viết SASS ngay cùng luôn.
