[MUSIC]
Bài học đặc biệt này đề cập đến các preprocessor CSS,
đặc biệt là Less và Sass.
Bây giờ rõ ràng, các chủ đề này có nhiều hơn để làm với CSS và
xác định các lớp CSS, nhưng nó sẽ là không phù hợp cho
tôi để hoàn thành một khóa học Bootstrap mà không
đào sâu một chút vào các preprocessor CSS.
Đơn giản chỉ vì Bootstrap được xây dựng bằng cách sử dụng Sass cho nguồn của nó.
Vì vậy, chúng tôi sẽ kiểm tra ngắn gọn CSS preprocessor,
những gì họ đang có,
làm thế nào họ hữu ích trong việc xác định các lớp CSS, và tại sao Bootstrap sử dụng chúng.
Như bạn có thể hiểu từ kinh nghiệm trước đây của bạn với CSS,
CSS là tuyệt vời để xác định phong cách và
liên tục áp dụng các phong cách này cho các phần tử HTML khác nhau.
Và đó là cách chúng tôi sử dụng CSS khi chúng tôi xác định các trang web của chúng tôi.
Nhưng khi bạn nhìn vào mã CSS chính nó,
bạn bắt đầu nhanh chóng nhận ra những hạn chế của CSS.
Đặc biệt là nếu bạn đang đến từ một nền lập trình, bạn nhận ra rằng
CSS không có những gì bạn thường mong đợi trong một ngôn ngữ lập trình, như biến,
lồng của bộ chọn, biến, biểu thức và hàm.
Điều này có nghĩa rằng việc viết mã CSS trở nên cồng kềnh, và
việc duy trì mã CSS trở nên cồng kềnh vì
thiếu cú pháp giống như ngôn ngữ lập trình truyền thống.
Bây giờ, đây là nơi mà các preprocessor CSS đến để giải cứu chúng tôi.
Có một số preprocessor CSS phổ biến cố gắng giải quyết một
số thiếu sót của CSS bằng cách hỗ trợ nhiều tính năng này.
Hai đặc biệt đó là quan tâm đến chúng tôi là Less và Sass.
Chúng ta sẽ xem xét hai chi tiết hơn trong bài học này.
Bây giờ, khi bạn xác định các lớp CSS
của bạn bằng cách sử dụng một trong những ngôn ngữ preprocessor như Less hoặc
Sass, sau đó họ cuối cùng phải được chuyển đổi thành CSS,
nhưng điều này có thể được thực hiện tự động trước khi CSS được sử dụng trong trang web của bạn.
Những gì các ngôn ngữ tiền xử lý mang lại cho chúng ta là
cú pháp giống như ngôn ngữ lập trình hơn, như chúng ta sẽ thấy trong vài slide tiếp theo.
Chúng ta sẽ kiểm tra Less và Sass một thời gian ngắn.
Đặc biệt, lý do để chúng ta có một cái nhìn vào điều này là bởi vì Bootstrap tự
sử dụng Sass để xác định nguồn của nó cho các lớp CSS của nó.
Và vì vậy nếu bạn đi vào tùy chỉnh Bootstrap,
sau đó bạn sẽ phải làm việc với mã Sass.
Bootstrap 3, đó là phiên bản trước của Bootstrap, sử dụng Less,
và do đó, tôi nghĩ rằng nó sẽ là một điều thích hợp để bao gồm cả Less và
Sass, bởi vì họ là khá nhiều tương tự nhau
về khả năng của họ và cách cú pháp được định nghĩa.
Các tính năng điển hình mà bộ xử lý tiền xử lý CSS mang lại là sự hỗ trợ cho các
biến, bộ chọn làm tổ, biểu thức, hàm và mixins.
Vì vậy, chúng ta sẽ xem xét một số trong số này với một số ví dụ trong vài slide tiếp theo.
Điều đầu tiên mà chúng ta sẽ xem xét là các biến.
Bây giờ trong nhiều lớp CSS mà bạn xác định,
bạn có thể có một số sử dụng lặp đi lặp lại của số lượng nhất định.
Nó có thể là đáng giá hơn nếu bạn xác định một số biến
giữ các số lượng này và sử dụng các biến này trong việc xác định các lớp CSS của bạn.
Vì vậy, đó là nơi các biến số đến để giải cứu bạn.
Ở đây, chúng ta sẽ xem xét cả mã Less và Scss.
Scss là một phiên bản của Sass,
phiên bản phổ biến hơn của cú pháp Sass, vì vậy đó là lý do tại sao tôi tập trung vào Scss ở đây.
Vì vậy, nếu bạn xác định
các biến trong Less, bạn sẽ tiến hành tên của biến với một dấu @.
Trong trường hợp của Scss, bạn sẽ sử dụng một dấu đô la trước tên biến.
Và một khi bạn xác định các biến đó,
sau đó bạn có thể sử dụng các biến đó khi bạn xác định các class.
Như bạn thấy trong ví dụ, nơi chúng ta xác định nghịch đảo navbar-nền,
hoặc chiều cao của băng chuyền mục như các biến.
Bây giờ, lợi thế của việc xác định các biến ở đầu lớp CSS của bạn
là có một điểm duy nhất mà bạn có thể cập nhật một giá trị, và
nó sẽ tự động cập nhật tất cả các lớp CSS sử dụng biến này.
Thông thường là cách chúng ta sử dụng các biến trong các ngôn ngữ lập trình. Các
biến trong các ngôn ngữ preprocessor CSS cũng có thể có phạm vi riêng của chúng.
Rất thường xuyên khi bạn định nghĩa các lớp CSS, đặc biệt là khi bạn
phải định nghĩa các lớp được lồng nhau bên trong các lớp khác,
sau đó, khá sớm mã CSS của bạn trở nên rất cồng kềnh.
Vì vậy, đây là nơi làm tổ được hỗ trợ bởi các preprocessor CSS của bạn.
Vì vậy, như bạn có thể thấy, bạn có thể xác định ví dụ, một lớp băng chuyền, và
bên trong một lớp băng chuyền, bạn có thể xác định một lớp mục băng chuyền.
Và tương tự, lớp con hình ảnh bên trong lớp mục carousel.
Vì vậy, ở đây bạn có thể thấy rằng mỗi trong số này được lồng nhau bên trong một lớp trước.
Với các biến, bạn có thể giữ một giá trị tại một thời điểm trong một biến.
Giả sử bạn có một nhóm các biến tổng hợp lại với nhau
tuyên bố một tập hợp các khai báo CSS, đó là nơi chúng ta sử dụng mixins.
Trong Less bạn định nghĩa một mixin bằng cách đặt tên cho nó,
và trong Sass bạn chỉ đơn giản là đứng trước đó với một @mixin ở
phía trước tên của khai báo mixin.
Và bên trong một mixin, bạn có thể xác định một loạt các khai báo CSS mà
sau đó có thể được tái sử dụng cho các lớp CSS khác nhau.
Như bạn thấy trong ví dụ này ở đây, chúng ta định nghĩa lề bằng không
là mixin, cả trong Less và Sass.
Lưu ý các biến thể nhỏ trong cú pháp trong mỗi trường hợp đó.
Và sau đó, bạn có thể sử dụng mixin này trong việc xác định các lớp CSS bổ sung.
Vì vậy, ở đây bạn có thể thấy rằng đối với tiêu đề hàng, chúng ta định nghĩa lề zero là
một mixin trong tiêu đề hàng, có nghĩa là tất cả
các thuộc tính từ lề zero sẽ được kế thừa bởi lớp tiêu đề hàng đó.
Mixins tự có thể đưa vào các thông số bổ sung nếu bạn muốn xác định chúng.
Vì vậy, trong trường hợp này, tôi đang xác định
một biến thể của mixin lề zero mà chúng ta đã thấy trong slide trước đó.
Ở đây, mixin lề zero này mất hai tham số,
pad lên xuống và pad trái phải.
Và với Less, bạn thậm chí có thể chỉ định giá trị mặc định cho nó,
nhưng với Scss bạn cần phải xác định rõ ràng các giá trị.
Vì vậy, ở đây chúng tôi đang xác định hai thuộc tính CSS khác nhau, lề và
padding, và sau đó padding chính nó sử dụng các tham số cho mixin của chúng tôi ở đó.
Vì vậy, trong trường hợp đó, bạn có thể sử dụng các mixins như bạn thấy
trong hai lớp CSS được xác định bên dưới tiêu đề hàng và
nội dung hàng bằng cách xác định giá trị tham số của họ
khi bạn bao gồm mixin đó vào cụm CSS của bạn.
Không chỉ vậy, bạn thậm chí có thể thực hiện các phép toán học trên các
biến được xác định trước khi bạn sử dụng chúng bên trong các lớp CSS của bạn.
Vì vậy, ở đây bạn có thể thấy rằng tôi đã định nghĩa hai mục băng chuyền khác nhau
với hai kích cỡ khác nhau, và vì vậy
bạn có thể thấy rằng chiều cao của mỗi một trong số họ được định nghĩa khác nhau.
Trong một trường hợp tôi đang sử dụng chiều cao được xác định trước, trong trường hợp khác
tôi đang nhân chiều cao đó và sau đó sử dụng nó để xác định
thuộc tính chiều cao bên trong mục carousel của tôi cho các hạng mục lớn.
Vì vậy, loại hoạt động toán học trên các
biến cũng được cho phép trong các ngôn ngữ tiền xử lý CSS.
Các tính năng khác mà các preprocessor CSS bao gồm
là các hàm cho phép bạn định nghĩa các hàm toán học, Ít chuỗi.
Bạn cũng có thể thực hiện các thao tác màu và phối màu bằng cách sử dụng các hàm này
và sử dụng chúng khi bạn xác định các lớp CSS của bạn.
Đây là một chút tiên tiến vì vậy tôi sẽ không đi vào quá nhiều chi tiết ở đó.
Ngoài ra, bạn có thể nhập các lớp tiền xử lý CSS được xác định trước vào các lớp khác.
Vì vậy, ví dụ, nếu bạn có một lớp Less như đã định nghĩa, và
bạn có thể nhập tập tin đó vào một tập tin Less khác.
Tương tự, nếu bạn đã xác định các tập tin Scss,
sau đó bạn có thể nhập chúng vào các tập tin Scss khác bằng cách sử dụng thao tác nhập.
Cú pháp là như nhau cho cả Less và Sass.
Bây giờ chúng ta đã thấy một số tính năng của các ngôn ngữ preprocessor CSS,
bây giờ chúng ta hãy kiểm tra làm thế nào chúng ta thực sự có thể sử dụng chúng bằng cách thực hiện một vài bài tập.
Đầu tiên, chúng ta sẽ thực hiện một bài tập dựa trên Less.
Sau đó chúng ta sẽ theo dõi nó với một bài tập dựa trên Sass.
[ NHẠC]