使用Restyle.js簡化CSS預處理

Andrea Giammarchi的restyle.js是一個新的，基于JavaScript的CSS預處理器，能夠運行在服務端（通過Node.js）或者瀏覽器中。它宣稱自己是“一種簡化的CSS方法”，能夠生成CSS規則和屬性的所有前綴變化，如果合適的話，自動插入到DOM中。

關于CSS預處理器基本沒有什么不足之處，但Andrea表示還沒有哪種輕量級的預處理器能夠同時適用于服務端和客戶端：

在你認為“又一個CSS預處理器”之前，我想告訴你，我問過周圍一些常見的、知名的CSS或者普通Web開發人員，似乎還沒有這樣的小腳本……一旦 你了解它，你也許會想“怎么之前沒人做這個呢？”我的想法是可能人有做了，但我不確定它能小到0.8KB而且同時兼容服務端和甚至IE 6這樣的客戶端……因此，我們正在談論的是restyle。

</blockquote>

該庫暴露了一個單獨的方法restyle()，它有兩個參數。第一個參數是JavaScript對象，其語法接近于CSS和DOM樣式編輯。示例如下：

 restyle({ 
    'body > div.my-div': { 
        backgroundColor: 'goldenrod', 
        backgroundImage: 'url(mybg.png)' 
    } 
}); 

它將生成以下CSS：

 body > div.my-div { 
    background-color: goldenrod; 
    background-url: url(mybg.png); 
} 

我們也可以用不同的方式指定JavaScript對象，達到相同的結果：

restyle({ 
    'body > div.my-div': { 
        background: { 
            color: 'goldenrod', 
            image: 'url(mybg.png)' 
        } 
    } 
}); 

當然，到目前為止，這沒什么特別的而且也沒有減少標記，即使有，也很細微。但是當你在處理更繁瑣的CSS時，例如供應商前綴，restyle將發揮其強大功能。第二個參數允許你指定供應商前綴，用于生成結果，示例如下：

 restyle({ 
    '.my-div': { 
        transition: 'background-color 500ms ease'; 
        backgroundColor: '#00f'; 
    } 
}, ['moz', 'webkit']); 

將生成以下CSS：

.my-div { 
    -webkit-transition: background-color 500ms ease; 
    -moz-transition: background-color 500ms ease; 
    transition: background-color 500ms ease; 
    background-color: #00f; 
} 

在編寫動畫規則時，這就顯得非常方便。少量代碼就能轉換成大量包含供應商前綴的規則和CSS屬性代碼，而這只需要很少的付出。在服務端，省略第二個參數將不生成前綴。而在客戶端，不論當前執行代碼的是哪種客戶端，restyle.js都將生成所有常見供應商前綴。

根據不同的環境，restyle()方法將返回不同的結果。在Node.js中，它返回包含CSS結果的字符串。而在瀏覽器中，會將CSS自動插入 到DOM中，讓其立即生效，返回值是一個方便的小對象，包括屬性結點（結果樣式元素）、CSS（包括CSS結果的字符串）和一個單獨的方法 remove()，該方法用于從DOM中刪除已經插入的樣式。

這個簡單的示例網頁，讓你能夠編寫代碼并通過restyle.js生成結果。正如Andrea的博客中一些評論所指出的，restyle.js與類似的庫AbsurdJS基于相同的思想，但后者更大且功能更全。Restyle.js只有十分之一的大小，真的是一個輕量級，有趣的CSS預處理器，值得一看。你可以查看readme開始學習如何使用。

原文英文鏈接：Simplified CSS Preprocessing with restyle.js

來自：http://www.infoq.com/cn/news/2014/02/restylejs

 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

  本文地址：http://www.baiduhome.net/news/view/4d59de

Restyle.js