適用於新WordPress主題設計師的Sass簡介


作為一名新的WordPress主題設計師,您將很快學習維護長CSS文件同時保持其組織性,可伸縮性和可讀性的挑戰。 您還將了解許多設計人員和前端開發人員建議使用CSS預處理程序語言,例如Sass或LESS。 但是這些是什麼? 以及您如何開始使用它們? 本文是針對新WordPress主題設計師的Sass簡介。 我們將告訴您什麼是CSS預處理器,為什麼需要它,以及如何立即安裝和開始使用它們。

Sass-具有超能力的CSS

什麼是薩斯?

我們使用的CSS被設計為易於使用的樣式表語言。 然而,網絡已經發生了發展,設計師也需要一種樣式表語言,以允許他們以更少的精力和時間來做更多的事情。 CSS預處理器語言(例如Sass)允許您使用CSS中當前不可用的功能,例如使用變量,基本數學運算符,嵌套,mixins等。

它非常類似於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文件,然後選擇 設定輸出路徑 選項。 現在,選擇主題目錄的根目錄,例如, /wp-content/themes/mytheme/ 然後按回車。 現在,Koala將在主題目錄中生成CSS輸出文件。 要對此進行測試,您需要打開您的Sass文件 style.scss 在記事本之類的文本編輯器中,添加以下代碼:

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

現在,您需要保存更改並返回到Koala。 右鍵單擊您的Sass文件,側欄將在右側滑動。 要編譯您的Sass文件,只需單擊 ‘編譯’ 按鈕。 您可以通過打開 style.css 文件放在主題目錄中,它將具有如下處理的CSS:

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

注意我們已經定義了一個變量 $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;
}

現在,您需要打開您的主要style.scss文件,並在要導入重置文件的位置添加以下行:

@import 'reset';

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

Nestin in Sass

與HTML不同,CSS不是嵌套語言。 Sass允許您創建易於管理和使用的嵌套文件。 例如,您可以將所有元素嵌套

部分,在文章選擇器下。 作為WordPress主題設計師,這使您可以處理不同的部分並輕鬆設置每個元素的樣式。 要查看Nestin的實際效果,請將其添加到 style.scss 文件:

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

處理後,將輸出以下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; }

作為主題設計師,您將為小部件,帖子,導航菜單,標題等設計不同的外觀。在Sass中使用nestin使其結構良好,並且不必在和之上編寫相同的類,選擇器和標識符。再次。

在Sass中使用Mixins

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

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

這個混入基本上隱藏了一些文本,使其無法顯示。 這是一個示例,說明如何使用此mixin隱藏徽標的文本:

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

請注意,您需要使用 @include 添加一個mixin。 處理後,將生成以下CSS:

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

Mixins對供應商前綴也很有幫助。 在添加不透明度值或邊界半徑時,使用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); }

編譯後,它將生成以下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; }

我們希望本文引起您對Sass進行WordPress主題開發的興趣。 許多WordPress主題設計師已經在使用它。 有人甚至說,將來所有CSS都將被預處理,而WordPress主題開發人員需要改進他們的遊戲。 通過在下面留下評論,讓我們知道您對使用諸如Sass這樣的CSS預處理程序語言進行WordPress主題開發的想法。

其他資源

薩斯·朗
無禮的方式