CSS Format

下载次数:74,378

更新时间:2016-12-14 16:58:11

插件作者:mutian

版本支持:sublime text 2,sublime text 3

系统支持: Windows,OS X,Linux

所属分类:css,formatting

曾用名称:--

插件介绍:CSS Formatting for Sublime Text

详细介绍: --

readme:

							

CSS Formatter for Sublime Text

Description

CSS Format is a CSS formatting plugin for Sublime Text, you can convert CSS/SASS/SCSS/LESS code to Expanded, Compact or Compressed format. CSS Format is just only a formatter, do not supports grammar check and auto correct feature.

Example:

  • Expanded:

    body {
        background: #fff;
        font: 12px/2em Arial, Helvetica, sans-serif;
    }
    ol, ul, li {
        margin: 0;
        padding: 0;
    }
    a {
        color: rgba(65, 131, 196, 0.8);
    }
    
  • Expanded (Break Selectors):

    body {
        background: #fff;
        font: 12px/2em Arial, Helvetica, sans-serif;
    }
    
    ol,
    ul,
    li {
        margin: 0;
        padding: 0;
    }
    
    a {
        color: rgba(65, 131, 196, 0.8);
    }
    
  • Compact:

    body { background: #fff; font: 12px/2em Arial, Helvetica, sans-serif; }
    ol, ul, li { margin: 0; padding: 0; }
    a { color: rgba(65, 131, 196, 0.8); }
    
  • Compact (No Spaces):

    body{background:#fff;font:12px/2em Arial,Helvetica,sans-serif;}
    ol,ul,li{margin:0;padding:0;}
    a{color:rgba(65,131,196,0.8);}
    
  • Compact (Break Selectors):

    body { background: #fff; font: 12px/2em Arial, Helvetica, sans-serif; }
    ol,
    ul,
    li { margin: 0; padding: 0; }
    a { color: rgba(65, 131, 196, 0.8); }
    
  • Compact (Break Selectors, No Spaces):

    body{background:#fff;font:12px/2em Arial,Helvetica,sans-serif;}
    ol,
    ul,
    li{margin:0;padding:0;}
    a{color:rgba(65,131,196,0.8);}
    
  • Compressed:

    body{background:#fff;font:12px/2em Arial,Helvetica,sans-serif}ol,ul,li{margin:0;padding:0}a{color:rgba(65,131,196,0.8)}
    

Installation

OPTION 1 - with Package Control (recommended)

The easiest way to install this package is through Package Control.

  1. Install Package Control, follow instructions on the website.

  2. Open command panel: Ctrl+Shift+P (Linux/Windows) or Cmd+Shift+P (OS X) and select Package Control: Install Package.

  3. When packages list appears, type CSS Format and select it.

OPTION 2 - with Git

Clone the repository in your Sublime Text “Packages” directory:

git clone git://github.com/mutian/Sublime-CSS-Format.git "CSS Format"

You can find your “Packages” inside the following directories:

  • OS X: ~/Library/Application Support/Sublime Text 2/Packages/

  • Windows: %APPDATA%/Sublime Text 2/Packages/

  • Linux: ~/.Sublime Text 2/Packages/

OPTION 3 - without Git

Download the latest source zip from Github and extract it into a new folder named CSS Format in your Sublime Text “Packages” folder.

Usage

Select the code, or place cursor in the document, and execute commands in one of the following ways:

  • Context Menu: CSS Format.

  • Edit Menu: Edit > CSS Format.

  • Command Panel: Open command panel: Ctrl+Shift+P (Linux/Windows) or Cmd+Shift+P (OS X) and select Format CSS: XXX.

Shortcuts

By default, CSS Format provides no keyboard shortcuts to avoid conflicts, but you can read the included Example.sublime-keymaps file to get an idea how to set up your own.

Configuration

There are a number of configuration options available to customize the behavior on save. For the latest information on what options are available, select the menu item Preferences > Package Settings > CSS Format > Settings - Default.

DO NOT edit the default settings. Your changes will be lost when CSS Format is updated. ALWAYS edit the user settings by selecting Preferences > Package Settings > CSS Format > Settings - User.

  • indentation: Format indentation, you can set it to " ". By default, this is set to " "

  • format_on_save: Set to true to trigger format on save. By default, this is set to false.

  • format_on_save_action: Format action. You can refer to Settings - Default. By default, this is set to "expand".

  • format_on_save_filter: CSS Format matches the name of the file being saved against this regular expression to determine if a build should be triggered. By default, the setting has a value of "\.(css|sass|scss|less)$".

Author

Created by Mutian (http://mutian.wang).

For more info, you can send email to me: mutian(a)me.com!

Acknowledgements

For Chinese information, please visit http://mutian.wang/1508.

language syntax snippets color scheme linting theme auto-complete text manipulation formatting javascript build system utilities completions syntax file navigation php python html go markdown search testing code navigation documentation git ruby language text navigation autocomplete vcs utils lua coffeescript latex sass build highlighting text selection java diff scala terminal addon preview todo scss js Completion automation snippet comments nsis svn file creation formatter project sidebar commands console test less repl indent code sharing C hg monokai clipboard file open perl tasks nodejs sync android C++ react japanese editor json markup code style Jasmine editor emulation es6 font diff/merge material jsx syntax highlight docs translate textile code generation debugging sql google node minification laravel typescript cursors manipulation golang save workspace haskell emacs file logs command line wordpress templating compare matlab precompiler watch xml window hexadecimal difference st3 ember jade stylus notes backup indentation browser share rust julia ide make debug angular groovy 中文 unit test converter vhdl utility plugin development unicode restructuredtext apicloud coding Clang spec ftp icons lisp text format grails remote collaboration merge R rubymotion framework file comparison codex sublime svg dark email CSS commit open files stata ruby on rails logger pattern writing convert cli fullscreen validate copy calculator coffee hint icon_fonts code Debugger preferences automate colour input method intellisense converting tidy bash package oracle conflicts pandoc