iT邦幫忙

DAY 6
0

網頁設計師指南——從前端到後端系列 第 6

網頁設計師指南——從前端到後端(六)Jade 和 Stylus

在完成 express.js 的「安裝」後,我們要回到前端,來將設計「切板」出來了。不過嚴格來講,我們的設計可以完全由CSS來完成,所以其實是無圖可切的。在這個專案,我們採用了 Jade 和 Stylus,所以我們不會直接寫 HTML 和 CSS。

Jade 的語法是用一個 css selector 來代表一個 HTML,並且使用縮排,不需要結尾標簽。所以寫起來十分簡潔快速。例如

article#main
     h1.title 文章標題
     p 文章內容
     p 文章內容

會編譯成

<article id="main">
     <h1 class="title">文章標題</h1>
     <p>文章內容</p>
     <p>文章內容</p>
</article>

Stylus 則是一個可以編譯成 CSS 的語法。他有各種功能讓你節省寫 CSS 的時間。同時讓你可以省略分號和大括號,用縮排取代。例如我可以寫

.header
  a
    color: red

會編譯成

.header a {
color: red;
}

在這個專案中,我們也用 bootstrap,加速我們的開發。用了 bootstrap之後,我們可以一行 CSS 都不寫,只寫 HTML 就完成與 PSD 9成像的頁面。

再修改一下CSS,就完成我們的「切板」了。


上一篇
網頁設計師指南——從前端到後端(五)express.js
下一篇
網頁設計師指南——從前端到後端(七)MongoDB 和 Mongoose
系列文
網頁設計師指南——從前端到後端15

尚未有邦友留言

立即登入留言