Kiểu một trang web sử dụng Sass

Bạn có thể làm rất nhiều với CSS - có lẽ nhiều hơn bạn nghĩ - nhưng ngôn ngữ biểu đồ phong cách đáng kính có những hạn chế của nó. Trong một dự án web hiện đại, với các mô-đun NPM, khung JavaScript, ES6 và nhiều hơn nữa, nó có thể cảm thấy hơi phẫu thuật để trở lại để viết Vanilla CSS.

May mắn thay, có các tùy chọn ngoài kia cho phép bạn sử dụng các ngôn ngữ khác biên dịch sang CSS. Được gọi là 'bộ tiền xử lý', các công cụ này tích hợp vào quy trình xây dựng web của bạn và tạo các bảng phong cách có thể sử dụng từ bất kỳ ngôn ngữ mở rộng nào bạn đã chọn.

Sass (bảng phong cách cú pháp tuyệt vời) là một trong những tùy chọn phổ biến nhất trong số các tùy chọn - Đọc thêm với Hướng dẫn của chúng tôi Sass là gì? Sass thêm nhiều tính năng ngôn ngữ mới có giá trị không (hiện tại) có sẵn trong CSS để giúp làm cho trang web và ứng dụng của bạn dễ bảo trì hơn. Chúng bao gồm những thứ như mixins và chỉ thị kiểm soát, những âm thanh nản chí nhưng thực sự khá đơn giản và chúng ta sẽ xem xét những thứ này trong hướng dẫn này. Nếu bạn muốn giữ mọi thứ trở nên đơn giản hơn, bạn có thể sử dụng một người tạo ra trang web .

• Hoạt hình CSS tuyệt vời để tái tạo

Thực tế có hai cú pháp khác nhau cho SASS, một cú pháp sử dụng phần mở rộng tệp .scss và một loại sử dụng .sass. Cái trước trông giống CSS (trên thực tế, tất cả các tệp .css là tệp .scss hợp lệ), trong khi sau đó loại bỏ dấu ngoặc và dấu chấm phẩy của CSS theo sự thụt lề và mới. Chúng tôi sẽ tập trung vào các .scss, nhưng sự lựa chọn chỉ đơn giản là xuống sở thích cá nhân. Nâng cấp trang web của bạn? Hãy chắc chắn của bạn web hosting dịch vụ làm những gì bạn cần và nhận được lưu trữ đám mây Phải rồi, quá.

Tải xuống các tệp cho hướng dẫn này tại đây (Số 282)

01. Thiết lập trình biên dịch

Sử dụng Sass về cơ bản yêu cầu một trình biên dịch. Cách đơn giản nhất để làm điều này sẽ ở dòng lệnh. Bạn có thể làm như vậy bằng cách sử dụng homebrew. Trình biên dịch Sass được triển khai bằng nhiều ngôn ngữ khác nhau và homebrew sẽ cài đặt phiên bản phi tiêu, nhanh chóng.

brew install sass/sass/sass

02. Tạo tệp Sass

Hãy thử tạo một tệp Sass đơn giản để xem trình biên dịch hoạt động. Một trong những khái niệm đơn giản nhất trong SASS là các biến, có thể được chỉ định một lần với một $. tiền tố và sau đó được sử dụng trong suốt mã của bạn. Chúng ta sẽ tạo ra Sass-Input.scss. .

 $ Text-Color: #cccccc;
thân hình {
    Màu sắc: $ Text-Color;
} 

03. Biên dịch dòng lệnh

Bây giờ chúng ta có thể chạy trình biên dịch Sass tại dòng lệnh để chuyển đổi tệp .scsss của chúng tôi thành đầu ra CSS. Bạn sẽ nhận thấy trong tệp đầu ra mà các biến đã biến mất và chúng tôi chỉ còn lại với cú pháp CSS tiêu chuẩn có thể sử dụng được bởi trình duyệt.

 Sass Sass-Input.scss CSS-Output.css 

04. Tự động hóa bản dựng của bạn

Điều này thật tuyệt, nhưng bạn không muốn chạy trình biên dịch Sass theo cách thủ công mỗi khi bạn thực hiện thay đổi. Một lựa chọn là để nó lắng nghe các thay đổi đối với các tệp trong một thư mục và tự động biên dịch lại đầu ra cho một thư mục khác (giữ lại tên tệp). Điều này cũng hiệu quả cho phép bạn phân tách tệp .scss nguồn của bạn từ CSS được chế tạo của bạn.

 MKDIR SRC
mkdir src / sass
công khai mkdir.
mkdir công khai / css
sass --watch src / sass /: công khai / css /

05. Chơi với Kiểu dáng Sass

Bây giờ chúng ta hãy nhìn vào một trang web khởi động đơn giản, mà chúng ta có thể sử dụng để chơi xung quanh với kiểu dáng Sass. Chúng ta có thể bắt đầu bằng cách nhân bản một trang web ví dụ không ổn định. Điều quan trọng cần lưu ý là trang html của chúng tôi không biết gì về Sass. Nó có một điểm nhập tệp CSS duy nhất, chúng ta sẽ tạo tiếp theo.

 CD công cộng
Curl -o index.html https: // RAW.
githubusercontent.com/simon-a-j/sass-
hướng dẫn /
Master / Public / Index.html 

06. Biểu định kiểu chính

Chúng tôi đang sử dụng Styles.css là điểm nhập CSS chính của chúng tôi, sau này chúng tôi sẽ sử dụng để nhập các mô-đun khác. Điều này có nghĩa là chúng ta cần nói với Sass để tạo tệp này, vì vậy chúng tôi cũng cần tạo tệp kiểu.scss trong thư mục SRC / SASS của chúng tôi. Nếu bạn đang chạy Sass --watch. Như trước đây, điều này sẽ tự động được biên dịch thành CSS trong CÔNG CỘNG / CSS. thư mục, và làm mới trang web của bạn sẽ hiển thị các thay đổi của nó. Hãy thử thực hiện một số sửa đổi và làm mới trang HTML trong trình duyệt khi bạn đi.

 // styles.scss
thân hình {
  Font-Family: Sans-serif;
  Text-Căn chỉnh: Trung tâm;
Không thể

07. Quản lý bảng màu

Hãy xem cách Sass có thể giúp chúng tôi quản lý một bảng màu cho trang web. Nó phổ biến để có một bảng màu năm hoặc sáu màu cho một trang web. Chúng ta có thể bên ngoài những thứ này trong _colours.scss. . Tiền tố dấu gạch dưới cho Sass không thể biên dịch điều này thành tệp HTML mới (một phần 'một phần'). Nhưng chúng ta có thể sử dụng nó một cách hơi khác.

 // _colours.scss
$ Color-Prime: # 231651;
$ Màu thứ cấp: # 2374ab;
$ tô màu: # d6fff6;
$ Color-Highlight1: # 4DCCBD;
$ Color-Highlight2: # FF8484;

08. Sử dụng biến màu

Để sử dụng các biến màu này, chúng tôi vừa thiết lập, chúng tôi có thể nói Sass để nhập nội dung của _colours.scss. vào tấm phong cách chính của chúng tôi. Chúng tôi làm điều này bằng cách sử dụng một @Import. tuyên bố. Khi bạn đã hoàn thành việc này, hãy chú ý cách các biến được giải quyết trong tệp CSS đầu ra.

 // styles.scss
@import "_colours.scss";
thân hình {
  Font-Family: Sans-serif;
  Text-Căn chỉnh: Trung tâm;
  Bối cảnh: Độ dốc tuyến tính (155DEG,
$ màu-chính 70%, $ màu thứ cấp
70%);
  Màu sắc: $ Đèn màu;
  Chiều cao tối thiểu: 100vh;
Không thể
h1 {
    Màu sắc: $ Color-Highlight1;
Không thể
h2 {
  Màu sắc: $ Color-Highlight2;
Không thể

09. Kiểu tổ

Một tính năng hữu ích khác của Sass là khả năng làm tổ phong cách. Đó là, bạn có thể chỉ định một kiểu cho một phần tử chỉ được áp dụng nếu phần tử đó xảy ra trong phần tử cha. Hãy sử dụng điều này để phân biệt kiểu dáng của chúng ta tùy thuộc vào việc chúng xuất hiện trong tiêu đề hoặc cơ thể hay không.

 A {
  Màu sắc: $ Màu thứ cấp;
Không thể
.profile-Header {
  một {
    Kích thước phông chữ: 16px;
    lề-trái: 10px;
    Biên lợi nhuận: 10px;
    Đệm: 10px;
    Border-Radius: 5px;
    Màu sắc: $ Đèn màu;
    Màu nền: $ Màu thứ cấp;
  Không thể
Không thể

10. Tạo lưới đáp ứng

Bây giờ hãy sắp xếp nội dung của chúng tôi thành một định dạng lưới đáp ứng. Sass có một vài tính năng để làm cho điều này dễ quản lý hơn đáng kể. Cũng như sử dụng các biến để chỉ định điểm dừng của chúng tôi, chúng tôi có thể lồng @phương tiện truyền thông Truy vấn trong các phong cách khác, làm cho hành vi cụ thể về kích thước màn hình có thể đọc được nhiều hơn nhiều.

 $ BEARPOINT: 800px;
.profile-body {
  Hiển thị: Flex;
  Căn chỉnh các mặt hàng: Kéo dài;
  Nội dung chứng minh: không gian xung quanh;
  Margin-top: 32px;
  lề-trái: 10VW;
  lề-phải: 10VW;
  Màn hình @Media và (chiều rộng tối đa:
$ BEARPOINT) {
      Hướng dẫn: Cột;
  Không thể
Không thể
.profile-phần {
  Màu nền: $ Color-Highlight1;
  Màu sắc: $ màu-chính;
  Biên độ: 16px;
  Border-Radius: 10px;
  Chiều rộng: 340px;
  .profile-nội dung {
    Đệm: 20px;
  Không thể
  Màn hình @Media và (chiều rộng tối đa:
$ BEARPOINT) {
    Chiều rộng: 100%;
  Không thể
Không thể

11. Giới thiệu Mixins.

Mixins là một tính năng Sass mạnh mẽ khác mà bạn có thể nghĩ là một cách để xác định các chức năng biểu định kiểu có thể tái sử dụng. Một mixin được xác định một lần, có thể lấy tham số và sau đó có thể được gọi bất cứ nơi nào trong mã Sass của bạn. Một trường hợp sử dụng cho việc này là để xử lý tiền tố của nhà cung cấp. Nếu chúng ta muốn biến đổi CSS hoạt động trong các trình duyệt cũ hơn, điều này có thể yêu cầu một -webkit. Tiền tố cho Chrome và Safari, ví dụ. Hãy xác định một mixin chăm sóc điều này cho chúng tôi.

12. Mixins và biến

Chúng ta cũng có thể sử dụng mixin với nhiều tham số, kết hợp với một số biến mà chúng ta xác định, để xử lý thanh lịch hơn kiểu dáng của các phần khác nhau của trang. Nếu chúng ta tạo một hỗn hợp xác định màu nền trước và màu nền, điều này sẽ cho phép chúng ta chọn xuất hiện cho các phần khác nhau từ một danh sách hữu hạn các biến kiểu.

 $ style1: (tiền cảnh: $ tô màu,
Bối cảnh: $ Thứ cấp màu);
$ style2: (tiền cảnh: $ màu-chính,
Bối cảnh: $ Color-Highlight1);
$ style3: (Tiền cảnh: $ Color-Prime,
Bối cảnh: $ Color-Highlight2);
@Mixin theo kiểu nội dung ($ tiền cảnh,
$ nền) {
  Màu sắc: $ Tiền cảnh;
  Màu nền: $ Nền;
} 

13. Sử dụng mixin mới của bạn

 .Profile-Header {
  một {
    @include-style-style ($ style1 ...);
    // ...
  Không thể
Không thể
.profile-phần {
    @include-style-style ($ style2 ...);
  // ...
Không thể

14. Hiểu thừa kế.

Một tính năng rất mạnh mẽ của Sass là thừa kế. Ngay bây giờ chúng tôi có hai kiểu khác nhau cho các liên kết trong trang của chúng tôi. Nếu chúng ta muốn sử dụng các kiểu phổ biến trên cả hai, thay vì sao chép và dán CSS, tại sao chúng ta không sử dụng một lớp giữ chỗ, được ký hiệu là '%', có thể được mở rộng bởi cả hai, cho phép chúng kế thừa các kiểu của nó?

% chia sẻ liên kết {
  Kích thước phông chữ: 16px;
  lề-trái: 10px;
  Biên lợi nhuận: 10px;
  Đệm: 10px;
  Border-Radius: 10px;
Không thể

15. Mở rộng các lớp học

Bây giờ chúng ta có thể mở rộng lớp chia sẻ liên kết để xác định kiểu dáng liên kết trong toàn bộ trang web của chúng tôi. Điều này đang bắt đầu trông khá thanh lịch. Chúng tôi xác định một liên kết thường trông giống như một lần, hãy sử dụng lại nó trong suốt và chỉ định màu sắc từ bảng màu cho mỗi liên kết bằng Mixin.

 .Profile-Header {
  một {
    @Extend% chia sẻ liên kết;
    @include-style-style ($ style1 ...);
  Không thể
Không thể
một {
  @Extend% chia sẻ liên kết;
  @include-style-style ($ style3 ...);
Không thể

16. Sửa đổi chủ đề

Bây giờ chúng ta hãy xem cách dễ dàng Sass giúp nó sửa đổi chủ đề của trang web của chúng tôi. Các màu hiện tại có thể không hoàn hảo. Chúng tôi không thể chỉ sửa đổi các biến màu, nhưng chúng ta cũng có thể sử dụng một số hàm Sass để tạo ra các màu phù hợp với một chính đối với sự lựa chọn của chúng tôi.

 // _colours.scss
$ Color-Prime: # 2E1F27;
$ Màu thứ cấp: Lighten ($ Color-Prime,
25%);
$ Color-Light: Lighten ($ Color-Prime,
75%);
$ Color-Highlight1:
Lighten (bổ sung ($ Color-Prime), 50%);
$ Color-Highlight2:
làm sáng (bổ sung ($ màu thứ cấp), 50%);

17. Chọn một bộ màu mới

Bây giờ, chúng ta có thể sửa đổi toàn bộ bảng màu cho trang web chỉ bằng cách chỉ định một giá trị chính của màu mới trong _colours.scss. tập tin. Hãy thử nó bằng cách thử nghiệm với màu sắc thay thế. Chúng ta cũng có thể có SASS ngẫu nhiên nó (nhưng hãy nhớ rằng đây đề cập đến điểm mà trang web của bạn được xây dựng, không phải thời gian chạy). Bạn cũng có thể thử điều chỉnh logic, chúng tôi đang sử dụng để lấy được các màu khác trong chủ đề từ chính.

 $ Red: ngẫu nhiên (255);
$ xanh: ngẫu nhiên (255);
$ Blue: Ngẫu nhiên (255);
$ Color-Prime: RGB ($ Red, $ Green, $ Blue); 

18. Sử dụng Thư viện

Hệ thống mô-đun của Sass cũng rất đơn giản để sử dụng các thư viện của bên thứ ba với nỗ lực tối thiểu và không vận chuyển các tệp thời gian chạy lớn đến người dùng cuối của bạn. Hãy thử thư viện các cạnh góc cạnh, mà chúng ta có thể sử dụng để tạo các cạnh dốc cho các đối tượng trên trang của chúng tôi.

 git clone https://github.com/josephfusco/
angled-edges.git src / sass / cạnh góc

19. Các cạnh góc hỗn hợp mixin

Chúng ta có thể nhập các cạnh góc giống như cách chúng ta đã làm cho bảng màu của chúng tôi một phần. Sau đó, nó có thể sử dụng thông qua một hỗn hợp tàu với thư viện. Hãy thử nó trong lớp hồ sơ của chúng tôi.

 @Import "cạnh góc / _angled-edges.scss";
.profile-phần {
  @include góc cạnh ("bên ngoài đáy",
"Lower phải", $ Color-Highlight1);
  @include góc cạnh ("bên ngoài",
"Trên bên phải", $ Color-Highlight1);
  Margin: 120px 16px 120px 16px;
  // ...
Không thể

20. Định dạng đầu ra

Hãy kết thúc bằng cách nhìn vào Sass đầu ra tạo ra. Nếu bạn đã theo dõi các tệp CSS của mình như chúng tôi đã thực hiện các thay đổi, bạn sẽ nhận thấy chúng vẫn khá dễ đọc. Tuy nhiên, bạn cũng có thể có Sass Build CSS đặc, ít dễ đọc hơn nhưng vẫn sẵn sàng để vận chuyển. Bạn có thể làm điều này bằng cách sử dụng --Phong cách Cờ lệnh.

 Sass SRC / Sass /: Public / CSS / -Style
nén 

21. Khác Sass.

Bây giờ chúng tôi đã khám phá khá nhiều tính năng của Sass và trang web của chúng tôi không quá tệ. Hy vọng rằng bạn đang bắt đầu thấy Sass giúp chúng ta phát triển các tờ phong cách dễ bảo trì hơn. Chúng tôi chưa bao gồm mọi tính năng của ngôn ngữ - có nhiều chức năng hữu ích hơn được vận chuyển với nó và các tính năng nâng cao như các chỉ thị điều khiển (chẳng hạn như @nếu Cái gì @for. và @trong khi ) mà thường được sử dụng để tạo các chức năng thư viện phức tạp. Nhìn chung, hãy nhớ rằng Sass hoàn toàn là một sở thích phong cách. Bạn có thể làm mọi thứ chúng ta đã thấy với CSS thuần túy nếu bạn thích, nhưng bạn chắc chắn nên nghĩ về việc xử lý tiền xử lý khi công việc của bạn trở nên phức tạp hơn.

Bài viết này ban đầu được xuất bản trong số 282 của Nhà thiết kế web . Mua Vấn đề 282. hoặc là Đăng ký tại đây .

Đọc thêm:

• 10 công nghệ CSS mới tuyệt vời
• 3 thuộc tính CSS mới sáng bóng để thử ngày hôm nay
• Trang web cuộn Parallax tuyệt vời