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.
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 numbertab_char
-> "space" or "tab".comment-module {font-size: 16px;color: red;position: 'relative';z-index: 0;font-family: 'sans-serif';}
.comment-module {z-index : 0;position : 'relative';color : red;font-family : 'sans-serif';font-size : 16px;}
@media
queries@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;}}
@media only screenand (min-device-width : 320px)and (device-width : 320px)and (max-device-width : 736px),tvand (min-width : 320px)and (device-width : 320px)and (width : 736px) {.comment-module {font-size : 18px;}}
input[type="text"], [class*="btn-grey"], input[type="date"], input[type="number"], textarea {color : $grey6;}
[class*="btn-grey"],input[type="date"],input[type="number"],input[type="text"],textarea {color : $grey6;}
$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;
$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;}}}
@import "buttons.scss";@import "forms.scss";@import "variables.scss";
@import "variables.scss","buttons.scss","forms.scss";
@each
statements easier to read@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;}}
@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;}}
.class {background : linear-gradient(rgba(33, 34, 30, 0.1), rgba(33, 34, 30, 0.1));}
.class {background : linear-gradient(rgba(33, 34, 30, 0.1),rgba(33, 34, 30, 0.1));}
Feel free to contribute.
Good catch. Let us know what about this package looks wrong to you, and we'll investigate right away.