改用SCSS後,我在本機測試調整CSS的流程變成:瀏覽器F12開發者工具檢視CSS樣式 –> 回Visual Studio 2013調整SCSS –> SCSS存檔(VS2013編譯產生CSS)—> 瀏覽器重新載入網頁檢視修改結果。由於SPA(Single Page Application)專案每次載入後有一連串起始作業,只為了更新CSS重新載入HTML、重頭執行JavaScript嚴重拖慢開發節奏,做完動作要等半天才能看結果,對急驚風而言宛如酷刑,不另謀改善之道,遲早心臟病發。
Visual Studio 2013的BrowserLink功能強大,能將HTML、JavaScript及CSS修改後自動同步到瀏覽器,也支援靜態HTML檔,理論上適用SPA。或許是程式複雜,遇過幾次跟BrowserLink打架的經驗,反正原理不難,不如就動手做一顆動態更新CSS的小按鈕,順便享受DIY樂趣吧!
操所效果如上圖,在網頁右上方嵌入一個「更新CSS」小按鈕,按下使用JavaScript更改<link href="Content/style.css"> URL,在後方加上亂數Query String,強迫瀏覽器載入更新後的CSS,即可完成動態抽換CSS操作。程式範如下:
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<linkhref="Content/style.css"rel="stylesheet"/>
<scriptsrc="Scripts/jquery-2.1.1.js"></script>
</head>
<body>
<div class="title">darkthread</div>
<script>
$(function () {
var $btn = $("<button>更新CSS</button>");
$btn
.css({
position: "absolute", "z-index": 100,
top: "6px", right: "6px", fontSize: "9pt"
})
.on("click",
function () {
document.getElementsByTagName("link")[0].href =
"Content/style.css?_=" + Math.random();
})
.appendTo("body");
});
</script>
</body>
</html>