作為一名新的 wordpress 主題設計師，您可以快速了解維護長css文件同時保持其組織性、可擴展性和可讀性的挑戰。

許多設計師和前端開發人員建議使用 sass 或 less 等 css 預處理器語言來使工作變得更容易。但這些東西是什么？您如何開始使用它們？

本文是為新的 wordpress 主題設計師介紹 Sass。我們將告訴您什么是 CSS 預處理器、為什么需要它以及如何立即安裝和開始使用它們。

什么是 Sass（語法很棒的樣式表）？

我們使用的CSS被設計為一種易于使用的樣式表語言。然而，網絡已經發展，因此設計人員需要一種樣式表語言，使他們能夠用更少的精力和時間做更多的事情。CSS 預處理器語言（例如 Sass）允許您使用 CSS 當前不可用的功能，例如變量、基本數學運算符、嵌套、混合等。

它與 php 非常相似，PHP 是一種預處理語言，可在服務器上執行腳本并生成 html 輸出。同樣，Sass 預處理 .scss 文件以生成可供瀏覽器使用的 CSS 文件。

從3.8 版本開始，WordPress 管理區域樣式被移植為利用 Sass 進行開發。許多 WordPress 主題商店和開發人員已經在使用 Sass 來加快他們的開發過程。

開始使用 Sass 進行 WordPress 主題開發

大多數主題設計者使用本地開發環境來處理他們的主題，然后將其部署到臨時環境或實時服務器。由于 Sass 是一種預處理器語言，因此您需要將其安裝在本地開發環境中。

您需要做的第一件事是安裝 Sass。它可以用作命令行工具，但也有一些不錯的 GUI 應用程序可用于 Sass。我們建議使用Koala，這是一款適用于 Mac、Windows 和 Linux 的免費開源應用程序。

為了本文的目的，您將需要創建一個空白主題。只需在 中創建一個新文件夾/wp-content/themes/。您可以將其命名為“mytheme”或任何您想要的名稱。在空白主題文件夾中創建另一個文件夾并將其命名為樣式表。

style.scss在樣式表文件夾中，您需要使用記事本等文本編輯器創建一個文件。

現在您需要打開 Koala 并單擊加號圖標來添加新項目。接下來，找到您的主題目錄并將其添加為您的項目。您會注意到，Koala 會自動在您的樣式表目錄中找到 Sass 文件并顯示它。

右鍵單擊您的 Sass 文件并選擇“設置輸出路徑”選項。現在選擇主題目錄的根目錄 example，/wp-content/themes/mytheme/然后按 Enter 鍵。Koala 現在將在您的主題目錄中生成 CSS 輸出文件。要測試這一點，您需要style.scss在記事本等文本編輯器中打開 Sass 文件并添加以下代碼：

$fonts: arial, verdana, sans-serif; body { font-family:$fonts;}

由

在 WordPress 中一鍵使用

現在您需要保存更改并返回 Koala。右鍵單擊您的 Sass 文件，側邊欄將滑入右側。要編譯 Sass 文件，只需單擊“編譯”按鈕即可。您可以通過打開主題目錄中的文件來查看結果style.css，它將具有處理后的 CSS，如下所示：

body {  font-family: arial, verdana, sans-serif; }

由

在 WordPress 中一鍵使用

$fonts請注意，我們在 Sass 文件中定義了一個變量。現在，每當我們需要添加字體系列時，我們不需要再次輸入所有字體的名稱。我們可以只使用$fonts.

Sass 為 CSS 帶來了哪些其他超能力？

Sass 非常強大、向后兼容并且超級容易學習。正如我們之前提到的，您可以創建變量、嵌套、混合、導入、部分、數學和邏輯運算符等。現在我們將向您展示一些示例，您可以在您的 WordPress 主題上嘗試它們。

管理多個樣式表

作為 WordPress 主題設計師，您將面臨的一個常見問題是包含很多部分的大型樣式表。在處理主題時，您可能會頻繁地上下滾動來修復問題。使用 Sass，您可以將多個文件導入到主樣式表中，并為您的主題輸出單個 CSS 文件。

CSS @import 怎么樣？

在 CSS 文件中使用 @import 的問題是，每次添加 @import 時，CSS 文件都會向服務器發出另一個 http 請求。這會影響您的頁面加載時間，這對您的項目不利。另一方面，當您在 Sass 中使用 @import 時，它將包含 Sass 文件中的文件，并將它們全部放在單個 CSS 文件中供瀏覽器使用。

要了解如何在 Sass 中使用 @import，首先需要reset.scss在主題的樣式表目錄中創建一個文件并將此代碼粘貼到其中。

/* http://meyerweb.com/eric/tools/css/reset/    v2.0 | 20110126   License: none (public domain)*/ html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {    margin: 0;    padding: 0;    border: 0;    font-size: 100%;    font: inherit;    vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {    display: block;}body {    line-height: 1;}ol, ul {    list-style: none;}blockquote, q {    quotes: none;}blockquote:before, blockquote:after,q:before, q:after {    content: '';    content: none;}table{    border-collapse: collapse;    border-spacing: 0;}

由

在 WordPress 中一鍵使用

現在您需要打開主 style.scss 文件并在要導入重置文件的位置添加此行：

@import 'reset';

由

在 WordPress 中一鍵使用

請注意，您不需要輸入完整的文件名。要編譯它，您需要打開 Koala 并再次單擊編譯按鈕。現在打開主題的主 style.css 文件，您將看到其中包含重置的 css。

薩斯中的巢蛋白

與 HTML 不同，CSS 不是嵌套語言。Sass 允許您創建易于管理和使用的嵌套文件。例如，您可以

.entry-content { p { font-size:12px;line-height:150%;  } ul { line-height:150%; }a:link, a:visited, a:active { text-decoration:none;color: #ff6633;} }

由

在 WordPress 中一鍵使用

處理后會輸出如下CSS：

.entry-content p {  font-size: 12px;  line-height: 150%; }.entry-content ul {  line-height: 150%; }.entry-content a:link, .entry-content a:visited, .entry-content a:active {  text-decoration: none;  color: #ff6633; }

由

在 WordPress 中一鍵使用

作為主題設計師，您將為小部件、帖子、導航菜單、標題等設計不同的外觀和感覺。在 Sass 中使用 Nestin 可以使其結構良好，并且您不必編寫相同的類、選擇器和標識符再次。

在 Sass 中使用 Mixin

有時，即使樣式規則相同，您也需要在整個項目中重用一些 CSS，因為您將在不同的選擇器和類上使用它們。這就是 mixins 派上用場的地方。讓我們將 mixin 添加到您的 style.scss 文件中：

@mixin hide-text{    overflow:hidden;    text-indent:-9000px;    display:block;}

由

在 WordPress 中一鍵使用

這個 mixin 基本上隱藏了一些文本的顯示。以下是如何使用此 mixin 隱藏徽標文本的示例：

.logo{    background: url("logo.png");    height:100px;    width:200px;    @include hide-text;}

由

在 WordPress 中一鍵使用

請注意，您需要使用@include添加 mixin。處理后會生成如下CSS：

.logo {  background: url("logo.png");  height: 100px;  width: 200px;  overflow: hidden;  text-indent: -9000px;  display: block; }

由

在 WordPress 中一鍵使用

Mixin 對于供應商前綴也非常有幫助。添加不透明度值或邊框半徑時，使用 mixins 可以節省大量時間。看這個例子，我們添加了一個 mixin 來添加邊框半徑。

@mixin border-radius($radius) {  -webkit-border-radius: $radius;     -moz-border-radius: $radius;      -ms-border-radius: $radius;       -o-border-radius: $radius;          border-radius: $radius;} .largebutton { @include border-radius(10px); }.smallbutton { @include border-radius(5px); }

由

在 WordPress 中一鍵使用

編譯后會生成如下CSS：

.largebutton {  -webkit-border-radius: 10px;  -moz-border-radius: 10px;  -ms-border-radius: 10px;  -o-border-radius: 10px;  border-radius: 10px; } .smallbutton {  -webkit-border-radius: 5px;  -moz-border-radius: 5px;  -ms-border-radius: 5px;  -o-border-radius: 5px;  border-radius: 5px; }

由

在 WordPress 中一鍵使用

其他資源

Sass Lang
Sass 之道

我們希望本文能幫助您了解用于 WordPress 主題開發的 Sass。許多 WordPress 主題設計師已經在使用它。有些人甚至說，將來所有 CSS 都將被預處理，WordPress 主題開發人員需要提高他們的水平。您可能還想查看我們為主題設計師提供的 WordPress 正文類提示指南，或者我們專家精選的最佳拖放 WordPress 頁面構建器。