These are the Javascript-specific coding styles. Anything mentions here overrides/adds to the "In General" guide, then "CSS" guide. The only 1 principle when coding Sass is that:
BAD:
.foo {
display: block; overflow: hidden;
padding: 0 1em;
}
GOOD:
.foo {
display: block;
overflow: hidden;
padding: 0 1em;
}
@charset 'utf-8';
'
).// Good
$direction: 'left';
$font-type: unquote('sans-serif');
// Bad
$direction: left;
$font-type: unquote(sans-serif);
// Good
$font-stack: ('Helvetica', 'Arial', sans-serif);
// Good
$font-stack: (
'Helvetica',
'Arial',
sans-serif,
);
// Bad
$font-stack: 'Helvetica' 'Arial' sans-serif;
// Bad
$font-stack: 'Helvetica', 'Arial', sans-serif;
// Bad
$font-stack: ('Helvetica', 'Arial', sans-serif,);
:
);(
) on the same line as the colon (:
);,
) at the end of each key/value;,
) on last item to make it easier to add, remove or reorder items;)
) on its own new line;)
) and semi-colon (;
).// Good
$breakpoints: (
'small': 767px,
'medium': 992px,
'large': 1200px,
);
// Bad
$breakpoints: ( small: 767px, medium: 992px, large: 1200px );
BAD:
@import 'abstracts/*';
@import 'vendors/*';
@import 'base/*';
@import 'layout/*';
@import 'components/*';
@import 'pages/*';
@import 'themes/*';
GOOD:
@import
'abstracts/variables',
'abstracts/functions',
'abstracts/mixins',
'abstracts/placeholders';
@import
'vendors/bootstrap',
'vendors/jquery-ui';
@import
'base/reset',
'base/typography';
@import
'layout/navigation',
'layout/grid',
'layout/header',
'layout/footer',
...
// Good
$breakpoints: (
'medium': (min-width: 800px),
'large': (min-width: 1000px),
'huge': (min-width: 1200px),
);
// Bad
$breakpoints: (
'tablet': (min-width: 800px),
'computer': (min-width: 1000px),
'tv': (min-width: 1200px),
);
!default
defines a variable default values.!global
corrupts syntax meanings in an mismanaged project.That's all about Sass coding style.