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
Jun 13 Jun 12 Jun 11 Jun 10 Jun 9 Jun 8 Jun 7 Jun 6 Jun 5 Jun 4 Jun 3 Jun 2 Jun 1 May 31 May 30 May 29 May 28 May 27 May 26 May 25 May 24 May 23 May 22 May 21 May 20 May 19 May 18 May 17 May 16 May 15 May 14 May 13 May 12 May 11 May 10 May 9 May 8 May 7 May 6 May 5 May 4 May 3 May 2 May 1 Apr 30
Windows 0 0 0 0 0 0 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 1 0 0 0 0 1 0 0 0 0 0 0 0 0
Mac 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 0 1 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 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

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.