A plugin for Atom which sorts and aligns CSS and SASS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
keymaps
menus
spec
styles
.eslintrc
.gitignore
LICENSE.md
README.md
main.js
package-lock.json
package.json
screenshot-01.png
screenshot.psd

README.md

css-clean package

We all write code a little quickly sometimes. This is a package which offers a helping hand to sort, align and clean your CSS and SASS.

Configuration

If you want 4 spaces and tabs, create a .csscleanrc file in the project root directory.

example settings

{
  "tab_space": 2,
  "tab_char": "space"
}
  • tab_space -> Any number
  • tab_char -> "space" or "tab"

Sorting properties

Before
.comment-module {
  font-size: 16px;
  color: red;
  position: 'relative';
  z-index: 0;
  font-family: 'sans-serif';
}
After
.comment-module {
  z-index     : 0;
  position    : 'relative';
  color       : red;
  font-family : 'sans-serif';
  font-size   : 16px;
}

Clearly format your @media queries

Before
@media only screen and (min-device-width: 320px) and (device-width: 320px) and (max-device-width: 736px),
       tv and (min-width: 320px) and (device-width: 320px) and (width: 736px) {
  .comment-module {
   font-size: 18px;
  }
}
After
@media only screen
       and (min-device-width : 320px)
       and (device-width     : 320px)
       and (max-device-width : 736px),
       tv
       and (min-width        : 320px)
       and (device-width     : 320px)
       and (width            : 736px) {
  .comment-module {
    font-size : 18px;
  }
}

Sort multiple selector names and automatic placement to one line per selector

Before
input[type="text"], [class*="btn-grey"], input[type="date"], input[type="number"], textarea {
  color : $grey6;
}
After
[class*="btn-grey"],
input[type="date"],
input[type="number"],
input[type="text"],
textarea {
  color : $grey6;
}

SASS

Grouping of variables which are pushed to the top of the file

Before
$box-style2 : (bStyle: dotted, bColor: blue, bWidth: medium);
$i : 6;

@mixin does-parent-exist { @if & { &:hover { color : red; } } @else { a { color : red; } } }

$gutter-width : 10px;
After
$box-style2   : (bStyle: dotted, bColor: blue, bWidth: medium);
$i            : 6;
$gutter-width : 10px;

@mixin does-parent-exist {
  @if & {
    &:hover {
      color : red;
    }
  } @else {
    a {
      color : red;
    }
  }
}

Merging of multiple imports

Before
@import "buttons.scss";
@import "forms.scss";
@import "variables.scss";
After
@import "variables.scss",
        "buttons.scss",
        "forms.scss";

Make your @each statements easier to read

Before
@each $animal, $color, $cursor in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) {
  .#{$animal}-icon {
    background-image : url('/images/#{$animal}.png');
    border : 2px solid $color;
    cursor : $cursor;
  }
}
After
@each $animal,
      $color,
      $cursor in (puma, black, default),
      (sea-slug, blue, pointer),
      (egret, white, move) {
  .#{$animal}-icon {
    border           : 2px solid $color;
    background-image : url('/images/#{$animal}.png');
    cursor           : $cursor;
  }
}

Gradients

Before
  .class {
    background : linear-gradient(rgba(33, 34, 30, 0.1), rgba(33, 34, 30, 0.1));
  }
After
  .class {
    background : linear-gradient(
                   rgba(33, 34, 30, 0.1),
                   rgba(33, 34, 30, 0.1)
                 );
  }
  • Shortcut is CMD/CTRL+ALT+C

Feel free to contribute.