1
00:00:00,000 --> 00:00:04,466
[MUSIC]

2
00:00:04,466 --> 00:00:08,813
Bài học đặc biệt này đề cập đến các preprocessor CSS,

3
00:00:08,813 --> 00:00:11,880
đặc biệt là Less và Sass.

4
00:00:11,880 --> 00:00:17,420
Bây giờ rõ ràng, các chủ đề này có nhiều hơn để làm với CSS và

5
00:00:17,420 --> 00:00:22,680
xác định các lớp CSS, nhưng nó sẽ là không phù hợp cho

6
00:00:22,680 --> 00:00:26,940
tôi để hoàn thành một khóa học Bootstrap mà không

7
00:00:26,940 --> 00:00:31,010
đào sâu một chút vào các preprocessor CSS.

8
00:00:31,010 --> 00:00:37,265
Đơ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ó.

9
00:00:37,265 --> 00:00:41,970
Vì vậy, chúng tôi sẽ kiểm tra ngắn gọn CSS preprocessor,

10
00:00:41,970 --> 00:00:47,682
những gì họ đang có,

11
00:00:47,682 --> 00:00:51,166
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.

12
00:00:52,972 --> 00:00:58,263
Như bạn có thể hiểu từ kinh nghiệm trước đây của bạn với CSS,

13
00:00:58,263 --> 00:01:00,997
CSS là tuyệt vời để xác định phong cách và

14
00:01:00,997 --> 00:01:06,325
liên tục áp dụng các phong cách này cho các phần tử HTML khác nhau.

15
00:01:06,325 --> 00:01:11,940
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.

16
00:01:11,940 --> 00:01:15,080
Nhưng khi bạn nhìn vào mã CSS chính nó,

17
00:01:15,080 --> 00:01:19,620
bạn bắt đầu nhanh chóng nhận ra những hạn chế của CSS.

18
00:01:19,620 --> 00:01:23,660
Đặ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

19
00:01:23,660 --> 00:01:29,342
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,

20
00:01:29,342 --> 00:01:34,610
lồng của bộ chọn, biến, biểu thức và hàm.

21
00:01:36,310 --> 00:01:40,580
Điều này có nghĩa rằng việc viết mã CSS trở nên cồng kềnh, và

22
00:01:40,580 --> 00:01:44,370
việc duy trì mã CSS trở nên cồng kềnh vì

23
00:01:44,370 --> 00:01:49,550
thiếu cú pháp giống như ngôn ngữ lập trình truyền thống.

24
00:01:49,550 --> 00:01:54,770
Bây giờ, đây là nơi mà các preprocessor CSS đến để giải cứu chúng tôi.

25
00:01:55,800 --> 00:02:01,090
Có một số preprocessor CSS phổ biến cố gắng giải quyết một

26
00:02:01,090 --> 00:02:07,290
số thiếu sót của CSS bằng cách hỗ trợ nhiều tính năng này.

27
00:02:07,290 --> 00:02:13,000
Hai đặc biệt đó là quan tâm đến chúng tôi là Less và Sass.

28
00:02:14,840 --> 00:02:19,940
Chúng ta sẽ xem xét hai chi tiết hơn trong bài học này.

29
00:02:19,940 --> 00:02:24,744
Bây giờ, khi bạn xác định các lớp CSS

30
00:02:24,744 --> 00:02:29,760
của bạn bằng cách sử dụng một trong những ngôn ngữ preprocessor như Less hoặc

31
00:02:29,760 --> 00:02:34,990
Sass, sau đó họ cuối cùng phải được chuyển đổi thành CSS,

32
00:02:34,990 --> 00:02:39,696
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.

33
00:02:39,696 --> 00:02:44,840
Những gì các ngôn ngữ tiền xử lý mang lại cho chúng ta là

34
00:02:44,840 --> 00:02:51,580
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.

35
00:02:51,580 --> 00:02:53,620
Chúng ta sẽ kiểm tra Less và Sass một thời gian ngắn.

36
00:02:54,990 --> 00:03:00,890
Đặ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ự

37
00:03:00,890 --> 00:03:08,540
sử dụng Sass để xác định nguồn của nó cho các lớp CSS của nó.

38
00:03:08,540 --> 00:03:12,980
Và vì vậy nếu bạn đi vào tùy chỉnh Bootstrap,

39
00:03:12,980 --> 00:03:16,230
sau đó bạn sẽ phải làm việc với mã Sass.

40
00:03:16,230 --> 00:03:21,402
Bootstrap 3, đó là phiên bản trước của Bootstrap, sử dụng Less,

41
00:03:21,402 --> 00:03:26,260
và do đó, tôi nghĩ rằng nó sẽ là một điều thích hợp để bao gồm cả Less và

42
00:03:26,260 --> 00:03:32,330
Sass, bởi vì họ là khá nhiều tương tự nhau

43
00:03:32,330 --> 00:03:39,960
về khả năng của họ và cách cú pháp được định nghĩa.

44
00:03:39,960 --> 00:03:45,630
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

45
00:03:45,630 --> 00:03:53,340
biến, bộ chọn làm tổ, biểu thức, hàm và mixins.

46
00:03:53,340 --> 00:03:59,580
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.

47
00:03:59,580 --> 00:04:02,270
Điều đầu tiên mà chúng ta sẽ xem xét là các biến.

48
00:04:02,270 --> 00:04:05,310
Bây giờ trong nhiều lớp CSS mà bạn xác định,

49
00:04:05,310 --> 00:04:11,540
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.

50
00:04:11,540 --> 00:04:16,600
Nó có thể là đáng giá hơn nếu bạn xác định một số biến

51
00:04:16,600 --> 00:04:21,590
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.

52
00:04:21,590 --> 00:04:24,240
Vì vậy, đó là nơi các biến số đến để giải cứu bạn.

53
00:04:24,240 --> 00:04:29,720
Ở đây, chúng ta sẽ xem xét cả mã Less và Scss.

54
00:04:29,720 --> 00:04:34,090
Scss là một phiên bản của Sass,

55
00:04:34,090 --> 00:04:40,670
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.

56
00:04:40,670 --> 00:04:43,420
Vì vậy, nếu bạn xác định

57
00:04:43,420 --> 00:04:47,610
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 @.

58
00:04:47,610 --> 00:04:55,720
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.

59
00:04:55,720 --> 00:04:57,340
Và một khi bạn xác định các biến đó,

60
00:04:57,340 --> 00:05:01,750
sau đó bạn có thể sử dụng các biến đó khi bạn xác định các class.

61
00:05:01,750 --> 00:05:06,700
Như bạn thấy trong ví dụ, nơi chúng ta xác định nghịch đảo navbar-nền,

62
00:05:06,700 --> 00:05:11,410
hoặc chiều cao của băng chuyền mục như các biến.

63
00:05:11,410 --> 00:05:16,350
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

64
00:05:16,350 --> 00:05:21,400
là có một điểm duy nhất mà bạn có thể cập nhật một giá trị, và

65
00:05:21,400 --> 00:05:27,390
nó sẽ tự động cập nhật tất cả các lớp CSS sử dụng biến này.

66
00:05:27,390 --> 00:05:31,080
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

67
00:05:32,110 --> 00:05:38,340
biến trong các ngôn ngữ preprocessor CSS cũng có thể có phạm vi riêng của chúng.

68
00:05:39,650 --> 00:05:44,510
Rất thường xuyên khi bạn định nghĩa các lớp CSS, đặc biệt là khi bạn

69
00:05:44,510 --> 00:05:49,760
phải định nghĩa các lớp được lồng nhau bên trong các lớp khác,

70
00:05:49,760 --> 00:05:53,330
sau đó, khá sớm mã CSS của bạn trở nên rất cồng kềnh.

71
00:05:53,330 --> 00:05:58,370
Vì vậy, đây là nơi làm tổ được hỗ trợ bởi các preprocessor CSS của bạn.

72
00:05:58,370 --> 00:06:02,380
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à

73
00:06:02,380 --> 00:06:05,876
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.

74
00:06:05,876 --> 00:06:11,900
Và tương tự, lớp con hình ảnh bên trong lớp mục carousel.

75
00:06:11,900 --> 00:06:18,161
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.

76
00:06:19,440 --> 00:06:25,410
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.

77
00:06:25,410 --> 00:06:30,730
Giả sử bạn có một nhóm các biến tổng hợp lại với nhau

78
00:06:30,730 --> 00:06:37,275
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.

79
00:06:37,275 --> 00:06:42,910
Trong Less bạn định nghĩa một mixin bằng cách đặt tên cho nó,

80
00:06:42,910 --> 00:06:47,650
và trong Sass bạn chỉ đơn giản là đứng trước đó với một @mixin ở

81
00:06:47,650 --> 00:06:52,530
phía trước tên của khai báo mixin.

82
00:06:52,530 --> 00:06:58,560
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à

83
00:06:58,560 --> 00:07:03,620
sau đó có thể được tái sử dụng cho các lớp CSS khác nhau.

84
00:07:03,620 --> 00:07:08,110
Như bạn thấy trong ví dụ này ở đây, chúng ta định nghĩa lề bằng không

85
00:07:08,110 --> 00:07:12,480
là mixin, cả trong Less và Sass.

86
00:07:12,480 --> 00:07:18,120
Lưu ý các biến thể nhỏ trong cú pháp trong mỗi trường hợp đó.

87
00:07:18,120 --> 00:07:25,250
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.

88
00:07:25,250 --> 00:07:30,620
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à

89
00:07:30,620 --> 00:07:35,480
một mixin trong tiêu đề hàng, có nghĩa là tất cả

90
00:07:35,480 --> 00:07:40,780
các thuộc tính từ lề zero sẽ được kế thừa bởi lớp tiêu đề hàng đó.

91
00:07:40,780 --> 00:07:47,320
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.

92
00:07:47,320 --> 00:07:49,970
Vì vậy, trong trường hợp này, tôi đang xác định

93
00:07:49,970 --> 00:07:54,680
một biến thể của mixin lề zero mà chúng ta đã thấy trong slide trước đó.

94
00:07:54,680 --> 00:07:59,935
Ở đây, mixin lề zero này mất hai tham số,

95
00:07:59,935 --> 00:08:03,011
pad lên xuống và pad trái phải.

96
00:08:03,011 --> 00:08:08,840
Và với Less, bạn thậm chí có thể chỉ định giá trị mặc định cho nó,

97
00:08:08,840 --> 00:08:15,276
nhưng với Scss bạn cần phải xác định rõ ràng các giá trị.

98
00:08:15,276 --> 00:08:20,871
Vì vậy, ở đây chúng tôi đang xác định hai thuộc tính CSS khác nhau, lề và

99
00:08:20,871 --> 00:08:27,880
padding, và sau đó padding chính nó sử dụng các tham số cho mixin của chúng tôi ở đó.

100
00:08:27,880 --> 00:08:32,300
Vì vậy, trong trường hợp đó, bạn có thể sử dụng các mixins như bạn thấy

101
00:08:32,300 --> 00:08:36,997
trong hai lớp CSS được xác định bên dưới tiêu đề hàng và

102
00:08:36,997 --> 00:08:41,810
nội dung hàng bằng cách xác định giá trị tham số của họ

103
00:08:41,810 --> 00:08:46,270
khi bạn bao gồm mixin đó vào cụm CSS của bạn.

104
00:08:47,470 --> 00:08:52,570
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

105
00:08:52,570 --> 00:08:58,120
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.

106
00:08:58,120 --> 00:09:03,470
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

107
00:09:03,470 --> 00:09:05,740
với hai kích cỡ khác nhau, và vì vậy

108
00:09:05,740 --> 00:09:10,060
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.

109
00:09:10,060 --> 00:09:15,105
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

110
00:09:15,105 --> 00:09:20,244
tôi đang nhân chiều cao đó và sau đó sử dụng nó để xác định

111
00:09:20,244 --> 00:09:25,230
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.

112
00:09:25,230 --> 00:09:28,778
Vì vậy, loại hoạt động toán học trên các

113
00:09:28,778 --> 00:09:33,710
biến cũng được cho phép trong các ngôn ngữ tiền xử lý CSS.

114
00:09:35,060 --> 00:09:40,160
Các tính năng khác mà các preprocessor CSS bao gồm

115
00:09:40,160 --> 00:09:47,365
là các hàm cho phép bạn định nghĩa các hàm toán học, Ít chuỗi.

116
00:09:47,365 --> 00:09:53,015
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

117
00:09:53,015 --> 00:09:57,915
và sử dụng chúng khi bạn xác định các lớp CSS của bạn.

118
00:09:57,915 --> 00:10:01,345
Đâ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 ở đó.

119
00:10:03,470 --> 00:10:11,552
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.

120
00:10:11,552 --> 00:10:16,680
Vì vậy, ví dụ, nếu bạn có một lớp Less như đã định nghĩa, và

121
00:10:16,680 --> 00:10:20,100
bạn có thể nhập tập tin đó vào một tập tin Less khác.

122
00:10:20,100 --> 00:10:23,347
Tương tự, nếu bạn đã xác định các tập tin Scss,

123
00:10:23,347 --> 00:10:29,210
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.

124
00:10:29,210 --> 00:10:32,670
Cú pháp là như nhau cho cả Less và Sass.

125
00:10:33,890 --> 00:10:40,180
Bây giờ chúng ta đã thấy một số tính năng của các ngôn ngữ preprocessor CSS,

126
00:10:40,180 --> 00:10:45,520
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.

127
00:10:45,520 --> 00:10:49,900
Đầu tiên, chúng ta sẽ thực hiện một bài tập dựa trên Less.

128
00:10:49,900 --> 00:10:53,677
Sau đó chúng ta sẽ theo dõi nó với một bài tập dựa trên Sass.

129
00:10:53,677 --> 00:10:57,099
[ NHẠC]