国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSScomb的安裝和參數(shù)配置以及消除空行

DangoSky / 3359人閱讀

摘要：屬性排序插件配置參數(shù)大全圖片介紹如下所示點擊進(jìn)去更詳細(xì)空行產(chǎn)生的原因以及解決方法原因由于官方文檔將屬相按照單字定位展示大小樣式進(jìn)行排序所以會產(chǎn)生空行，表示其實一類。

 CSScomb 是一個超級爽的前端css屬性排序工具，用來規(guī)則css, make    your code more beautiful
sublime插件CSScomb介紹

官方網(wǎng)站只有一句如插件作用的介紹 Makes your code beautiful(讓你的代碼更漂亮) 。使用它可以幫助你重新排序CSS中定義的屬性，幫助你按照你預(yù)定義的排序格式生成新的CSS。會按照你想要的格式定義 css 空格，換行，縮進(jìn)，代碼編寫方式。

CssComb的特點: 

1. 自定義css屬性排序規(guī)則；
2. 代碼作用不發(fā)生變化，只是格式變化
3. 完全支持CSS2/CSS2.1/CSS3和CSS4；
4. 支持在線排序和本地編輯器安裝
在線排序格式化css

CssComb在線地址

排序代碼如下圖片所示，沒有高亮所以不是很好看。

本地編輯器 sublime 安裝csscomb插件

在線的畢竟只是測試，功能單一，無法自定義。在此，我用sublime安裝，因為sublime是我最喜歡用的前端編輯器。
安裝使用過程如下：

首先你要安裝node,然后才可以用，很多插件都需要使用node的，推薦你學(xué)習(xí)安裝，這里不多介紹。

在sublime中按ctrl+shift+p然后搜索 CssComb 確認(rèn)進(jìn)行下載。

點擊preferences->packages-settings->CSScomb->settins-default將第四行的
"node-path" : ":/usr/local/bin" ,改為你自己的node下面bin安裝的的路徑，我的是 "node-path" : ":/usr/local/bin" .改路徑可以先跳過去，執(zhí)行第四步驟，如果沒有生效再來改路徑。

選中css代碼然后按默認(rèn)快捷鍵 ctr+shift+c 即可，如果沖突了可以重新自定義，很多是快捷鍵沖突失效。

生效后如下所示：
排序之前：

 #header {height: 42px;
    position: relative;
     background-color: #fff;
        border-bottom: 1px solid #ccc;
    }

排序之后：

#header {
    position: relative;

    height: 42px;

    border-bottom: 1px solid #ccc;
    background-color: #fff;
}

可以看到 {} 和空格，縮進(jìn)， 屬性順序 都發(fā)生了變化。但是產(chǎn)生了兩個問題。

縮進(jìn)的多少，標(biāo)簽風(fēng)格可能不是我喜歡的類型。

中間多了幾個空行，看起來很別扭。

別著急，這些問題在下面自定義配置之后都可以解決。

自定義配置csscomb風(fēng)格

在線簡單配置參數(shù) 按照細(xì)節(jié)喜歡的風(fēng)格選擇完之后會生成一個配置完的 json 文件。

選擇風(fēng)格如下所示：

選擇完成后如下所示：

上面這只是在線的簡單配置，大家還是看不太懂。接下來給大家分享一個詳細(xì)的自定義配置網(wǎng)站內(nèi)容介紹。 CSS屬性排序 CSScomb 插件配置參數(shù)大全

圖片介紹如下所示：(點擊進(jìn)去更詳細(xì))

CSScomb空行產(chǎn)生的原因以及解決方法

原因由于官方文檔將css屬相按照 單字 定位 展示 大小 樣式進(jìn)行排序,所以會產(chǎn)生空行，表示其實一類。

解決方法：

  在sublime中下載` CSS Format `插件，然后執(zhí)行 edit->css format->expanded 即可此時空行將會消除。

解決之后的代碼如下所示：(markdown插入圖片比較麻煩就不用圖片展示了)

#header {
    position: relative;
    height: 42px;
    border-bottom: 1px solid #ccc;
    background-color: #fff;
}
CSScomb屬性排序如何排性能更好

上面說了默認(rèn)的排序是 單字 定位 展示 大小 ,雖然排版好看了，但是性能并不是最好的。如果一個元素都不可見，那還要什么定位和大小，樣式呢？那樣是不是浪費渲染性能了。

更好的順序應(yīng)該是： 顯示屬性 自身屬性 文本屬性和其他修飾屬性

如下圖所示：

好了，到這里把CSScomb算是終于講完了，希望你能配置成功，跟好的利用。make your code beautiful 有什么問題就仔細(xì)看下我給的鏈接和圖片。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/115102.html

相關(guān)文章

  • 一個前端程序猿的Sublime Text3的自我修養(yǎng)

    摘要：效果如下配置方法參考下的配置方法完美支持提供了比默認(rèn)更好的語法高亮，而且他完美支持。語法高亮默認(rèn)安裝的對的支持讓人抓狂，幀動畫別開玩笑了你只會看到一片白色的純文本一樣的代碼。事實上不光，我建議用完全替代原來的來完成語法高亮。 文章轉(zhuǎn)載自本人的博客《三省吾身丶丶》點擊查看喜歡的話請瘋狂的推薦吧！ ^_^ 本文章會在本人有插件或者設(shè)置更新時，進(jìn)行不定時更新 偷懶了，圖片地址直接設(shè)置的博客...

    KunMinX 評論0 收藏0

  • 初學(xué)者請注意手寫 css 樣式表的各屬性的順序及 CSScomb 的使用

    摘要：此時你只需要在問題出現(xiàn)時，去問谷歌。附一個我目前遇到所有用過的屬性，在的梳理后，如果你能手寫出谷歌首頁，那么你一定會了解它們的用法。 問題 有時候會覺得自己在寫 css 時沒有什么章法，因為 css 的屬性很多，又有一些繼承不繼承的關(guān)系，還有一些相互影響的屬性需要注意。總之就是覺得寫 css 好費勁，不如寫編程語言的邏輯清晰明了。 干貨 手寫 css 很重要 對于簡單頁面，嵌套...

    pekonchan 評論0 收藏0

  • web前端編碼規(guī)范整合

    摘要：雜項用代替里一定要有的判斷不要在內(nèi)置對象的原型上添加方法，如不要在內(nèi)層作用域的代碼里聲明了變量，之后卻訪問到了外層作用域的同名變量變量不要先使用后聲明不要在一句代碼中單單使用構(gòu)造函數(shù)，記得將其賦值給某個變量不要在同個 決定綜合網(wǎng)上的規(guī)范整出一套自己的開發(fā)規(guī)范出來，以后代碼的風(fēng)格均按照要求來編排，方便管理維護(hù) 一、 命名規(guī)范 項目命名：全部采用小寫方式， 以下劃線分隔，例：my_pro...

    孫淑建 評論0 收藏0

  • web前端編碼規(guī)范整合

    摘要：雜項用代替里一定要有的判斷不要在內(nèi)置對象的原型上添加方法，如不要在內(nèi)層作用域的代碼里聲明了變量，之后卻訪問到了外層作用域的同名變量變量不要先使用后聲明不要在一句代碼中單單使用構(gòu)造函數(shù)，記得將其賦值給某個變量不要在同個 決定綜合網(wǎng)上的規(guī)范整出一套自己的開發(fā)規(guī)范出來，以后代碼的風(fēng)格均按照要求來編排，方便管理維護(hù) 一、 命名規(guī)范 項目命名：全部采用小寫方式， 以下劃線分隔，例：my_pro...

    liaoyg8023 評論0 收藏0

  • web前端編碼規(guī)范整合

    摘要：雜項用代替里一定要有的判斷不要在內(nèi)置對象的原型上添加方法，如不要在內(nèi)層作用域的代碼里聲明了變量，之后卻訪問到了外層作用域的同名變量變量不要先使用后聲明不要在一句代碼中單單使用構(gòu)造函數(shù)，記得將其賦值給某個變量不要在同個 決定綜合網(wǎng)上的規(guī)范整出一套自己的開發(fā)規(guī)范出來，以后代碼的風(fēng)格均按照要求來編排，方便管理維護(hù) 一、 命名規(guī)范 項目命名：全部采用小寫方式， 以下劃線分隔，例：my_pro...

    Yang_River 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<