Bây giờ chúng ta sẽ chuyển sang bài tập tiếp theo,
nơi chúng tôi sẽ sử dụng cú pháp SCSS để xác định các
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ọ.
Chúng tôi sẽ làm chính xác cùng một tập hợp các bước
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ờ,
nhưng sử dụng cú pháp SCSS.
Để bắt đầu, trong dự án của bạn trong thư mục CSS,
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.
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
chuyển đổi đó vào các lớp CSS của chúng tôi.
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,
vì vậy tôi sẽ bắt đầu với ánh sáng màu xám,
bây giờ tôi đã thêm vào một vài biến ở đây một lần nữa với
cùng tên như chúng tôi đã sử dụng trong bài tập cuối cùng trước đó,
nhưng với cú pháp SCSS vì vậy
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.
Tiếp theo sẽ định nghĩa mixin.
Vì vậy, đối với mixin, tôi sẽ nói mixin zero-margin, pad-up-down,
pad-trái-phải,
và chúng tôi xác định các giá trị như trước đây.
Bây giờ chúng tôi đã hoàn thành việc xác định mixin,
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.
Bây giờ chúng ta hãy xác định một số lớp SCSS,
vì vậy tôi sẽ xác định tiêu đề hàng mà tôi sẽ sử dụng
mixin lề zero
với các giá trị zero pixel ở đây.
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,
vì vậy bạn có thể thấy rằng tôi đã định nghĩa cùng với
tiêu đề hàng và nội dung hàng mà tôi sử dụng
mixins và chân trang và địa chỉ Jumbotron và vân vân,
và bạn có thể thấy việc sử dụng
các biến mà chúng tôi có định nghĩa trước đó trong ví dụ này ở đó.
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.
Tiếp theo chúng ta sẽ thêm vào nếu bạn làm tổ các lớp học.
Cũng giống như chúng tôi đã làm trong bài tập cuối cùng,
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 đó
bên trong nơi chúng tôi sẽ tổ
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,
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ó,
và sau đó là lớp nút băng chuyền như chúng tôi đã định nghĩa trước đó.
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,
vì vậy chúng ta hãy lưu các thay đổi.
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ó.
Để chuyển đổi mã nguồn SCSS của chúng tôi vào mã CSS tương ứng,
chúng tôi sẽ có sự giúp đỡ của một mô-đun nút được gọi là node-sass.
Cho phép cài đặt mô-đun nút bằng cách gõ npm
cài đặt save dev—save dev và sau đó node-sass.
Vì vậy, bằng cách này, chúng tôi sẽ lưu gói node-sass này
như là một sự phụ thuộc phát triển trong tập tin package.json của chúng tôi.
Một khi quá trình cài đặt hoàn tất,
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.
Đi đến tập tin package.json của chúng tôi,
nếu bạn di chuyển lên bạn sẽ thấy rằng trong các phụ thuộc dev,
bây giờ các nút bấm cũng được thêm vào các phụ thuộc dev.
Bây giờ chúng ta sẽ thêm một kịch bản vào tập tin package.jsm
của chúng tôi, do đó, một nửa bên phải của slide này,
tôi sẽ thêm vào một kịch bản tên là SCSS và sau đó
kịch bản này sẽ là node-sass -o CSS/, có
nghĩa là đầu ra của các tập tin chuyển đổi này sẽ được trong thư mục CSS,
và nguồn ở đây cũng sẽ được trong thư mục CSS.
Vì vậy, tất cả các tập tin với phần mở rộng.scss sẽ được
chuyển đổi và các tập tin corresponding.CSS sẽ được tạo ra bởi node-sass.module này.
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õ
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.
Đi đến dấu nhắc lệnh,
chúng tôi sẽ gõ npm chạy SCSS và điều này sẽ
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.
Đi đến trình soạn thảo của chúng tôi,
bây giờ bạn thấy rằng có một tập tin styles.css đã được tạo ra.
Nhìn vào nội dung của tập tin này,
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á
giống với mã CSS gốc mà chúng tôi đã viết chính mình.
Với điều này, chúng tôi hoàn thành bài tập này.
Trong bài tập này, chúng ta đã thấy làm thế nào chúng ta có thể viết
mã SCSS và sau đó tự động chuyển đổi nó thành mã CSS tương ứng của họ.
Lý do tại sao chúng tôi kiểm tra chi tiết này là bởi vì
Bootstrap cung cấp các tập tin nguồn của nó ở định dạng SCSS.
Nếu bạn truy cập trang Bootstrap,
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.
Vì vậy, nếu bạn nhìn vào cách này được chuyển đổi từ Sass
và làm thế nào bạn có thể thực hiện tùy biến của riêng bạn
bằng cách sử dụng mã Bootstrap Sass bạn có thể đi vào tài liệu,
và sau đó bạn sẽ thấy trong
“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
tùy chọn tùy chỉnh khác nhau bạn có thể thấy rằng
các biến này được xác định bằng cách sử dụng cú pháp Sass ở đây,
và cũng trong “Xây dựng công cụ”,
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.
Bây giờ, tôi khuyên bạn không nên thử điều này cho đến khi bạn có
đủ kinh nghiệm sử dụng Bootstrap trong cuộc sống hàng ngày của bạn.
Điều này hoàn thành bài tập của chúng tôi.
Đâ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.