Instantly share code, notes, and snippets.

Embed
What would you like to do?
SASS Property Format
.parent-selector {
@extend %pattern; // Extend a placeholder
@extend %another-pattern; // Extend another placeholder
@include simple-mixin(); // Include a single line mixin
@include another-simple-mixin(); // Include another single line mixin
position: relative; // Positioning
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 0;
float: left;
clear: left;
display: block; // Display & box model
overflow: hidden;
box-sizing: border-box;
width: auto;
height: auto;
margin: 0;
padding: 0;
border: none;
border-radius: 0;
background-image: none;
color: #000; // Colour
background-color: #fff;
font-family: sans-serif; // Text
font-size: 1em;
line-height: 1.5;
text-align: left;
text-indent: 0;
letter-spacing: auto;
word-spacing: auto;
white-space: auto;
cursor: pointer; // Other
transition: all 0.2s;
@include block-mixin() { // Include a mixin with content
// Mixin @content
}
@include another-block-mixin() { // Include another mixin with content
// Mixin @content
}
&:hover, &:focus { // Interaction pseudo selectors
// Hover and focus styles
}
&:first-child { // Pseudo selectors
// First child styles
}
&:before, &:after { // Pseudo elements
content: '';
}
.child-selector { // Child elements
// Repeat above format
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment