1
00:00:03,290 --> 00:00:09,780
Đó là thời gian để chuyển sang bài tập tiếp theo, được gọi là Tập thể dục: Less.

2
00:00:09,780 --> 00:00:12,860
Một cái gì đó mà bạn muốn bác sĩ của bạn

3
00:00:12,860 --> 00:00:16,380
sẽ cho bạn biết khi bạn đến thăm anh ta hoặc cô ấy trong lần tiếp theo.

4
00:00:16,380 --> 00:00:25,515
Tuy nhiên, chúng ta hãy xem xét ít chi tiết hơn bây giờ để hiểu làm thế nào chúng ta có thể định nghĩa

5
00:00:25,515 --> 00:00:31,830
các lớp CSS bằng cách sử dụng cú pháp preprocessor ít hơn và sau đó

6
00:00:31,830 --> 00:00:38,725
tự động tạo ra các lớp CSS tương ứng từ các lớp ít hơn của chúng tôi.

7
00:00:38,725 --> 00:00:42,630
Để bắt đầu, chúng ta hãy đi đến

8
00:00:42,630 --> 00:00:51,865
dự án của chúng tôi trong Text Editor và sau đó bên trong thư mục CSS,

9
00:00:51,865 --> 00:00:58,750
tôi sẽ đổi tên tệp styles.css này là styles-old.css.

10
00:00:58,750 --> 00:01:03,870
Tôi sẽ lưu phiên bản hiện tại của tôi của

11
00:01:03,870 --> 00:01:08,685
tập tin styles.css bởi vì bây giờ họ sẽ viết ít mã

12
00:01:08,685 --> 00:01:13,200
và mã SCSS và sau đó tự động tạo ra các

13
00:01:13,200 --> 00:01:19,165
tập tin styles.css bằng cách biên dịch các ngôn ngữ preprocessor CSS.

14
00:01:19,165 --> 00:01:23,300
Sau khi thực hiện việc này, sau đó trong thư mục CSS của tôi,

15
00:01:23,300 --> 00:01:31,280
chúng tôi sẽ tạo ra một tập tin mới có tên styles.less.

16
00:01:32,070 --> 00:01:37,290
Và bên trong đây, tôi sẽ xác định mã của tôi ít hơn.

17
00:01:37,290 --> 00:01:41,800
Trước tiên hãy xác định một số biến ít hơn.

18
00:01:41,800 --> 00:01:52,420
Tôi sẽ nói, lt-gray: ddd và vân vân.

19
00:01:52,420 --> 00:01:57,980
Bạn có thể thấy rằng tôi đã thêm vào một vài biến ít hơn ở đây.

20
00:01:57,980 --> 00:02:02,310
Vì vậy, tôi định nghĩa bóng tối nền là giá trị đầu tiên,

21
00:02:02,310 --> 00:02:05,850
ánh sáng nền và nền nhợt nhạt và cũng

22
00:02:05,850 --> 00:02:11,235
có một biến khác được gọi là carousel-item-height là 300 pixel.

23
00:02:11,235 --> 00:02:17,305
Tôi sẽ làm cho việc sử dụng các biến này khi tôi xác định các lớp CSS của tôi sau này.

24
00:02:17,305 --> 00:02:22,995
Bây giờ hãy để tôi thêm vào một Mixin cho

25
00:02:22,995 --> 00:02:31,130
tập tin ít hơn của tôi gọi là zero-margin và tôi sẽ xác định

26
00:02:41,320 --> 00:02:48,760
pad-up-dn và pad-trái phải,

27
00:02:48,760 --> 00:02:55,725
0px là giá trị mặc định và sau đó ở đây,

28
00:02:55,725 --> 00:03:01,620
tôi đặt margin: 0px auto,

29
00:03:01,620 --> 00:03:11,520
padding: pat-up-dn

30
00:03:11,520 --> 00:03:14,460
và pad-trái phải.

31
00:03:14,460 --> 00:03:20,180
Vì vậy, với điều này, tôi đã định nghĩa Mixin rằng tôi sẽ

32
00:03:20,180 --> 00:03:25,785
làm cho sử dụng trong các lớp CSS của tôi mà chúng tôi sẽ xác định sau này.

33
00:03:25,785 --> 00:03:31,265
Và điều này mang hai thông số pad-up-dn và pad-trái-phải.

34
00:03:31,265 --> 00:03:39,740
Tiếp theo, tôi sẽ thêm vào một vài lớp CSS, vì vậy tôi bắt đầu với

35
00:03:39,740 --> 00:03:50,435
hàng tiêu đề và xác định điều này như là zero-margin.

36
00:03:50,435 --> 00:03:57,560
Hãy để tôi thêm vào một vài lớp CSS nữa và sau đó trở lại để có một cái nhìn vào chúng.

37
00:03:57,560 --> 00:04:01,170
Ở đây, tôi đã xác định được một lớp CSS

38
00:04:01,170 --> 00:04:06,480
bằng cách sử dụng các zero margin Mixin với các tham số 50 pixel và 0 pixel,

39
00:04:06,480 --> 00:04:10,790
một chân trang nơi tôi xác định màu nền bằng cách sử dụng

40
00:04:10,790 --> 00:04:15,660
các biến đã định nghĩa trước đó là

41
00:04:15,660 --> 00:04:19,940
background-pale và sau đó jumbotron với

42
00:04:19,940 --> 00:04:25,885
zero-margin Mixin và màu nền được định nghĩa là nền ánh sáng,

43
00:04:25,885 --> 00:04:30,200
và một số trong những người khác đó là các lớp CSS tiêu chuẩn,

44
00:04:30,200 --> 00:04:34,610
mà tôi đã bao gồm có bởi vì tôi sẽ sử dụng chúng trong

45
00:04:34,610 --> 00:04:38,010
trang web của tôi và sau đó bạn có

46
00:04:38,010 --> 00:04:42,850
navbar-tối mà màu nền tôi đã xác định chúng ta background tối.

47
00:04:42,850 --> 00:04:46,980
Và các tab nội dung mà một lần nữa bạn thấy tôi

48
00:04:46,980 --> 00:04:51,820
sử dụng màu xám nhạt biến cho màu biên giới ở đây.

49
00:04:51,820 --> 00:04:58,700
Tiếp theo, tôi thêm vào lớp carousel ở đây mà tôi xác

50
00:04:58,700 --> 00:05:06,010
định nền là nền tối ở đây và sau đó,

51
00:05:06,010 --> 00:05:10,540
tôi xác định rằng carousel-item.

52
00:05:10,540 --> 00:05:18,225
Lưu ý, làm thế nào tôi định nghĩa rằng như là một mục lồng nhau bên trong băng chuyền của tôi và cho băng chuyền mục,

53
00:05:18,225 --> 00:05:24,225
tôi xác định chiều cao như băng chuyền mục chiều cao ở đây,

54
00:05:24,225 --> 00:05:28,965
đó là một biến mà tôi xác định trước đó và bên trong đó,

55
00:05:28,965 --> 00:05:31,005
tôi xác định hình ảnh,

56
00:05:31,005 --> 00:05:36,635
mà là một lần nữa một mục lồng nhau bên trong băng chuyền mục và sau đó cho hình ảnh,

57
00:05:36,635 --> 00:05:40,010
tôi sẽ xác định một số thuộc tính CSS tiếp theo.

58
00:05:40,010 --> 00:05:42,650
Như bạn có thể thấy,

59
00:05:42,650 --> 00:05:46,200
tôi đã xác định một số thuộc tính cho hình ảnh.

60
00:05:46,200 --> 00:05:50,950
Ở đây, bạn thấy việc sử dụng các lớp lồng nhau ở đây,

61
00:05:50,950 --> 00:05:55,305
vì vậy bạn có carousel và bên trong mà tôi có một carousel-item và bên trong đó,

62
00:05:55,305 --> 00:05:57,145
một hình ảnh được xác định ở đây.

63
00:05:57,145 --> 00:05:58,945
Cuối cùng ở dưới cùng,

64
00:05:58,945 --> 00:06:02,075
tôi thêm vào lớp CarouselButton,

65
00:06:02,075 --> 00:06:07,605
được sử dụng để chỉ định CarouselButton.

66
00:06:07,605 --> 00:06:14,935
Với những thay đổi này để tập tin styles.less của tôi thêm vào tất cả các lớp học ít hơn ở đây,

67
00:06:14,935 --> 00:06:16,465
hãy để tôi lưu các thay đổi.

68
00:06:16,465 --> 00:06:23,230
Bây giờ, tôi muốn có thể tự động chuyển đổi này vào tập tin CSS tương ứng của họ.

69
00:06:23,230 --> 00:06:28,875
Để tự động chuyển đổi tập tin ít hơn của tôi vào tập tin CSS tương ứng của nó,

70
00:06:28,875 --> 00:06:32,660
tôi sẽ làm cho việc sử dụng một mô-đun nút gọi là ít hơn.

71
00:06:32,660 --> 00:06:35,015
Để cài đặt điều đó tại dấu nhắc,

72
00:06:35,015 --> 00:06:41,085
tôi gõ sudo npm cài đặt trừ g ít hơn.

73
00:06:41,085 --> 00:06:47,150
Tôi cài đặt này như là một mô-đun nút toàn cầu.

74
00:06:47,150 --> 00:06:54,555
Và một khi đã được cài đặt,

75
00:06:54,555 --> 00:07:01,985
sau đó nó sẽ làm cho có sẵn một trình biên dịch ít được gọi là lessc tại dấu nhắc lệnh.

76
00:07:01,985 --> 00:07:04,570
Nếu bạn đang chạy điều này trên một máy Windows,

77
00:07:04,570 --> 00:07:06,130
bạn không cần phải làm sudo,

78
00:07:06,130 --> 00:07:09,900
như bạn có thể đã nhớ lại.

79
00:07:09,900 --> 00:07:14,565
Bây giờ chúng tôi đã cài đặt trình biên dịch lessc,

80
00:07:14,565 --> 00:07:21,010
tôi sẽ biên dịch mã ít hơn của tôi vào mã CSS tương ứng của nó.

81
00:07:21,010 --> 00:07:26,290
Để làm điều đó, hãy để tôi đi vào thư mục CSS và sau đó ở đây,

82
00:07:26,290 --> 00:07:29,650
bạn sẽ thấy rằng bạn có các tập tin styles.less.

83
00:07:29,650 --> 00:07:38,909
Tại dấu nhắc, gõ lessc styles.less styles.css,

84
00:07:38,909 --> 00:07:43,010
và một khi hoàn thành việc biên dịch,

85
00:07:43,010 --> 00:07:45,580
bạn sẽ có tệp CSS tương ứng.

86
00:07:45,580 --> 00:07:47,580
Vì vậy, như bạn thấy bây giờ,

87
00:07:47,580 --> 00:07:53,565
bạn có mã ít hơn được chuyển đổi thành mã CSS tương ứng.

88
00:07:53,565 --> 00:07:59,310
Lấy một cái nhìn vào mã CSS được tạo ra từ mã ít hơn,

89
00:07:59,310 --> 00:08:02,910
bạn sẽ thấy rằng mã này trông khá

90
00:08:02,910 --> 00:08:08,075
giống như những gì chúng tôi định nghĩa trong tập tin CSS ban đầu của chúng tôi.

91
00:08:08,075 --> 00:08:11,270
Với điều này, chúng tôi hoàn thành bài tập này.

92
00:08:11,270 --> 00:08:15,515
Trong bài tập này, chúng ta đã học cách viết

93
00:08:15,515 --> 00:08:21,525
ít mã hơn và sau đó tự động chuyển đổi mã đó thành mã CSS tương ứng.

94
00:08:21,525 --> 00:08:26,155
Tại thời điểm này, bạn có thể muốn lưu các thay

95
00:08:26,155 --> 00:08:32,410
đổi vào kho lưu trữ Git của bạn với thông điệp Tập thể dục: Less.