ctrl+shift+p filters: :st2 :st3 :win :osx :linux
Browse

CSSOrder

by lightningtgc ALL

A CSS style auto formatter for Tencent Alloyteam coding style-- sublime plugin

Details

Installs

  • Total 5K
  • Win 4K
  • Mac 1K
  • Linux 585
Apr 18 Apr 17 Apr 16 Apr 15 Apr 14 Apr 13 Apr 12 Apr 11 Apr 10 Apr 9 Apr 8 Apr 7 Apr 6 Apr 5 Apr 4 Apr 3 Apr 2 Apr 1 Mar 31 Mar 30 Mar 29 Mar 28 Mar 27 Mar 26 Mar 25 Mar 24 Mar 23 Mar 22 Mar 21 Mar 20 Mar 19 Mar 18 Mar 17 Mar 16 Mar 15 Mar 14 Mar 13 Mar 12 Mar 11 Mar 10 Mar 9 Mar 8 Mar 7 Mar 6 Mar 5 Mar 4
Windows 0 0 0 2 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 1 0 0 1 0 0 0 1 0 0 0 0 0 0 0 2 1 0
Mac 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Linux 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1

Readme

Source
raw.​githubusercontent.​com

Sublime CSSOrder

CSSOrder is a sublime text plugin for CSS file formatting.

Required Node.js

Intro

CSSOrder is a css coding style formatter with Tencent CSS Style

It can handle some special case like 'base64 url', 'single comment // ' and so on in CSS files.

Effect

Make CSS code become the following coding style:

/* Final CSS code */
.some-style,
.same-style {
    position: relative;
    top: -2px;
    right: 0;
    bottom: 0;
    left: 5px;
    z-index: 100;

    display: inline-block;
    width: 20px;
    height: 20px;
    padding: 5px 10px;
    overflow: hidden;

    vertical-align: middle;

    color: #fff;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    background-color: rgba(82,157,218,.9);
    -webkit-background-clip: padding-box;
       -moz-background-clip: padding-box;
            background-clip: padding-box;
}

Install

  1. Install Node.js ( if you don't install it before ).

  2. Install Package Control.

  3. Press ctrl+shift+p , then input install and press Enter .

After that input CSSOrder to find the plugin and press Enter to install it.

Manually:

Clone or download git repo into your packages folder (in SublimeText, find Browse Packages… menu item to open this folder)

Usage

Press ctrl+shift+o

or right click the content and select Run Cssorder.

Custom configuration

  • You can write your own configuration by opening

Tools> Css Order> Set Cssorder Config

or right click the content and select Set Cssorder Config

  • order_config is using for some special case (like add newline for every block).

comb_config is using for the configuration of CSSComb.

  • It will automatically format when you saved the file,

and you can close automatical format by

setting format_on_save to false in Set Cssorder Config.

Release History

  • v0.4.0: Add custom config to handle special case.
  • v0.3.1: Fix libs dependence.
  • v0.3.0: Support Sass and Less.
  • v0.2.1: Submitting to Sublime Package Control.
  • v0.2.0: Handle compressive file case.
  • v0.1.0: Release.