ホームページ > ウェブフロントエンド > htmlチュートリアル > Atomエディタ投げメモ_(10)CSScomb強化版[CSS/LESS/SASS]_html/css_WEB-ITnose

Atomエディタ投げメモ_(10)CSScomb強化版[CSS/LESS/SASS]_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:43:49
オリジナル
1561 人が閲覧しました

CSScomb とは

公式 Web サイトには 1 つだけ説明があります:

コードを美しくする (コードをより美しくする)

わかりやすく言うと:

CSScomb は CSS コードをタイプセットするために使用されます...それは可能ですNodejs に依存するフォーマットプラグインと言われています

CSScomb を入手しますか? これは今日のトピックではありません

公式 Web サイト: CSScomb

  • Sublime/Atom/brackets などの多くのエディターをサポートします
  • サードパーティCSScomb? これが今日のトピックです

    昨日CSS3についての記事を書きました...コードが少しわかりにくいことがわかりました...手動での組版は少し...それで私はatomプラグインライブラリに行きましたcsscomb を探します

  • Atom -> 設定 -> インストール -> csscomb
  • いくつかの CSScomb プラグイン パッケージを見てみましょう (3 つの青い丸の機能は基本的に同じです、最初のものは公式です、、、今日の主人公は黄色です)

    atom-css-comb

    特徴

  • CSS/LESS/SASSのフォーマットをサポート
  • カスタムフォーマットをサポート
  • Built- 3 つのタイプセット スタイル (Yandex/CSScomb/zen)
  • Yandex の CSS 仕様... エンジンを検索しました... 非常に強力なようです...しかし私には適していません
  • CSScomb タイプセット スタイル
  • zen ( Emmet)
  • 基本的な使用法

  • デフォルトのショートカット キーは 2 つあります [マウスを使用してプラグイン呼び出しをクリックすることもできます]

  • ctrl + alt + c[競合]
  • ctrl + alt + shift + c[競合]
  • レイアウトスタイルを切り替え(既成の構成)、説明と画像を読む

  • パッケージ -> CSS Comb -> 設定
  • デフォルトのショートカットキーパラメータ
  • 'atom-text-editor':  'ctrl-alt-c':'css-comb:comb'
    ログイン後にコピー

  • 高度な使用法

    対象ユーザーグループ: トスを上げたり、自分のスタイルを持っている友達。これは表示用です。詳細については公式ドキュメントを参照してください。 カスタマイズ

    上記の

    共通設定

    を参照してください、カスタム構成 [構成ファイルの編集] を選択します カスタム パラメーター ページに入ります。形式は JSON で書かれています。

    {    "help": "About options https://github.com/csscomb/csscomb.js/blob/master/doc/options.md",    "exclude": ["node_modules/**"],    "verbose": true,    "always-semicolon": true,    "block-indent": " ",    "colon-space": ["", " "],    "color-case": "lower",    "color-shorthand": true,    "element-case": "lower",    "eof-newline": true,    "leading-zero": false,    "quotes": "single",    "remove-empty-rulesets": true,    "rule-indent": " ",    "stick-brace": "\n",    "strip-spaces": true,    "unitless-zero": true,    "vendor-prefix-align": true }
    ログイン後にコピー

    カスタム パラメーターの完全なリスト

    : Click me I click me

    ソース:php.cn
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート