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