Hướng Dẫn Sử Dụng Sass
Bạn đang xem: Hướng dẫn sử dụng sass
SASS là gì?
SASS là 1 trong những CSS Prepocessor (như LESS) giúp cho bạn viết CSS cấp tốc hơn cùng có kết cấu 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, quản lý các biến hóa đã được tư tưởng sẵn, có thể auto nén tập tin CSS lại để bạn tiết kiệm chi phí dung lượng.
Lợi ích của SASS mình cạnh tranh mà có thể nói hết ra phía trên được, nhưng lại mình hy vọng bạn sẽ hiểu rằng SASS thú vị thế nào sau khi có tác dụng quen với nó.
Nên coi trước: học CSS cơ bản toàn tập
Cài đặt SASS
Dành cho tất cả những người thích dùng lệnh
SASS là một trong ứng dụng viết bằng Ruby nên nếu bạn đã thân quen với vấn đề dùng lệnh, thì tất cả thể setup SASS cùng sử dụng những lệnh của nó. Ở serie này mình không nói qua câu hỏi này.
Tham khảo: http://sass-lang.com/install
Sử dụng phần mềm biên dịch SASS
Nếu các bạn là fan mới, nhất là đang sử dụng Windows thì nên sử dụng các ứng dụng biên dịch SASS như Compass, Koala, Prepros. Ở bài xích này bản thân sẽ sử dụng Koala (miễn phí).
Nếu các bạn dùng Mac thì có thể sử dụng CodeKit, cực kỳ hay.
Cách làm việc với SASS
Trước tiên bạn tạo thành một thư mục đựng project của mình. Trong những số đó bạn tạo ra cho bản thân tập tin style.scss. Kế tiếp bạn thiết đặt phần mềm Koala rồi mở lên, ấn vào nút dấu cộng để thêm thư mục các bạn đã tạo nên vào.
Bây giờ bạn thử mở file style.scss lên cùng copy đoạn code này vào thử, đừng lo ngại nếu các bạn chưa hiểu nó vày mình sẽ hướng dẫn sau.
.class_1 color: #f94342; font-weight: bold; padding: 15px; margin: 5px; a color: #fff; text-decoration: underline; &:hover,&:visited color: #f3f3f3; text-decoration: none;
Sau đó ấn lưu. Như vậy các lần bạn sửa với lưu file style.scss thì nó sẽ auto dịch thành style.css.
Lúc này, thư mục của bạn sẽ xuất hiện nay thêm một file .css, hãy mở nó ra và bạn nhìn nó sẽ sở hữu được đoạn code như vậy này (nên xem bằng Notepad++ hoặc những IDE xây dựng khác)
Thấy nó đẹp không nào, bây chừ hãy thử so sánh đoạn code CSS được xuất ra cùng với đoạn code viết bằng SASS sống trên đang thấy mình đã tiết kiệm được không hề ít thời gian vì viết gọn nhẹ lại.
Dùng IDE gì nhằm viết SASS?
Trước hết, mình hoàn toàn phản đối về việc viết SASS bên trên Notepad nhé :D . Bạn nên dùng một trong các IDE hỗ trợ viết SASS, bạn có thể xem danh sách IDE cung ứng SASS. Riêng mình, thì mình cần sử dụng Sublime Text 2 bao gồm cài SASS để hiển thị rất đẹp hơn.
Các code SASS thông dụng
Về tất cả các quy tắc viết code vào SASS, chúng ta cũng có thể đọc trên SASS Documentation, ở đây mình chỉ lý giải một số code phổ cập của nó.
Quy tắc xếp ông xã (Nested Rules)
Giả sử bây chừ mình gồm một đoạn HTML như sau
Trang chủ
Blog
Dịch vụ
Bây tiếng nếu bạn thích lên style cho những thẻ li với ul của .menu_container mà không tác động đến những thẻ khác cùng một số loại trên trang thì tất nhiên mình đang viết đoạn CSS áp dụng vùng chọn như sau.
.menu_container ul background: black;
.menu_container ul li color: red;
Nhìn chung, bọn họ phải viết đi 2 lần class .menu_container, khá bất tiện nếu như chúng ta viết các đoạn code vào một vùng chọn. Nhưng khi chúng ta viết bằng SASS thì chỉ việc viết như sau:
Dĩ nhiên, khi xuất ra file .css thì code như ảnh sẽ xuất ra thành code thuần CSS như sinh sống trên.
Ngoài ra, chúng ta có thể thực hiện câu hỏi nối một thành phần người mẹ (có cấp cao hơn nó 1 bậc) bằng phương pháp thêm dấu và vào trước từng phần tử. Giả sử, bạn thích thêm style mang lại thuộc tính :hover của một đoạn liên kết trong menu thì mình sẽ viết như sau nghỉ ngơi SASS.
Và đó là code sau khi nó xuất ra thành định hình .css
Nghĩa là khi chúng ta thêm dấu & ngơi nghỉ đằng trước một trong những phần tử con nào, thì nó sẽ mang toàn bộ vùng lựa chọn của một trong những phần tử mẹ đứng trước nó một bậc. Rất hữu ích để làm việc với vùng lựa chọn Pseudo của CSS.
Sử dụng biến (Varibles) – $tên-biến
Giờ phía trên viết CSS bạn cũng có thể được thực hiện biến với SASS rồi nhé :D . Biến đổi là giải pháp mà chúng ta cũng có thể khai báo một quý hiếm nào kia mà họ đã xác minh được sẽ sử dụng nó nhiều lần, chẳng hạn như các mã màu, quý giá border, shadows,….
Xem thêm: Cách Giới Hạn Băng Thông Modem Viettel ? Giới Hạn Băng Thông Modem Viettel
Để khai báo một biến, bọn họ sẽ viết dấu $ đằng trước tên biến như thế này.
$primary_shadow: 5px 5px 5px #000000;
Sau đó họ sẽ thực hiện biến vào code bằng cách viết như sau, ví dụ như mình lấy quý giá của trở thành $primary_shadow bỏ vô thẻ text-shadow nhé.
h1.post_title text-shadow: $primary_shadow
Dĩ nhiên, về sau bạn có gặp bất kể gặp bất kỳ cái gì mà muốn cho nó thuộc tính text-shadow giống như cái mà bạn đã định sẵn thì chỉ việc chèn text-shadow: $primary_shadow vào đó.
Nhưng chúng ta nên lưu ý, nghỉ ngơi biến bọn họ chỉ có thể xác định giá tốt trị (value) mà sẽ không được dùng các thẻ ở trong tính vào bên phía trong nó. Còn nếu bạn muốn khai báo nhanh các thuộc tính vào trong 1 thành phần thì rất có thể sử dụng luật lệ mixin.
Quy tắc Mixin –
mixin tên_mix
Mixin là 1 trong cơ chế khá thông dụng trong SASS mà nếu khách hàng biết cách vận dụng thì vẫn rất bổ ích khi viết CSS. Tính năng của nó là mang những thuộc tính mà bạn đã quy mong trong một mix nào đó bỏ vào một trong những thành phần ngẫu nhiên mà không nhất thiết phải viết lại các thuộc tính đó. Ví dụ, thường khi thực hiện thuộc tính float trong CSS thì bọn họ phải khai báo luôn margin như thế này
.class_1
float: left;
margin: 0px 10px;
Bây giờ các bạn có không ít thành phần mà đề xuất float trong HTML thì viết lại 2 loại kia hoài cũng chán. Hiện nay để nhanh, bọn họ sẽ thực hiện cơ chế mixin trong SASS để xử lý nó. Trước hết, mình sẽ tạo một mixin thương hiệu là float-left như sau.
mixin float-left
float: left;
margin: 0px 10px;
Sau đó, mình thích cho một thành phần như thế nào đó có thuộc tính float: left với margin như thế kia thì chỉ cần viết như sau. (
include float-left;}
Nhưng bây giờ, bạn không thích sử dụng float: left mà là float:right thì sao? chẳng lẽ lại tạo nên thêm một mixin nữa sao? không cần, bạn cũng có thể đặt thêm tham số cho loại mixin cơ để bạn có thể thay thay đổi nó tùy vào thời điểm. Mình xin sửa lại code mixin như sau
mixin float-left($float,$margin)
float: $float;
margin: $margin;
Và lúc đi include, chúng ta sẽ viết như sau
.class_1
include float-left(right,5px 10px)
Cái này nếu khách hàng đã học qua quan niệm function vào PHP thì đọc ngay ấy mà. :*
Extends – thừa kế
extend tên_class
Đây là 1 trong những tính năng quan tiền trọng mà bạn cần hiểu càng nhanh càng xuất sắc vì sau này các bạn sẽ dùng hết sức nhiều, độc nhất vô nhị là vào khi thao tác làm việc với một CSS Framework. Tính năng kế thừa này nghĩa là các bạn chỉ định cho một thành phần nào kia thừa hưởng toàn bộ các nằm trong tính của một class (hoặc vùng lựa chọn nào đó) bất kỳ mà bạn đã khai báo sẵn.
Ví dụ bây giờ mình gồm code tạo nên button nhiều năm loằng ngoằng như sau.
.button_1 -moz-box-shadow:inset 0px 1px 0px 0px #ffffff; -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff; box-shadow:inset 0px 1px 0px 0px #ffffff; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) ); background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ededed’, endColorstr=’#dfdfdf’); background-color:#ededed; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; border:1px solid #dcdcdc; display:inline-block; color:#777777; font-family:arial; font-size:15px; font-weight:bold; padding:6px 24px; text-decoration:none; text-shadow:1px 1px 0px #ffffff;
Giả sử, bây giờ minh mong muốn cho một class nào đổi mới một button giống trên thì sao? Như hay lệ, họ sẽ thực hiện viết thêm 1 class phong cách như .button_1,.class_1. Nhưng như thế sẽ khá vấn đề vì mình cần tiến hành đi tìm lại phần này cùng viết vào, hoặc đã mở code HTML ra cùng viết thêm một class mang đến nó, cơ mà cũng chẳng hơi hơn. Mà lại ở SASS, mình sẽ rất có thể làm nhanh gọn lẹ lẹ chỉ với duy tốt nhất vài chiếc ngắn ngủi nạm này.
.button_2
extend .button_1;
Đấy, giờ đồng hồ thì thằng .button_2 đang thành một nút bấm giống hệt như .button_1 rồi. Chúng ta sợ file CSS đang nặng ra á? Lầm rồi, đây là code CSS xuất ra khi áp dụng cơ chế extend của SASS.
.button_1, .button_2 -moz-box-shadow: inset 0px 1px 0px 0px #ffffff; -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff; box-shadow: inset 0px 1px 0px 0px #ffffff; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf)); background: -moz-linear-gradient(center top, #ededed 5%, #dfdfdf 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ededed’, endColorstr=’#dfdfdf’); background-color: #ededed; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; border: 1px solid #dcdcdc; display: inline-block; color: #777777; font-family: arial; font-size: 15px; font-weight: bold; padding: 6px 24px; text-decoration: none; text-shadow: 1px 1px 0px #ffffff;
Hãy bắt buộc nhớ rằng, cho dù bạn sử dụng
extend ở bất cứ đâu miễn là trong và một file, thì nó sẽ auto gom lại cùng nhét vào một trong những dòng duy nhất. Ví dụ như vậy này
.button_1 -moz-box-shadow: inset 0px 1px 0px 0px #ffffff; -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff; box-shadow: inset 0px 1px 0px 0px #ffffff; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf)); background: -moz-linear-gradient(center top, #ededed 5%, #dfdfdf 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ededed’, endColorstr=’#dfdfdf’); background-color: #ededed; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; border: 1px solid #dcdcdc; display: inline-block; color: #777777; font-family: arial; font-size: 15px; font-weight: bold; padding: 6px 24px; text-decoration: none; text-shadow: 1px 1px 0px #ffffff;
.button_2
extend .button_1;
Sau lúc xuất ra nó sẽ như vậy này
Hãy bắt buộc nhớ kỹ 1 điều, nếu bạn làm việc trên CSS Framework thì nên vận dụng extend vào, chớ nhưng mà viết thêm class vào code HTML để nhìn đỡ bựa. :what:
Bạn rất có thể cho nó extend nhiều class bằng phương pháp viết nhiều đoạn extend do extend không được cho phép bạn thực hiện trên các class. :sogood:
Nhưng hãy thử để một trường thích hợp sau, nếu mẫu .button_1 ngơi nghỉ trên không được sử dụng thì dĩ nhiên, nó vẫn được render ra bên ngoài file .css, đang không xuất sắc vì có thể sau này bạn có rất nhiều class thừa thì nó đã phình to ra. Vậy tất cả cách nào vẫn để nó ở kia nhưng sẽ không được xuất ra file .css mà lại nó chỉ xuất ra khi được extend không? có đấy, bọn họ sẽ sử dụng vùng chọn %name (giống như .name mang đến class với #name mang đến ID của CSS)
Vùng chọn %name
Vùng chọn %name nó cũng như .name cùng #name vào CSS, chỉ gồm điều khi bạn khai báo một class %name thì nó sẽ không xuất ra file CSS nhưng chỉ xuất ra khi chúng ta tiến hành extend nó. Chúng ta viết test đoạn này vào file SASS
%fuck_you
color: #red;
margin: 5px 10px;
Sau kia thử save lại, nó sẽ không thể được xuất ra. Tuy vậy nếu bây chừ bạn tiến hành extend nó cho 1 class nào kia thì nó sẽ được xuất ra.
.fuck_me
extend %fuck_you; Hai đứa fu*k nhau thì thứ hạng gì chả xuất, nhể? Xin lỗi, mình không còn biết để class cố gắng nào để test rồi. :sexy:
Các mệnh đề đk trong SASS
CSS cũng có các mệnh đề chứ không chơi đâu nhé :D . Vào SASS có nhiều mệnh đề điều kiện khác nhau, nhưng tại chỗ này mình chỉ nói tới mệnh đề IF thôi vì chưng nó thông dụng với dễ hiểu. Còn những điều kiện như FOR, EACH, WHILE thì chúng ta cũng có thể tham khảo tại đây.
Điều khiếu nại IFĐiều khiếu nại IF được dùng để làm kiểm tra một quý hiếm của một đổi thay nào kia trong SASS bằng những lệnh toán tử (như bao ngôn ngữ lập trình khác). Hãy ghi nhớ rằng điều kiện IF chỉ rất có thể sử dụng để chất vấn giá trị của một biến. Cái này các bạn sẽ gặp nhiều khi sử dụng các CSS Framework rộng là phổ thông.
Bây giờ, hãy để giả thuyết rằng bởi một lý do nào đó, chúng ta không mong mỏi xuất một quãng SASS nào đó ra CSS nhưng sẽ không cần xóa nó, và về sau nếu muốn bạn cũng có thể dễ dàng bật nó lên. Hiện thời mình sẽ triển khai tạo một trở thành để control như thế này.
$turn: no;
Sau đó, mình sẽ viết điều kiện IF như sau.
if $turn == yes .button_1 background-color: #ededed; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; border: 1px solid #dcdcdc; display: inline-block; color: #777777; font-family: arial; font-size: 15px; font-weight: bold; padding: 6px 24px; text-decoration: none; text-shadow: 1px 1px 0px #ffffff;
Đoạn này tức là nếu trở nên $turn có mức giá trị bằng yes thì nó đã xuất các đoạn CSS của thẻ .button_1 ra, còn giả dụ giá trị nhưng khác yes thì đã không làm cái gi cả. Các bạn thử save lại sẽ không thấy nó xuất đồ vật gi ra cả, dẫu vậy nếu thay đổi $turn: yes; thì nó đang xuất cho chính mình xem.
Bạn vẫn có thể sử dụng
else
.button_1_extra color: blue;
Đoạn này có nghĩa là nếu quý giá mà chưa phải là yes thì nó vẫn xuất đoạn CSS của .button_1_extra ra CSS.
Lời kết
Tới phía trên thì mình nghĩ chúng ta đã vậy được cơ bạn dạng SASS rồi, và thực ra SASS cũng chỉ bao gồm vậy cùng thêm các lệnh code không giống nữa mà chúng ta có thể bài viết liên quan ở phần documentation của nó. Một lần nữa, nếu bạn đã sở hữu kinh nghiệm áp dụng CSS rồi thì bản thân khuyên các bạn nên ứng dụng SASS vào vấn đề viết code ngay vì:
Sẽ dễ ợt để quản lý và sửa đổi sau này.Code CSS được xuất ra theo quy chuẩn, đẹp, bạn khác dễ dàng đọc.Dễ dàng nén lại thành format minify nhằm tăng tốc website, điều này mình sẽ trả lời ở bài xích sau.Dễ thao tác làm việc với các CSS Framework.Dễ dàng phát triển một Framework riêng đến chính bản thân mình để tiện sử dụng.Ngay bài xích sau bài xích này, mình sẽ chia sẽ cho chúng ta một số kinh nghiệm với thủ thuật thực hiện SASS để rất có thể làm việc tác dụng hơn, vì bài xích này tới đấy là khá dài rồi. :bye:
Do mình đã làm việc với SASS một thời gian vài tháng rồi nên ít nhiều gì cũng có thể hỗ trợ các bạn tốt, bởi vì vậy hãy đặt câu hỏi nào mà chúng ta đang vướng mắc ở phần bình luận và mình sẽ giải đáp thêm vào cho riêng bạn.
