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

CSS-On-Diet

by wyderkat ST2/ST3

Easy and fast CSS preprocessor based on Emmet (Zen-Coding) idea

Details

  • 2015.05.23.10.23.27
  • cofoh.​com
  • github.​com
  • 2 years ago
  • 45 minutes ago
  • 4 years ago

Installs

  • Total 2K
  • Win 1K
  • OS X 886
  • Linux 154
Nov 20 Nov 19 Nov 18 Nov 17 Nov 16 Nov 15 Nov 14 Nov 13 Nov 12 Nov 11 Nov 10 Nov 9 Nov 8 Nov 7 Nov 6 Nov 5 Nov 4 Nov 3 Nov 2 Nov 1 Oct 31 Oct 30 Oct 29 Oct 28 Oct 27 Oct 26 Oct 25 Oct 24 Oct 23 Oct 22 Oct 21 Oct 20 Oct 19 Oct 18 Oct 17 Oct 16 Oct 15 Oct 14 Oct 13 Oct 12 Oct 11 Oct 10 Oct 9 Oct 8 Oct 7 Oct 6
Windows 0 0 0 0 1 2 2 1 0 1 0 0 1 2 1 0 0 1 1 0 2 2 0 0 0 1 0 0 1 1 1 1 1 1 2 0 1 1 0 1 2 1 3 1 0 0
OS X 1 1 1 2 0 5 1 0 1 1 0 2 2 2 1 1 4 4 0 3 0 2 1 2 0 4 1 1 2 0 1 0 1 2 1 3 2 2 2 2 0 0 1 2 0 1
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 1 0 0 0 0 1 0 0 0 0 0 0 0 0 0 1 0 0 0

Readme

Source
raw.​githubusercontent.​com

CSS-On-Diet - easy and fast CSS preprocessor

This is CSS-On-Diet package for Sublime Text v2 and v3 for Mac, Linux and Windows. CSS-On-Diet is a preprocessor. It works like Emmet, but on the CSS level.

screenshot

This package includes:

  1. Syntax highlighter
  2. Build system
  3. The preprocessor itself!

Installation

Package Manager

You can install via Sublime Package Control

Manual

Or you can clone this repo into your Sublime Text [2|3]/Packages directory

Preprocessor included

Because CSS-On-Diet preprocessor is included in this package you don't have to install it separately. But you can do it. It will be favor over included one.

CSS-On-Diet quick documentation

CSS-On-Diet is a preprocessor for CSS files. The key feature is mnemonics for frequently used properties, which are similar to Emmet abbreviations. Other goodies include intuitive media breakpoints, nested and single line comments, variables and mixins, a calculator, hexadecimal RGBA, minifier, …

Use old CSS

.element {
  letter-spacing: 2px;
  background-color: #1C6BA0;
}

If all your CSS declarations are on separate lines you don't have to change anything

Remove colons

.element {
  letter-spacing 2px
  background-color #1C6BA0
}

In CSS-On-Diet colons and semicolons are optional

Use mnemonics

.element {
  les 2p
  bac #1C6BA0
}

Common CSS keywords have mnemonics. Parameters are 3 letters long, values 2, and units just 1 letter (The list)

Medias Breakpoints

@cod-media {
  tablet (min-width: 768px)
}
.element {
  les 2p
  les 3p @tablet
}

Responsive Web Design was never so easy and intuitive

One line comments

.element {
  les 2p // why not 3?
  bac #1C6BA0 // deep ocean
}

No need to remember to close those comments

Nested comments

.element {
  /*
  les /*3p*/ 2p
  */
  bac #1C6BA0
}

Now you can comment out code with other comment inside. Finally…

Arithmetics

.element {
  les 3p-1
  bac #1C6BA0
}

CSS needs calculations. That's more than sure.

Short RGBA

.element {
  les 3p-1
  bac #1C6BA0F1
}

Just two more digits and you have transparency with your color

Variables

@cod-defines {
  sp2014 3p-1
  ocean #1C6BA0F1
}
.element {
  les sp2014
  bac ocean
}

Defines are like variables. Write it once and use it anywhere. Stay DRY!

Mixins

@cod-defines {
  sp2014 3p-1
  ocean bac #1C6BA0_ARG1_ ;\
        bai url("fish.png")
}
.element {
  les sp2014
  ocean(F1)
}

Mixins can be anything placed anywhere. Arguments give them programming power.

More info at CSS-On-Diet page