Skip to content

Instantly share code, notes, and snippets.

@rasmar
Last active January 16, 2018 21:41
Show Gist options
  • Save rasmar/c652ad5455e7899a7cd6acccf90d97e2 to your computer and use it in GitHub Desktop.
Save rasmar/c652ad5455e7899a7cd6acccf90d97e2 to your computer and use it in GitHub Desktop.
SASS style guide
// WORST CODE EVER
@mixin test-mixin($width) {
width: $width;
}
#important_thing {
size: 100px !important;
}
.myClass{
height:30px;
@include test-mixin(10px);
.another_class{
/* THIS CLASS IS GARBAGE BUT
IS MUST BE PLACED HERE */
text-color:rgba(20, 20, 20, 20);
background-color: #D8A981;
padding:0px;
}
}
@media #{$md-up} {
.myClass {
border: none;
}
}
// BEST CODE EVER
@mixin test-mixin($width) {
width: $width;
}
.important-thing {
size: 100px;
}
.my-class {
@include test-mixin(10px);
height: 30px;
@media #{$md-up} {
border: none;
}
.another_class{
// THIS CLASS IS GREAT
// IT MUST BE PLACED HERE
text-color: #ddd;
background-color: #d8a981;
padding: 0;
}
}
// Most of all use linter!
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment