Là một nhà thiết kế WordPress mới, bạn sẽ nhanh chóng tìm hiểu những thách thức trong việc duy trì các tệp CSS dài trong khi vẫn giữ chúng được tổ chức, khả năng mở rộng và dễ đọc. Bạn cũng sẽ biết rằng nhiều nhà thiết kế và nhà phát triển front-end khuyên bạn nên sử dụng một ngôn ngữ tiền xử lý CSS như Sass hoặc LESS. Nhưng những điều này là gì? và làm thế nào để bạn bắt đầu với họ? Bài viết này là một giới thiệu về Sass dành cho Nhà thiết kế Mới của WordPress. Chúng tôi sẽ cho bạn biết một tiền xử lý CSS là gì, tại sao bạn cần nó và cách cài đặt và bắt đầu sử dụng chúng ngay lập tức.
Sass là gì?
CSS mà chúng tôi sử dụng được thiết kế để dễ sử dụng ngôn ngữ biểu mẫu. Tuy nhiên web đã phát triển, và do đó là nhu cầu của nhà thiết kế để có một ngôn ngữ stylesheet cho phép họ làm nhiều hơn với ít nỗ lực và thời gian. Các ngôn ngữ tiền xử lý của CSS, như Sass, cho phép bạn sử dụng các tính năng hiện không có trong CSS như sử dụng các biến, toán tử toán cơ bản, làm tổ, trộn, vv
Nó rất giống với PHP mà là một ngôn ngữ tiền xử lý thực hiện một kịch bản trên máy chủ và tạo ra một đầu ra HTML. Tương tự như vậy, các tiền xử lý Sass .scss tệp để tạo các tệp CSS có thể được sử dụng bởi các trình duyệt.
Kể từ phiên bản 3.8, phong cách quản trị của WordPress đã được chuyển sang sử dụng Sass để phát triển. Có rất nhiều cửa hàng chủ đề WordPress và các nhà phát triển đã sử dụng Sass để đẩy nhanh quá trình phát triển của họ.
Bắt đầu với Sass for WordPress Phát triển Chủ đề
Hầu hết các nhà thiết kế chủ đề sử dụng môi trường phát triển địa phương để làm việc trên chủ đề của họ trước khi triển khai nó đến một môi trường dàn dựng hoặc một máy chủ trực tiếp. Vì Sass là một ngôn ngữ tiền xử lý, bạn sẽ cần phải cài đặt nó trên môi trường phát triển địa phương của bạn.
Điều đầu tiên bạn cần làm là cài đặt Sass. Nó có thể được sử dụng như là một công cụ dòng lệnh, nhưng cũng có một số Apps GUI tốt đẹp có sẵn cho Sass. Chúng tôi khuyên bạn sử dụng Koala, một ứng dụng miễn phí mở cho Mac, Windows và Linux.
Vì lợi ích của bài viết này, bạn sẽ cần phải tạo một chủ đề trống. Đơn giản chỉ cần tạo một thư mục mới trong / wp-content / themes / . Bạn có thể đặt tên nó là ‘thần thoại’ hoặc bất cứ điều gì khác mà bạn muốn. Bên trong thư mục chủ đề trống của bạn tạo ra một thư mục khác và đặt tên nó là stylesheets.
Trong thư mục stylesheets, bạn cần phải tạo một style.scss tập tin bằng cách sử dụng một trình soạn thảo văn bản như Notepad.
Bây giờ bạn cần mở Koala và nhấp vào biểu tượng dấu cộng để thêm một dự án mới. Tiếp theo, định vị thư mục chủ đề của bạn và thêm nó vào làm dự án của bạn. Bạn sẽ nhận thấy rằng Koala sẽ tự động tìm tệp Sass trong thư mục stylesheets của bạn và hiển thị nó.
Nhấp chuột phải vào tệp Sass của bạn và chọn Đặt đường dẫn ra Tùy chọn. Bây giờ hãy chọn thư mục gốc của thư mục chủ đề của bạn, ví dụ, / wp-content / themes / mytheme / và nhấn Enter. Koala bây giờ sẽ tạo tệp tin đầu ra CSS trong thư mục chủ đề của bạn. Để kiểm tra điều này bạn cần mở tập tin Sass của bạn style.scss trong một trình soạn thảo văn bản như Notepad và thêm mã này:
phông $: arial, verdana, sans-serif;
thân hình {
phông chữ gia đình: $ phông chữ;
}
Bây giờ bạn cần lưu lại những thay đổi của bạn và trở lại Koala. Nhấp chuột phải vào tệp Sass của bạn và thanh bên sẽ lướt sang bên phải. Để biên dịch tệp Sass của bạn chỉ cần nhấp chuột vào ‘Biên dịch’ nút. Bạn có thể xem kết quả bằng cách mở style.css tập tin trong thư mục chủ đề của bạn, và nó sẽ có CSS xử lý như thế này:
thân hình {
font-family: arial, verdana, sans-serif; }
Lưu ý rằng chúng ta đã xác định một biến phông chữ $ trong tập tin Sass của chúng tôi. Bây giờ bất cứ khi nào chúng ta cần thêm gia đình phông chữ chúng ta không cần phải gõ tên của tất cả các phông chữ một lần nữa. Chúng ta chỉ có thể sử dụng phông chữ $ .
Những siêu cường khác nào Sass mang đến CSS?
Sass là cực kỳ mạnh mẽ, tương thích ngược, và siêu dễ học. Như chúng ta đã đề cập trước đó, bạn có thể tạo các biến, tổ, mixins, import, partials, các toán tử toán học và logic … Bây giờ chúng ta sẽ chỉ cho bạn vài ví dụ và bạn có thể thử chúng trên chủ đề WordPress của bạn.
Quản lý nhiều Stylesheets
Một vấn đề phổ biến mà bạn sẽ phải đối mặt là một nhà thiết kế chủ đề WordPress là bảng định dạng lớn với nhiều phần. Có lẽ bạn sẽ được cuộn xuống và xuống rất nhiều để sửa chữa những thứ trong khi làm việc về chủ đề của bạn. Sử dụng Sass, bạn có thể nhập nhiều tệp vào biểu định kiểu chính và đưa ra một tệp CSS duy nhất cho chủ đề của bạn.
Điều gì về CSS @import?
Vấn đề với việc sử dụng @import trong tệp tin CSS của bạn là mỗi khi thêm một @import, tệp CSS của bạn sẽ yêu cầu HTTP khác cho máy chủ. Điều này sẽ ảnh hưởng đến thời gian tải trang của bạn mà không tốt cho dự án của bạn. Mặt khác, khi bạn sử dụng @import trong Sass, nó sẽ bao gồm các tệp tin trong tệp Sass của bạn và phục vụ chúng trong một tệp CSS duy nhất cho các trình duyệt.
Để tìm hiểu cách sử dụng @import trong Sass, trước tiên bạn cần phải tạo một reset.scss tập tin trong thư mục stylesheets của chủ đề và dán mã này vào đó.
/ * http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
Giấy phép: không có (miền công cộng)
* /
html, body, div, span, applet, đối tượng, khung nội tuyến,
h1, h2, h3, h4, h5, h6, p, blockquote, trước,
a, abbr, viết tắt, địa chỉ, lớn, trích dẫn, mã,
del, dfn, em, img, ins, kbd, q, s, samp,
nhỏ, đình công, mạnh, phụ, sup, tt, var,
b, u, i, trung tâm,
dl, dt, dd, ol, ul, li,
fieldset, hình thức, nhãn, huyền thoại,
bảng, chú thích, tbody, tfoot, thead, tr, th, td,
bài viết, sang một bên, vải, chi tiết, nhúng,
con số, figcaption, chân trang, tiêu đề, hgroup,
menu, nav, đầu ra, ruby, phần, tóm tắt,
thời gian, nhãn hiệu, âm thanh, video {
lề: 0;
đệm: 0;
biên giới: 0;
cỡ chữ: 100%;
font: kế thừa;
dọc-align: đường cơ sở;
}
/ * Cài đặt hiển thị vai trò HTML5 cho các trình duyệt cũ hơn * /
bài báo, sang một bên, chi tiết, figcaption, figure,
chân trang, tiêu đề, hgroup, menu, nav, section {
hiển thị: khối;
}
thân hình {
chiều cao dòng: 1;
}
ol, ul {
danh sách-phong cách: không có;
}
blockquote, q {
báo giá: không có;
}
blockquote: trước, blockquote: sau,
q: trước, q: sau {
Nội dung: '';
nội dung: không có;
}
bàn {
biên giới sụp đổ: sụp đổ;
khoảng cách biên giới: 0;
}
Bây giờ bạn cần mở tệp tin style.scss chính của bạn và thêm dòng này vào nơi bạn muốn nhập lại tập tin đặt lại:
@import 'đặt lại';
Lưu ý rằng bạn không cần nhập tên tệp đầy đủ. Để biên dịch điều này, bạn cần mở Koala và nhấp vào nút biên dịch một lần nữa. Bây giờ mở tập tin style.css chủ đề của chủ đề, và bạn sẽ thấy css đặt lại của bạn có trong nó.
Nestin trong Sass
Không giống như HTML, CSS không phải là ngôn ngữ lồng nhau. Sass cho phép bạn tạo các tệp lồng nhau dễ quản lý và làm việc với. Ví dụ: bạn có thể xếp tất cả các phần tử cho
, dưới trình chọn bài viết. Là một nhà thiết kế chủ đề WordPress, điều này cho phép bạn làm việc trên các phần khác nhau và phong cách mỗi yếu tố một cách dễ dàng. Để xem nestin đang hoạt động, hãy thêm nó vào style.scss tập tin:
.entry-content {
p {
kích thước phông chữ: 12px;
chiều cao: 150%;
}
ul {
chiều cao: 150%;
}
a: link, a: visited, a: active {
văn bản-trang trí: không có;
màu: # ff6633;
}
}
Sau khi xử lý nó sẽ xuất ra các CSS sau đây:
.entry-nội dung p {
kích thước phông chữ: 12px;
chiều cao: 150%; }
.entry-nội dung ul {
chiều cao: 150%; }
.entry-content a: link, .entry-content a: truy cập, .entry-content a: active {
văn bản-trang trí: không có;
màu: # ff6633; }
Là một nhà thiết kế chủ đề, bạn sẽ thiết kế kiểu dáng và cảm nhận khác nhau cho vật dụng, bài viết, menu điều hướng, tiêu đề … Sử dụng nestin trong Sass làm cho nó có cấu trúc tốt, và bạn không phải viết cùng các lớp, selectors và định danh qua và hơn một lần nữa.
Sử dụng Mixins trong Sass
Đôi khi bạn cần phải sử dụng lại một số CSS thông qua các dự án của bạn mặc dù các quy tắc kiểu dáng sẽ giống nhau bởi vì bạn sẽ sử dụng chúng trên các bộ chọn và lớp khác nhau. Đây là nơi mixins có ích. Cho phép thêm một mixin vào tệp tin style.scss của bạn:
@mixin ẩn văn bản {
tràn: ẩn;
text-indent: -9000px;
hiển thị: khối;
}
Điều này mixin cơ bản giấu một số văn bản từ đang được hiển thị. Dưới đây là một ví dụ về cách bạn có thể sử dụng hỗn hợp này để ẩn văn bản cho biểu trưng của mình:
.Logo{
nền: url ("logo.png");
chiều cao: 100px;
chiều rộng: 200px;
@ bao gồm ẩn văn bản;
}
Lưu ý rằng bạn cần sử dụng bao gồm để thêm một mixin. Sau khi xử lý, nó sẽ tạo ra CSS sau:
.Logo {
nền: url ("logo.png");
chiều cao: 100px;
chiều rộng: 200px;
tràn: ẩn;
text-indent: -9000px;
hiển thị: khối; }
Mixins cũng rất hữu ích với tiền tố của nhà cung cấp. Khi thêm giá trị opacity hoặc bán kính biên, sử dụng mixins bạn có thể tiết kiệm rất nhiều thời gian. Xem ví dụ này, nơi chúng tôi đã thêm một mixin để thêm bán kính biên giới.
@mixin đường viền bán kính ($ bán kính) {
-bộ phận mạng-biên giới bán kính: bán kính $;
-moz-border-bán kính: bán kính $;
-mảng-bán kính-bán kính: bán kính $;
-miền biên: bán kính $;
bán kính biên: bán kính $;
}
. largebutton {@include border-radius (10px); }
.smallbutton {@include border-radius (5px); }
Sau khi biên dịch, nó sẽ tạo ra CSS sau:
.largebutton {
-bộ phận bộ nhớ-biên giới: 10px;
-moz-border-bán kính: 10px;
-ms-biên-bán kính: 10px;
-miền biên giới: 10px;
bán kính biên giới: 10px; }
.smallbutton {
-bộ phận mạng-bán kính-biên giới: 5px;
-moz-border-bán kính: 5px;
-ms-biên bán kính: 5px;
-miền biên giới: 5px;
bán kính biên giới: 5px; }
Chúng tôi hy vọng rằng bài báo này đã làm cho bạn quan tâm đến việc phát triển chủ đề Sass cho WordPress. Nhiều nhà thiết kế chủ đề WordPress đã sử dụng nó. Một số đi xa như để nói rằng trong tương lai tất cả CSS sẽ được preprocessed, và WordPress chủ đề phát triển cần phải lên trò chơi của họ. Hãy cho chúng tôi biết suy nghĩ của bạn về việc sử dụng một ngôn ngữ tiền xử lý của CSS như Sass cho phát triển chủ đề WordPress bằng cách để lại nhận xét dưới đây.
Nguồn bổ sung
Sass Lang
Sass Way