Hướng Dẫn Học Sass

lúc viết CSS Theo phong cách thông thường, hoàn toàn có thể các bạn đã ngao ngán các làm việc lặp đi tái diễn cực kỳ nhạt nhẽo, và bạn muốn tất cả một chiếc nào đấy cung cấp bạn thao tác làm việc cùng với CSS chuyên nghiệp hóa rộng. Nếu như bạn muốn chuyển kỹ năng CSS của chính mình lên một khoảng cao mới, thao tác bài bản thì hiện tượng thứ nhất bạn cần thực hiện là SASS.

Bạn đang xem: Hướng dẫn học sass

SASS là gì?

SASS là 1 trong những CSS Prepocessor (như LESS) giúp đỡ bạn viết CSS nhanh hao hơn cùng có cấu trúc ví dụ hơn. Với SASS, chúng ta có thể viết CSS theo sản phẩm công nghệ trường đoản cú cụ thể, cai quản những biến đã được có mang sẵn, có thể tự động hóa nén tập tin CSS lại nhằm chúng ta tiết kiệm ngân sách dung lượng.

Lợi ích của SASS mình khó cơ mà có thể nói rằng hết ra đây được, nhưng lại mình mong muốn các bạn sẽ hiểu rõ rằng SASS độc đáo ra sao sau thời điểm có tác dụng thân quen với nó.

Nên xem trước: Học CSS cơ bản toàn tập


Cài đặt SASS

Dành cho người ưa thích cần sử dụng lệnh

SASS là một vận dụng viết bởi Ruby đề nghị nếu khách hàng vẫn quen với bài toán cần sử dụng lệnh, thì hoàn toàn có thể thiết đặt SASS với sử dụng các lệnh của chính nó. Ở serie này mình không mô tả Việc này.

Tsay mê khảo: http://sass-lang.com/install

Sử dụng ứng dụng biên dịch SASS

Nếu các bạn là người bắt đầu, đặc biệt là đang sử dụng Windows thì hãy thực hiện những phần mềm biên dịch SASS nhỏng Compass, Koala, Prepros. Tại bài xích này mình đang thực hiện Koala (miễn phí).

Nếu bạn sử dụng Mac thì hoàn toàn có thể sử dụng CodeKit, rất thú vị.


Cách thao tác cùng với SASS

Trước hết bạn tạo ra một thỏng mục chứa project của bản thân. Trong số đó bạn tạo ra cho khách hàng tập tin style.scss. Sau kia bạn thiết đặt phần mềm Koala rồi msống lên, ấn vào nút lốt cộng nhằm thêm thư mục chúng ta sẽ chế tác vào.

*
Sau kia chúng ta tùy chỉnh thiết lập tệp tin mà nó vẫn xuất ra bằng cách ấn loài chuột phải vào tệp tin style.scss và chọn Set Output đầu ra Path, ở chỗ này bạn sẽ viết tên tệp tin đến nó xuất ra thành CSS. Ở đây mình đánh tên xuất ra là style.css.

*

Bây giờ các bạn thử mlàm việc tệp tin style.scss lên cùng copy đoạn code này vào demo, chớ lo ngại nếu như khách hàng chưa hiểu nó vày bản thân đang chỉ 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 giữ. vì thế những lần chúng ta sửa cùng lưu file style.scss thì nó đang tự động dịch thành style.css.

Hiện giờ, thư mục của bạn sẽ mở ra thêm 1 file .css, hãy msinh sống nó ra với bạn quan sát nó sẽ sở hữu đoạn code như thế này (phải coi bằng Notepad++ hoặc những IDE thiết kế khác)

*

Thấy nó đẹp chưa nhỉ, bây giờ hãy thử so sánh đoạn code CSS được xuất ra cùng với đoạn code viết bởi SASS nghỉ ngơi trên sẽ thấy tôi đã tiết kiệm ngân sách và chi phí được không ít thời gian vị viết ngắn gọn lại.

Dùng IDE gì để viết SASS?

Trước hết, bản thân trọn vẹn phản nghịch đối về việc viết SASS bên trên Notepad nhé :D . quý khách cần cần sử dụng một trong số IDE cung cấp viết SASS, bạn có thể xem danh sách IDE cung cấp SASS. Riêng mình, thì bản thân sử dụng Sublime Text 2 có download SASS nhằm hiển thị đẹp hơn.

Các code SASS thông dụng

Về tất cả các luật lệ viết code trong SASS, bạn cũng có thể phát âm tại SASS Documentation, tại đây mình chỉ lý giải một vài code thông dụng của nó.

Quy tắc xếp ck (Nested Rules)

Giả sử bây giờ mình có một đoạn HTML nhỏng sau


Trang chủ

Blog

Dịch vụ


Bây giờ trường hợp mình muốn lên style cho các thẻ li với ul của .menu_container nhưng ko tác động cho các thẻ khác thuộc một số loại bên trên trang thì tất yếu mình sẽ viết đoạn CSS thực hiện vùng lựa chọn nlỗi sau.

.menu_container ul background: black;

.menu_container ul li color: red;

Nhìn tầm thường, bọn họ đề nghị viết đi gấp đôi class .menu_container, khá bất tiện nếu như bạn viết các đoạn code vào một vùng chọn. Nhưng khi bạn viết bởi SASS thì chỉ cần viết như sau:

*

Dĩ nhiên, Khi xuất ra tệp tin .css thì code nhỏng ảnh đang xuất ra thành code thuần CSS nhỏng sinh sống bên trên.

Bên cạnh đó, chúng ta cũng có thể triển khai vấn đề nối một yếu tắc chị em (bao gồm cấp cao hơn nó 1 bậc) bằng cách thêm vết và vào trước từng thành phần. Giả sử, bạn thích thêm style đến nằm trong tính :hover của một quãng links trong menu thì mình đang viết như sau ở SASS.

*

Và đó là code sau khoản thời gian nó xuất ra thành format .css

*

Nghĩa là khi chúng ta thêm dấu & ở đằng trước một phần tử nhỏ nào, thì nó đang mang toàn cục vùng lựa chọn của 1 phần tử bà mẹ đứng trước nó một bậc. Rất hữu ích để gia công việc với vùng chọn Pseuvày của CSS.

Sử dụng phát triển thành (Varibles) – $tên-biến

Giờ trên đây viết CSS bạn cũng có thể được sử dụng thay đổi với SASS rồi nhé :D . Biến là giải pháp cơ mà chúng ta cũng có thể knhì báo một giá trị làm sao đó mà họ đang xác minh được đang dùng nó nhiều lần, chẳng hạn như những mã color, quý hiếm border, shadows,….

Xem thêm: Học Châm Cứu Bấm Huyệt Ở Tphcm 2017, Địa Chỉ Châm Cứu Bấm Huyệt Ở Đâu Tốt Tphcm

Để knhì báo một phát triển thành, chúng ta đã viết vệt $ đằng trước tên đổi mới như thế này.

$primary_shadow: 5px 5px 5px #000000;

Sau kia bọn họ đã sử dụng biến đổi trong code bằng phương pháp viết như sau, chẳng hạn như mình mang quý giá của vươn lên là $primary_shadow cho vô thẻ text-shadow nhé.

h1.post_title text-shadow: $primary_shadow

Dĩ nhiên, sau này chúng ta có gặp mặt bất cứ gặp gỡ bất kỳ đồ vật gi mà mong mỏi đến nó ở trong tính text-shadow giống như chiếc mà lại các bạn đang định sẵn thì chỉ việc cnhát text-shadow: $primary_shadow vào kia.

Nhưng chúng ta nên để ý, sinh sống trở nên chúng ta chỉ rất có thể xác định được giá trị (value) nhưng mà sẽ không được sử dụng các thẻ thuộc tính vào phía bên trong nó. Còn nếu bạn muốn knhị báo nhanh khô các trực thuộc tính vào trong 1 thành phần thì hoàn toàn có thể áp dụng phép tắc mixin.

Quy tắc Mixin –
mixin tên_mix

Mixin là 1 chế độ hơi thông dụng trong SASS mà nếu như bạn biết phương pháp vận dụng thì sẽ tương đối hữu dụng lúc viết CSS. Công dụng của nó là sở hữu các nằm trong tính nhưng mà bạn vẫn quy ước vào một phối như thế nào đó quăng quật vào một nguyên tố ngẫu nhiên cơ mà không nhất thiết phải viết lại những thuộc tính kia. ví dụ như, thường xuyên lúc áp dụng nằm trong tính float vào CSS thì bọn họ buộc phải knhì báo luôn luôn margin như thế này

.class_1

float: left;

margin: 0px 10px;

Bây giờ đồng hồ chúng ta tất cả không ít yếu tố mà lại đề xuất float trong HTML thì viết lại 2 loại kia hoài cũng chán. Bây giờ nhằm nhanh khô, chúng ta đang sử dụng phương pháp mixin trong SASS nhằm xử lý nó. Trước hết, bản thân sẽ khởi tạo một mixin thương hiệu là float-left như sau.


mixin float-left

float: left;

margin: 0px 10px;

Sau kia, mình thích cho một thành phần làm sao đó bao gồm trực thuộc tính float: left cùng margin như thế kia thì chỉ việc viết nlỗi sau. (
include float-left;}

Nhưng hiện nay, chúng ta không muốn thực hiện float: left cơ mà là float:right thì sao? Không lẽ lại tạo ra thêm 1 mixin nữa sao? Không phải, chúng ta có thể đặt thêm tđê mê số mang đến cái mixin cơ nhằm chúng ta có thể thay đổi nó tùy thuộc vào thời gian. Mình xin sửa lại code mixin nhỏng sau


mixin float-left($float,$margin)

float: $float;

margin: $margin;

Và Lúc đi include, bọn họ đã viết như sau

.class_1


include float-left(right,5px 10px)

Cái này nếu như khách hàng đang học qua tư tưởng function vào PHP. thì phát âm ngay ấy mà. :*

Extends – Kế quá
extover tên_class

Đây là một công dụng quan liêu trọng nhưng bạn phải hiểu càng sớm càng tốt bởi vì sau đây các bạn sẽ cần sử dụng rất nhiều, tốt nhất là trong lúc thao tác làm việc với cùng 1 CSS Framework. Tính năng kế thừa này nghĩa là chúng ta chỉ định và hướng dẫn cho một nguyên tố làm sao đó thừa hưởng toàn bộ những thuộc tính của một class (hoặc vùng lựa chọn như thế nào đó) ngẫu nhiên cơ mà chúng ta sẽ knhị báo sẵn.

lấy ví dụ bây giờ mình tất cả code chế tạo ra button dài loằng ngoằng nhỏng sau.

.button_1 -moz-box-shadow:inphối 0px 1px 0px 0px #ffffff; -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff; box-shadow:inmix 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:DXImageTranskhung.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ờ minc hy vọng cho một class nào biến chuyển một button tương đương bên trên thì sao? Như thường lệ, họ sẽ tiến hành viết thêm 1 class hình dạng như .button_1,.class_1. Nhưng như vậy sẽ tương đối rắc rối vị bản thân nên tiến hành đi tìm lại phần này và viết vào, hoặc đang mlàm việc code HTML ra cùng viết thêm một class mang đến nó, nhưng cũng chẳng khá hơn. Nhưng sinh hoạt SASS, mình sẽ hoàn toàn có thể có tác dụng nkhô cứng nhanh gọn chỉ cách tuyệt nhất vài ba dòng nlắp ngủi ráng này.

.button_2
extend .button_1;

Đấy, giờ thì thằng .button_2 vẫn thành một nút ít bnóng y như .button_1 rồi. Bạn sợ hãi file CSS đang nặng ra á? Lầm rồi, đây là code CSS xuất ra Khi thực hiện nguyên lý extkết thúc của SASS.

.button_1, .button_2 -moz-box-shadow: inphối 0px 1px 0px 0px #ffffff; -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff; box-shadow: inphối 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:DXImageTranssize.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 buộc phải hãy nhớ là, dù các bạn thực hiện
extend sống bất cứ đâu miễn sao trong và một file, thì nó đã auto tụ lại cùng nhét vào trong 1 cái tuyệt nhất. ví dụ như như thế này

.button_1 -moz-box-shadow: inset 0px 1px 0px 0px #ffffff; -webkit-box-shadow: inphối 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:DXImageTranssize.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
extkết thúc .button_1;

Sau khi xuất ra nó đang như thế này

*

Hãy buộc phải nhớ kỹ một điểm, nếu khách hàng thao tác làm việc bên trên CSS Framework thì cần áp dụng extkết thúc vào, chớ nhưng mà viết thêm class vào code HTML để xem đỡ bần. :what:

quý khách có thể đến nó extover những class bằng phương pháp viết nhiều đoạn extkết thúc vày extkết thúc không chất nhận được các bạn tiến hành trên nhiều class. :sogood:

Nhưng hãy thử đặt một trường hòa hợp sau, nếu như cái .button_1 làm việc bên trên ko được sử dụng thì tất nhiên, nó vẫn được render ra ngoài tệp tin .css, sẽ không còn tốt vì có thể trong tương lai bạn có vô số class vượt thì nó sẽ phình to lớn ra. Vậy bao gồm bí quyết như thế nào vẫn để nó ngơi nghỉ đó tuy nhiên sẽ không còn được xuất ra file .css nhưng mà nó chỉ xuất ra Lúc được extend không? Có đấy, bọn họ đang sử dụng vùng chọn %name (hệt như .name đến class và #name mang đến ID của CSS)

Vùng lựa chọn %name

Vùng lựa chọn %name nó cũng tương tự .name và #name vào CSS, chỉ tất cả điều khi bạn knhị báo một class %name thì nó sẽ không xuất ra file CSS mà lại chỉ xuất ra khi chúng ta triển khai extover nó. quý khách viết demo đoạn này vào tệp tin SASS

%fuck_you

color: #red;

margin: 5px 10px;

Sau đó test save sầu lại, nó vẫn không còn được xuất ra. Nhưng trường hợp hiện nay bạn tiến hành extover nó cho 1 class như thế nào đó thì nó sẽ tiến hành xuất ra.

.fuck_me
extover %fuck_you; Hai đứa fu*k nhau thì giao diện gì chả xuất, nhể? Xin lỗi, bản thân không còn biết đặt class nắm như thế nào nhằm chạy thử rồi. :sexy:

Các mệnh đề điều kiện trong SASS

CSS cũng đều có những mệnh đề chứ không nghịch đâu nhé :D . Trong SASS có khá nhiều mệnh đề điều kiện khác nhau, nhưng lại ở đây mình chỉ đề cập đến mệnh đề IF thôi do nó thịnh hành cùng dễ hiểu. Còn những điều kiện nhỏng FOR, EACH, WHILE thì chúng ta có thể tham khảo tại phía trên.

Điều kiện IF

Điều khiếu nại IF được dùng để khám nghiệm một giá trị của một đổi thay làm sao đó trong SASS bởi những lệnh toán tử (nrách bao ngôn ngữ lập trình sẵn khác). Hãy đừng quên điều kiện IF chỉ hoàn toàn có thể áp dụng nhằm kiểm soát giá trị của một trở nên. Cái này các bạn sẽ gặp gỡ đôi lúc áp dụng những CSS Framework hơn là phổ quát.

Bây tiếng, hãy đặt giả tngày tiết rằng vì chưng một nguyên nhân như thế nào đó, họ không muốn xuất một quãng SASS làm sao đó ra CSS tuy thế sẽ không còn đề xuất xóa nó, cùng sau này nếu muốn bạn có thể dễ ợt bật nó lên. Bây tiếng mình vẫn triển khai chế tác một biến chuyển nhằm control như vậy này.

$turn: no;

Sau đó, bản thân đã viết ĐK IF nlỗi 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 như vươn lên là $turn có mức giá trị bằng yes thì nó sẽ xuất các đoạn CSS của thẻ .button_1 ra, còn giả dụ cực hiếm mà khác yes thì sẽ không làm cái gi cả. quý khách hàng demo save sầu lại sẽ không thấy nó xuất đồ vật gi ra cả, tuy vậy nếu đổi $turn: yes; thì nó đang xuất cho mình xem.

Quý khách hàng vẫn có thể sử dụng
else

.button_1_extra color: blue;

Đoạn này có nghĩa là trường hợp cực hiếm nhưng không phải là yes thì nó đã xuất đoạn CSS của .button_1_extra ra CSS.

Lời kết

Tới phía trên thì bản thân nghĩ các bạn sẽ thế được cơ bạn dạng SASS rồi, và thực tế SASS cũng chỉ bao gồm vậy với thêm nhiều lệnh code không giống nữa mà bạn cũng có thể tìm hiểu thêm ở phần documentation của nó. Một lần nữa, ví như bạn đã có tay nghề áp dụng CSS rồi thì bản thân khulặng bạn nên vận dụng SASS vào câu hỏi viết code ngay vì:

Sẽ thuận lợi nhằm thống trị với chỉnh sửa sau này.Code CSS được xuất ra theo quy chuẩn chỉnh, đẹp nhất, bạn không giống đọc dễ dàng.Dễ dàng nén lại thành định hình minify để tăng tốc website, đặc điểm này mình vẫn lý giải sinh hoạt bài sau.Dễ làm việc cùng với các CSS Framework.Dễ dàng cách tân và phát triển một Framework riêng rẽ cho thiết yếu bạn dạng thân bản thân nhằm tiện áp dụng.

Ngay bài bác sau bài này, bản thân vẫn chia đã mang lại các bạn một số kinh nghiệm với thủ pháp sử dụng SASS để có thể thao tác làm việc công dụng hơn, vày bài xích này tới đó là hơi nhiều năm rồi. :bye:

Do tôi đã thao tác cùng với SASS một thời gian vài tháng rồi đề xuất rất nhiều gì rồi cũng có thể cung ứng các bạn xuất sắc, vày vậy hãy đặt câu hỏi như thế nào nhưng ai đang vướng mắc tại vị trí phản hồi cùng mình đã đáp án thêm vào cho riêng biệt chúng ta.