用stylus將styl文件直接轉換成css文件

言

相信許多程序員在寫web的樣式時，會新建css文件來分離html和style 可是在寫css文件時，一旦遇到子元素的部分樣式和父元素不同時，就需要另起一行寫子元素的樣式，有沒有一種更快的方式，是css的寫法更加快捷、方便呢，我們就要提到stylus了。

準備工作

本次我們會使用stylus去寫css樣式，接下來就是將styl文件轉換成css文件的方法

命令行工具

全局安裝Stylus編譯器：首先確保你已經安裝了Node.js，然后在命令行中運行以下命令來全局安裝Stylus：

1npm install -g stylus

編譯單個文件：安裝完成后，你可以通過命令行直接將Stylus文件轉換為CSS。例如，如果你有一個名為input.styl的文件，想要將其編譯為output.css，可以在該文件所在的目錄下運行：

1stylus input.styl -o output.css

監聽文件變化自動編譯：如果你想在每次編輯Stylus文件后自動重新編譯CSS，可以加上-w或--watch參數：

1stylus -w input.styl -o output.css

集成開發環境（IDE）支持

大多數現代IDE（如Visual Studio Code、WebStorm等）都提供了通過插件或內置功能支持Stylus編譯的功能。通常，你可以在IDE的設置中配置文件監視器（File Watcher），使其在Stylus文件保存時自動編譯為CSS。

構建工具集成

如果你的項目使用了構建工具如Gulp、Grunt或Webpack，你可以通過相應的插件來集成Stylus編譯過程到構建流程中。例如，在Webpack中，你可以使用stylus-loader。

Vue.js項目中使用

對于基于Vue.js的項目，如果你使用了Vue CLI，可以通過配置vue.config.js來添加對Stylus的支持。Vue CLI默認支持Stylus，但你可能需要安裝額外的依賴，如stylus-loader和stylus，并在配置文件中添加對應的規則。

示例配置（Vue CLI）:

Js
1// vue.config.js
2module.exports={
3  css: {
4    loaderOptions: {
5      stylus: {
6        additionalData: `// 在這里可以導入全局變量或mixins
7        @import "~@/styles/variables.styl";`,
8      },
9    },
10  },
11};

確保已經安裝了必要的依賴：

Sh
1npm install stylus stylus-loader --save-dev

以上方法可以幫助你根據不同的場景和需求將Stylus文件轉換為CSS文件。

styl文件格式

在使用前，我們先了解一下為什么用styl文件寫樣式，而不是css文件

stylus css 超集，支持預編譯省事{}:;都不需要了，取而代之的是tab 縮進用的是編譯后的css文件就比如在css中要寫

*{
    margin: 0px;
    padding: 0px;
}

在styl中只用,只要用tab和空格就可以

*
    margin 0
    padding 0

更者在寫父樣式中的子樣式時，用css 如果子樣式中存在不同的要求,就需要寫兩個

body{
    magin: 0px;
    padding: 0px;
    background-color:black;
}
body .box{
    magin: 0px;
    padding: 0px;
    background-color:white
    }

而在styl中只需要

body
    magin: 0px;
    padding: 0px;
    background-color:black;
    .box
        magin: 0px;
    padding: 0px;
    background-color:white

在做好準備工作后，我們另創建一個文件，就在集成終端輸入
'stylus -w 11.styl -o 11.css'
這就是創建成功，直接在styl文件里輸樣式

接下來就可以在styl文件中寫入你喜歡的樣式，每次寫完按下Ctrl+s鍵保存，就會自動在css文件里展現出來了

擊右上方紅色按鈕關注“web秀”，讓你真正秀起來

前言

前端是一個苦逼的職業，不僅因為技術更新快，而且要會的東西實在太多了，更讓人頭疼的是，還要面臨各種適配、兼容性問題。

4種方案解決CSS瀏覽器兼容性問題

為什么會有瀏覽器兼容性問題？

還不是因為瀏覽器廠商太多了！

Chrome，Frirefox，Safari，Edge，IE6，IE7，IE8，IE9...360安全瀏覽器，qq瀏覽器，世界之窗，TT，搜狗，opera，maxthon（傲游）……

關鍵是不同廠商，甚至同一廠商不同版本，對同一段CSS的解析效果也不一致，這就導致了頁面顯示效果不統一，也就帶來了兼容性問題。

多么希望Chrome能夠一統江湖啊~~

4種方案解決CSS瀏覽器兼容性問題

目前各瀏覽器市場份額

瀏覽器這么多，我們也不可能每一個都要去兼容，對于用戶量一般的產品，把主流瀏覽器的適配做好，就已經很不錯啦。

根據百度流量研究院提供的2018年8月至2019年2月的數據可以看出，Chrome占比46.28%，IE系仍然占有很大比重，任重而道遠啊~

4種方案解決CSS瀏覽器兼容性問題

CSS瀏覽器兼容性問題的解決思路和方案

今天，不想去關注太多細節問題，比如那個css樣式需要我們去兼容，而是想討論一下大的解決思路，主要包括4個方面，瀏覽器CSS樣式初始化、瀏覽器私有屬性，CSS hack語法和自動化插件。

1. 瀏覽器CSS樣式初始化

由于每個瀏覽器的css默認樣式不盡相同，所以最簡單有效的方式就是對其進行初始化，相信很多朋友都寫過這樣的代碼，在所有CSS開始前，先把marin和padding都設為0，以防不同瀏覽器的顯示效果不一樣。

*{ 
 margin: 0; 
 padding: 0; 
}

關于瀏覽器CSS樣式初始化，經驗不豐富的話，可能也不知道該初始化什么，這里給大家推薦一個庫，Normalize.css，github star數量接近3.4萬，選取展示其中幾個樣式設置，如下

html { 
 line-height: 1.15; /* Correct the line height in all browsers */ 
 -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. */ 
} 
 
body { 
 margin: 0; 
} 
 
a { 
 background-color: transparent; /* Remove the gray background on active links in IE 10. */ 
} 
 
img { 
 border-style: none; /* Remove the border on images inside links in IE 10. */ 
}

通過CSS樣式初始化，相信能解決不少常規的兼容性問題，接下來再看看瀏覽器的私有屬性。

2. 瀏覽器私有屬性

我們經常會在某個CSS的屬性前添加一些前綴，比如-webkit-，-moz- ，-ms-，這些就是瀏覽器的私有屬性。

為什么會出現私有屬性呢？這是因為制定HTML和CSS標準的組織W3C動作是很慢的。

通常，有W3C組織成員提出一個新屬性，比如說圓角border-radius，大家都覺得好，但W3C制定標準，要走很復雜的程序，審查等。而瀏覽器商市場推廣時間緊，如果一個屬性已經夠成熟了，就會在瀏覽器中加入支持。

但是為避免日后W3C公布標準時有所變更，會加入一個私有前綴，比如-webkit-border-radius，通過這種方式來提前支持新屬性。等到日后W3C公布了標準，border-radius的標準寫法確立之后，再讓新版的瀏覽器支持border-radius這種寫法。常用的前綴有：

-moz代表firefox瀏覽器私有屬性
-ms代表IE瀏覽器私有屬性
-webkit代表chrome、safari私有屬性
-o代表opera私有屬性

對于私有屬性的順序要注意，把標準寫法放到最后，兼容性寫法放到前面

 -webkit-transform:rotate(-3deg); /*為Chrome/Safari*/ 
 -moz-transform:rotate(-3deg); /*為Firefox*/ 
 -ms-transform:rotate(-3deg); /*為IE*/ 
 -o-transform:rotate(-3deg); /*為Opera*/ 
 transform:rotate(-3deg);

每個CSS屬性寫這么一堆兼容性代碼，無疑是對生命最大的浪費，后面我們會講一下通過自動化插件來處理這塊。

3. CSS hack

有時我們需要針對不同的瀏覽器或不同版本寫特定的CSS樣式，這種針對不同的瀏覽器/不同版本寫相應的CSS code的過程，叫做CSS hack!

CSS hack的寫法大致歸納為3種：條件hack、屬性級hack、選擇符級hack。

條件hack

條件hack主要針對IE瀏覽器進行一些特殊的設置

語法：

<!--[if <keywords>? IE <version>?]> 
 代碼塊，可以是html，css，js 
<![endif]-->

取值

keywords

if后面跟的條件共包含6種選擇方式：是否、大于、大于或等于、小于、小于或等于、非指定版本

是否：指定是否IE或IE某個版本。關鍵字：空

大于：選擇大于指定版本的IE版本。關鍵字：gt（greater than）

大于或等于：選擇大于或等于指定版本的IE版本。關鍵字：gte（greater than or equal）

小于：選擇小于指定版本的IE版本。關鍵字：lt（less than）

小于或等于：選擇小于或等于指定版本的IE版本。關鍵字：lte（less than or equal）

非指定版本：選擇除指定版本外的所有IE版本。關鍵字：!

version

IE瀏覽器版本，如6、7、8

IE10及以上版本已將條件注釋特性移除，使用時需注意。

舉例

<!--[if IE]> 
 <p>你在非IE中將看不到我的身影</p> 
<![endif]--> 
 
<!--[if IE]> 
<style> 
 .test{color:red;} 
</style> 
<![endif]--> 
 
<!--[if lt IE 9]> 
 <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
 <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> 
<![endif]-->

屬性級hack

屬性hack就是在CSS樣式屬性名前加上一些只有特定瀏覽器才能識別的hack前綴。

語法：

 selector{<hack>?property:value<hack>?;}

取值：

：選擇IE6及以下。連接線（中劃線）（-）亦可使用，為了避免與某些帶中劃線的屬性混淆，所以使用下劃線（）更為合適。

：選擇IE7及以下。諸如：（+）與（#）之類的均可使用，不過業界對（）的認知度更高

：選擇IE6+

>\0：選擇IE8+和Opera15以下的瀏覽器<：選擇IE8+和Opera15以下的瀏覽器

舉例

如在不同的IE瀏覽器中設置不同的顏色，注意順序：低版本的兼容性寫法放到最后

.test {
 color: #090\9; /* For IE8+ */
 *color: #f00; /* For IE7 and earlier */
 _color: #ff0; /* For IE6 and earlier */
}

選擇符級hack

選擇符級hack是針對一些頁面表現不一致或者需要特殊對待的瀏覽器，在CSS選擇器前加上一些只有某些特定瀏覽器才能識別的前綴進行hack。

語法：

<hack> selector{ sRules }

取值：
常見的選擇符級hack有

*html *前綴只對IE6生效 
*+html *+前綴只對IE7生效 
@media screen\\9{...}只對IE6/7生效 
@media \\0screen {body { background: red; }}只對IE8有效 
@media \\0screen\\,screen\\9{body { background: blue; }}只對IE6/7/8有效 
@media screen\\0 {body { background: green; }} 只對IE8/9/10有效 
@media screen and (min-width:0\\0) {body { background: gray; }} 只對IE9/10有效 
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對IE10有效

舉例：

* html .test { color: #090; } /* For IE6 and earlier */ 
* + html .test { color: #ff0; } /* For IE7 */

看到這里，我不得不為前端人員自豪，這也太難了吧~~

不過花大力氣解決這些兼容性問題，并不能給我們技術上帶來什么大的提升，無非是給各個瀏覽器廠商填坑罷了，隨著時間的流逝，這些技術的價值也會越來越小，怎么花最小的力氣解決css兼容性問題，讓我們把更多的時間留給美好的生活，才是關鍵，好在有一些自動化插件可以幫我們從繁重的兼容性處理中解脫處理。

4. 自動化插件

Autoprefixer是一款自動管理瀏覽器前綴的插件，它可以解析CSS文件并且添加瀏覽器前綴到CSS內容里，使用Can I Use（caniuse網站）的數據來決定哪些前綴是需要的。

把Autoprefixer添加到資源構建工具（例如Grunt）后，可以完全忘記有關CSS前綴的東西，只需按照最新的W3C規范來正常書寫CSS即可。如果項目需要支持舊版瀏覽器，可修改browsers參數設置。

//我們編寫的代碼 
div { 
 transform: rotate(30deg); 
} 
 
// 自動補全的代碼，具體補全哪些由要兼容的瀏覽器版本決定，可以自行設置 
div { 
 -ms-transform: rotate(30deg); 
 -webkit-transform: rotate(30deg); 
 -o-transform: rotate(30deg); 
 -moz-transform: rotate(30deg); 
 transform: rotate(30deg); 
}

目前webpack、gulp、grunt都有相應的插件，如果還沒有使用，那就趕緊應用到我們的項目中吧，別再讓CSS兼容性浪費你的時間！

公告

喜歡小編的點擊關注，了解更多知識！

備

Script Lab 初級程教程己經靠一段落，前后共了9篇，作為 OfficeJS 開發入門己經綴綴有余。假設你使用Script Lab 創建了一個加載項的片段，那么你一定想把它變成一個一個獨立的加載項。經過反復的償試，還真找到一個最佳方法，可以輕松將代碼片段轉換為 OfficeJS 加載項。接著我們將進入第二階段，向正式的 Web Add-ins 開發進軍。

今天的內容將涉及大量的實操和安裝過程，基本上是照著流程一步步來完成，半以一個最簡單的 Script Lab 示例來操作，來最終完成一個 Web Add-ins 插件。

工具

這次我們將使用 VSCode 而不是 VS 來開發OfficeJS（Office 365 Web Add-ins）。VSCode 是一個非常有用的輕量級的代碼編輯工具（就是這兩天，許豪同志還在籌備相關的教程或專場）。除此之外，還需要兩個輔助的工具，第一個是 Node Package Manager（NPM），和 Git 工具。通過 NPM 還將安裝 Yoeman ，通過 yo 與 Git 等工具的配合，我們也將擁有一個令人驚訝的強大開發環境，說實話回到字符界面，就像回到 90 年代還在玩 DOS 的過程，“握控一切”的感覺實在是太好了（用了 VS 就不俱備了）。

【VSCode】

下載并安裝VSCode，網址如下：

https：//code.visualstudio.com/

【nodejs】

下載并安裝Node以獲取節點包管理器（NPM），網址如下：

https：//nodejs.org/en/download/

【Git】

下載并安裝Git，網址如下：

https：//git-scm.com/download

Yeoman

【CNPM 】

三大基礎工具裝好后，接著就是開始著 Yeoman 的安裝了。之前的安裝過程還都有順利，但是到了這個環節時，還是遇到了一些小小的麻煩。網速問題導致晚上無法更新完成。臨近11：30了，還沒有見到安裝完成的希望。今天這篇公眾號文章，看樣子是沒辦法完整的發出了，自打1月22日開號以來，可能是第一次斷更的情況了。求助萬能的大牛群 dotnet跨平臺(飛雪)交流群，果然得到了答案，方知在國內該使用 cnpm 才對，并且得到了正確的命令（感謝瑋仔Wayne 的指導）。

我們現在需要做的是安裝 CNPM，按以下流程操作：

打開VSCode
按CTRL +`。這將打開控制臺窗口。或者，您可以轉到“視圖”菜單，然后單擊“集成終端”
切換到控制臺中的終端，然后鍵入以下命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org

【Yeoman】

yeoman 是 Google 的團隊和外部貢獻者團隊合作開發的，他的目標是通過 Grunt（一個用于開發任務自動化的命令行工具）和 Bower（一個HTML、CSS、Javascript和圖片等前端資源的包管理器）的包裝為開發者創建一個易用的工作流。

cnpm install -g yo

安裝 yeoman，其中 install 是命令代表了安裝，-g 是參數代表了全局，yo 是項目簡稱。安裝過程竟然只需要半分就完成了：

【Office模板】

yoeman 其實是一個模板加載工具，也叫生成器（generator），我們這里需在的是 Office 的模板，yoeman 還俱備查詢功能，我們直接查詢 Office 相關的模板。查到有兩個跟Office相關的項目，我們得到了以下這條命令：

npm install -g generator-office

默認會安裝最新的Office模板@1.1.26，但是我推薦使用@1.1.5版本，俱備可以選擇不建目錄，最后還會有一個設置導航。

npm install -g generator-office@1.1.5

在知道原理后，我這里再提供一個更簡單的安裝方法，這里兩個可以一并安裝了：

npm install -g yo generator-office@1.1.5

創建

【代碼片段】

在 GitHubGist 上（https://gist.github.com/）組合搜索“yaml excel colorful”，其中 yaml 表示 Script Lab 代碼片段，excel 表示這類插件，colorful 也可以替換所你感興趣其它內容，以下為搜集結果：

復制整個 yaml 格式的代碼模板：

【導出清單代碼】

將剛才復制的代碼導入到 Script Lab 中，通過導入命令，貼入完整代碼即可：

導出清單（manifest）和代碼（html）

解壓縮后得到，得到四個文件，新建一個目錄，并將上面兩個文件制復過去：

colorful-patterns.htmlcolorful-patterns--manifest.xmlcolorful-patterns--snippet-data.yamlREADME.md

【生成項目】

在 VSCODE 中，通過一句命令，來創建 Office Add-in 項目：

yo office

保留當前目錄（Y），項目名稱定一個（當前是：colorful-patterns），項目類型（Excel），創建項目代碼，選擇代碼形式（TypeScript），項目生成后，選擇項目引導（Y）。

生成的文件目錄結構如下：

改造

【替換關鍵文件】

以下是教程的最關鍵點，你可以將之前導出的文件（manifest+html），將其復制并粘貼到現有項目中，就可以輕松將Script Lab 轉轉換功能完備的web add-ins 插件項目了。

colorful-patterns--manifest.xml 復制到根目錄（對應 colorful-patterns-manifest.xml 可刪）

colorful-patterns.html 復制到 Scr 目錄下（對應 index.html，可刪）

【修改清單文件】

修改清單文件：colorful-patterns--manifest.xml

清單文件后面的課程中將會專題介紹，這里只提一下幾個關鍵的修改點，最重要的一點是替換啟動頁面，將默認的index.html改為Script Lab 生成的頁面：

<bt:Url id="Contoso.Taskpane.Url" DefaultValue="https://localhost:3000/colorful-patterns.html" />

清單文件中所有文字的地方，進行漢化或修改：

<DisplayName DefaultValue="對照漢化！" /><Description DefaultValue="[對照漢化！]"/><bt:String id="Contoso.TaskpaneButton.Label" DefaultValue="對照漢化！" /><bt:String id="Contoso.Group1Label" DefaultValue="對照漢化！" /><bt:String id="Contoso.GetStarted.Title" DefaultValue="對照漢化！" /><bt:String id="Contoso.TaskpaneButton.Tooltip" DefaultValue="對照漢化！" /><bt:String id="Contoso.GetStarted.Description" DefaultValue="對照漢化！." />

【上傳清單文件】

請按CTRL +`打開或返回集成終端。輸入：

npm start

將在Chrome中打開您的項目。并可能會收到該站點不受信任的警告，單擊“高級”并選擇信任仍然/繼續。或按照以下引導頁進行認證主置，不在綴述：

打開另一個選項卡，然后瀏覽到office365.com，登錄帳戶。在左上角的Office菜單上，單擊Excel。在“插入”菜單上，單擊“Office加載項”。在對話框的右上角，單擊“上載我的加載項”。單擊“瀏覽”，上傳清單文件（colorful-patterns--manifest.xml）。的加載項現在將加載到“主頁”選項卡上，切換到該選項卡，然后按“顯示任務窗格”。

總結

以上步驟將向你展示如何將 Script Lab 轉為一個完整的 Web Add-ins 加載項目，Office Online中測試它。

獲取GIST代碼片段；
導入Script Lab 并成生清單文件；
用 yeoman + Office 模板，生成空項目；
替換 manifest、html 文件
修改 manifest 文件
上傳 Office Online

目錄索引

Script Lab 01：快速Office 365開發工具
Script Lab 02：Script Lab，知識儲備
Script Lab 03：Script Lab，啟動函數，Excel基礎操作（1）
Script Lab 04：Script Lab，九九乘法表，Excel基礎操作（2）
Script Lab 05：Office JavaScript API助手，Excel基礎操作（3）
Script Lab 06：事件處理，Excel基礎操作（4）
Script Lab 07：引入控件，Excel基礎操作（5）
Script Lab 08：單詞“卡拉OK”，Word基礎操作
Script Lab 09：異步調用函數，PowerPoint基礎操作
Script Lab 10：為Officejs開發配置VSCode環境
Script Lab 11：OIfficeJS的三種調試方式

在線咨詢

上一篇：JavaScript 常見錯誤與異常處理
下一篇：支付系統：如何對接第三方支付通道（一）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

用stylus將styl文件直接轉換成css文件

言

準備工作

命令行工具

集成開發環境（IDE）支持

構建工具集成

Vue.js項目中使用

示例配置（Vue CLI）:

styl文件格式

前言

為什么會有瀏覽器兼容性問題？

目前各瀏覽器市場份額

CSS瀏覽器兼容性問題的解決思路和方案

4. 自動化插件

公告

備

工具

創建

改造

總結

目錄索引

您的項目需求