1
00:00:03,250 --> 00:00:06,680
Bây giờ chúng ta sẽ chuyển sang bài tập tiếp theo,

2
00:00:06,680 --> 00:00:11,535
nơi chúng tôi sẽ sử dụng cú pháp SCSS để xác định các

3
00:00:11,535 --> 00:00:18,325
lớp SCSS của chúng tôi và tự động chuyển đổi chúng thành các lớp CSS tương ứng của họ.

4
00:00:18,325 --> 00:00:22,220
Chúng tôi sẽ làm chính xác cùng một tập hợp các bước

5
00:00:22,220 --> 00:00:26,890
mà chúng tôi đã làm cho bài tập cuối cùng mà chúng tôi hoàn thành ngay bây giờ,

6
00:00:26,890 --> 00:00:31,470
nhưng sử dụng cú pháp SCSS.

7
00:00:31,470 --> 00:00:38,885
Để bắt đầu, trong dự án của bạn trong thư mục CSS,

8
00:00:38,885 --> 00:00:47,180
chúng ta hãy tạo một tập tin mới và đặt tên nó như là phong cách bắt đầu SCSS.

9
00:00:47,180 --> 00:00:51,660
Bây giờ trong tập tin này, chúng tôi sẽ xác định các lớp SCSS của chúng tôi và sau đó tự động

10
00:00:51,660 --> 00:00:56,795
chuyển đổi đó vào các lớp CSS của chúng tôi.

11
00:00:56,795 --> 00:01:01,350
Vì vậy, trong đó, chúng ta hãy bắt đầu bằng cách đầu tiên xác định các biến,

12
00:01:01,350 --> 00:01:05,110
vì vậy tôi sẽ bắt đầu với ánh sáng màu xám,

13
00:01:06,810 --> 00:01:11,820
bây giờ tôi đã thêm vào một vài biến ở đây một lần nữa với

14
00:01:11,820 --> 00:01:16,940
cùng tên như chúng tôi đã sử dụng trong bài tập cuối cùng trước đó,

15
00:01:16,940 --> 00:01:20,760
nhưng với cú pháp SCSS vì vậy

16
00:01:20,760 --> 00:01:25,630
tất cả các biến được đi trước với đồng đô la ký hiệu để xác định chúng như là các biến.

17
00:01:25,630 --> 00:01:27,750
Tiếp theo sẽ định nghĩa mixin.

18
00:01:27,750 --> 00:01:43,888
Vì vậy, đối với mixin, tôi sẽ nói mixin zero-margin, pad-up-down,

19
00:01:43,888 --> 00:01:48,920
pad-trái-phải,

20
00:01:48,920 --> 00:01:54,920
và chúng tôi xác định các giá trị như trước đây.

21
00:02:17,930 --> 00:02:21,130
Bây giờ chúng tôi đã hoàn thành việc xác định mixin,

22
00:02:21,130 --> 00:02:26,690
chúng tôi có thể sử dụng nó trong các lớp SCSS của chúng tôi mà chúng tôi xác định sau này.

23
00:02:27,480 --> 00:02:31,280
Bây giờ chúng ta hãy xác định một số lớp SCSS,

24
00:02:31,280 --> 00:02:40,025
vì vậy tôi sẽ xác định tiêu đề hàng mà tôi sẽ sử dụng

25
00:02:40,025 --> 00:02:44,740
mixin lề zero

26
00:02:44,740 --> 00:02:52,900
với các giá trị zero pixel ở đây.

27
00:02:53,620 --> 00:02:59,055
Chúng tôi sẽ tiếp tục xác định một vài lớp khác mà họ sẽ thêm vào đây,

28
00:02:59,055 --> 00:03:01,910
vì vậy bạn có thể thấy rằng tôi đã định nghĩa cùng với

29
00:03:01,910 --> 00:03:05,290
tiêu đề hàng và nội dung hàng mà tôi sử dụng

30
00:03:05,290 --> 00:03:12,730
mixins và chân trang và địa chỉ Jumbotron và vân vân,

31
00:03:12,730 --> 00:03:15,230
và bạn có thể thấy việc sử dụng

32
00:03:15,230 --> 00:03:21,190
các biến mà chúng tôi có định nghĩa trước đó trong ví dụ này ở đó.

33
00:03:21,190 --> 00:03:27,875
Mã rõ ràng là có sẵn trong các hướng dẫn tập thể dục mà theo dõi video này.

34
00:03:27,875 --> 00:03:32,295
Tiếp theo chúng ta sẽ thêm vào nếu bạn làm tổ các lớp học.

35
00:03:32,295 --> 00:03:35,395
Cũng giống như chúng tôi đã làm trong bài tập cuối cùng,

36
00:03:35,395 --> 00:03:40,780
chúng tôi sẽ thêm vào lớp băng chuyền với nền thiết lập để tối nền và sau đó

37
00:03:40,780 --> 00:03:42,345
bên trong nơi chúng tôi sẽ tổ

38
00:03:42,345 --> 00:03:47,065
một lớp mục băng chuyền với chiều cao thiết lập để băng chuyền mục chiều cao,

39
00:03:47,065 --> 00:03:51,945
và sau đó một lớp màu sắc bên trong hình ảnh với một số thuộc tính có,

40
00:03:51,945 --> 00:03:56,945
và sau đó là lớp nút băng chuyền như chúng tôi đã định nghĩa trước đó.

41
00:03:56,945 --> 00:04:02,070
Vì vậy, với điều này, chúng tôi đã thực hiện các thay đổi đối với các lớp SCSS của chúng tôi,

42
00:04:02,070 --> 00:04:03,925
vì vậy chúng ta hãy lưu các thay đổi.

43
00:04:03,925 --> 00:04:09,200
Bây giờ, chúng ta cần phải chuyển đổi này thành tập tin CSS tương ứng của nó.

44
00:04:09,200 --> 00:04:13,835
Để chuyển đổi mã nguồn SCSS của chúng tôi vào mã CSS tương ứng,

45
00:04:13,835 --> 00:04:19,395
chúng tôi sẽ có sự giúp đỡ của một mô-đun nút được gọi là node-sass.

46
00:04:19,395 --> 00:04:24,485
Cho phép cài đặt mô-đun nút bằng cách gõ npm

47
00:04:24,485 --> 00:04:33,845
cài đặt save dev—save dev và sau đó node-sass.

48
00:04:33,845 --> 00:04:37,690
Vì vậy, bằng cách này, chúng tôi sẽ lưu gói node-sass này

49
00:04:37,690 --> 00:04:42,020
như là một sự phụ thuộc phát triển trong tập tin package.json của chúng tôi.

50
00:04:42,020 --> 00:04:44,160
Một khi quá trình cài đặt hoàn tất,

51
00:04:44,160 --> 00:04:49,090
chúng tôi sẽ thêm vào một kịch bản vào tập tin package.json của chúng tôi.

52
00:04:49,090 --> 00:04:52,020
Đi đến tập tin package.json của chúng tôi,

53
00:04:52,020 --> 00:04:56,430
nếu bạn di chuyển lên bạn sẽ thấy rằng trong các phụ thuộc dev,

54
00:04:56,430 --> 00:05:00,380
bây giờ các nút bấm cũng được thêm vào các phụ thuộc dev.

55
00:05:00,380 --> 00:05:04,520
Bây giờ chúng ta sẽ thêm một kịch bản vào tập tin package.jsm

56
00:05:04,520 --> 00:05:07,015
của chúng tôi, do đó, một nửa bên phải của slide này,

57
00:05:07,015 --> 00:05:11,225
tôi sẽ thêm vào một kịch bản tên là SCSS và sau đó

58
00:05:11,225 --> 00:05:20,185
kịch bản này sẽ là node-sass -o CSS/, có

59
00:05:20,185 --> 00:05:26,500
nghĩa là đầu ra của các tập tin chuyển đổi này sẽ được trong thư mục CSS,

60
00:05:26,500 --> 00:05:29,715
và nguồn ở đây cũng sẽ được trong thư mục CSS.

61
00:05:29,715 --> 00:05:34,950
Vì vậy, tất cả các tập tin với phần mở rộng.scss sẽ được

62
00:05:34,950 --> 00:05:41,960
chuyển đổi và các tập tin corresponding.CSS sẽ được tạo ra bởi node-sass.module này.

63
00:05:42,270 --> 00:05:47,450
Hãy lưu các thay đổi và sau đó chúng tôi sẽ đi đến dấu nhắc lệnh và sau đó gõ

64
00:05:47,450 --> 00:05:54,310
vào npm chạy SCSS và điều này sẽ chăm sóc thực hiện chuyển đổi của chúng tôi.

65
00:05:54,310 --> 00:05:56,500
Đi đến dấu nhắc lệnh,

66
00:05:56,500 --> 00:06:02,005
chúng tôi sẽ gõ npm chạy SCSS và điều này sẽ

67
00:06:02,005 --> 00:06:09,795
tự động chuyển đổi tất cả các tập tin SCSS của chúng tôi vào các tập tin CSS tương ứng.

68
00:06:09,795 --> 00:06:11,905
Đi đến trình soạn thảo của chúng tôi,

69
00:06:11,905 --> 00:06:16,525
bây giờ bạn thấy rằng có một tập tin styles.css đã được tạo ra.

70
00:06:16,525 --> 00:06:18,530
Nhìn vào nội dung của tập tin này,

71
00:06:18,530 --> 00:06:25,000
bạn sẽ thấy rằng mã CSS này đã được tạo ra từ mã SCSS của chúng tôi là khá

72
00:06:25,000 --> 00:06:32,050
giống với mã CSS gốc mà chúng tôi đã viết chính mình.

73
00:06:32,050 --> 00:06:35,875
Với điều này, chúng tôi hoàn thành bài tập này.

74
00:06:35,875 --> 00:06:40,220
Trong bài tập này, chúng ta đã thấy làm thế nào chúng ta có thể viết

75
00:06:40,220 --> 00:06:48,195
mã SCSS và sau đó tự động chuyển đổi nó thành mã CSS tương ứng của họ.

76
00:06:48,195 --> 00:06:53,115
Lý do tại sao chúng tôi kiểm tra chi tiết này là bởi vì

77
00:06:53,115 --> 00:06:59,190
Bootstrap cung cấp các tập tin nguồn của nó ở định dạng SCSS.

78
00:06:59,190 --> 00:07:02,370
Nếu bạn truy cập trang Bootstrap,

79
00:07:02,370 --> 00:07:11,795
bạn sẽ nhận thấy rằng nó nói Bootstrap được thiết kế bằng cách sử dụng bộ xử lý tiền xử lý Sass.

80
00:07:11,795 --> 00:07:19,745
Vì vậy, nếu bạn nhìn vào cách này được chuyển đổi từ Sass

81
00:07:19,745 --> 00:07:23,475
và làm thế nào bạn có thể thực hiện tùy biến của riêng bạn

82
00:07:23,475 --> 00:07:28,115
bằng cách sử dụng mã Bootstrap Sass bạn có thể đi vào tài liệu,

83
00:07:28,115 --> 00:07:32,025
và sau đó bạn sẽ thấy trong

84
00:07:32,025 --> 00:07:37,610
“Tùy chọn” bạn sẽ có một số tùy chọn tùy chỉnh được xác định ở đây. Các

85
00:07:39,630 --> 00:07:43,800
tùy chọn tùy chỉnh khác nhau bạn có thể thấy rằng

86
00:07:43,800 --> 00:07:49,780
các biến này được xác định bằng cách sử dụng cú pháp Sass ở đây,

87
00:07:49,780 --> 00:07:53,460
và cũng trong “Xây dựng công cụ”,

88
00:07:53,460 --> 00:08:00,455
nó sẽ giải thích cho bạn cách bạn có thể thực hiện tùy chỉnh Bootstrap của riêng bạn.

89
00:08:00,455 --> 00:08:05,330
Bây giờ, tôi khuyên bạn không nên thử điều này cho đến khi bạn có

90
00:08:05,330 --> 00:08:10,515
đủ kinh nghiệm sử dụng Bootstrap trong cuộc sống hàng ngày của bạn.

91
00:08:10,515 --> 00:08:12,784
Điều này hoàn thành bài tập của chúng tôi.

92
00:08:12,784 --> 00:08:21,250
Đây có thể là thời điểm tốt cho bạn để thực hiện một cam kết tốt với các bài tập tin nhắn SCSS.