Skip to content

Instantly share code, notes, and snippets.

@AshConnolly
Forked from Ashffrees/SCSS component example
Created October 10, 2019 09:58
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save AshConnolly/4d78295b10fc4f94c73ec67b9f55555a to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----
/*
[1] Class name variable comes first. This is to allow easy future updates if the class name were to change. Naturally this class would need to be update elsewhere in the project, but in the component it should only need updating on the first 2 lines, then all changes will cascade down. See here for example
[2] Local variables and mixins specific only to the component. If these are used in any other component they are a global variable / mixin and should be moved to the respective file.
[3] Root component properties come first
[4] Then child element selectors using &__ to select child but using BEM selection
[5] Then modifier classes. Element modifiers can be nested within their element selector - see '&__title' with its child '&--large' for an example below.
[6] Then any @at-root selectors (see above for an explanation)
[7] Then state changes
[8] Then media queries last. The media queries should comprise nearly entirely of layout changes: padding, margin, width, height, position etc. Cosmetic styles should not change.
*/
/*------------------------------------*\
## Card
\*------------------------------------*/
.c-card {
$class: c-card; // [1]
// local mixins + variables [2]
$box-height: 300px;
@mixin example {
box-shadow:$box-shadow;
// more styles here
}
// root styles [3]
background:green;
width:33%;
float:left;
height: $box-height;
// child styles [4]
&__header {
color:green;
}
&__title {
font-size:22px;
&--large {
font-size:28px;
}
}
// modifiers [5]
&--fullwidth {
width:100%;
.#{$class}__header {color:blue} // [1]
}
// root changes [6]
@at-root.hide-cards .#{$class} {display:none;}
// state changes [7]
&.is-active {
background:lightgreen;
}
&.is-hidden {
display:none;
}
// media queries [8]
@media (min-width:500px) {
width:25%;
}
@media (min-width:1000px) {
&__header {
margin-top:30px
&--right {
padding-right:25px;
}
}
}
}
/*
[1] Class name variable comes first. This is to allow easy future updates if the class name were to change. Naturally this class would need to be update elsewhere in the project, but in the component it should only need updating on the first 2 lines, then all changes will cascade down. See here for example
[2] Local variables and mixins specific only to the component. If these are used in any other component they are a global variable / mixin and should be moved to the respective file.
[3] Root component properties come first
[4] Then child element selectors using &__ to select child but using BEM selection
[5] Then modifier classes. Element modifiers can be nested within their element selector - see '&__title' with its child '&--large' for an example below.
[6] Then any @at-root selectors (see above for an explanation)
[7] Then state changes
[8] Then media queries last. The media queries should comprise nearly entirely of layout changes: padding, margin, width, height, position etc. Cosmetic styles should not change.
*/
/*------------------------------------*\
## Card
\*------------------------------------*/
.c-card {
background: green;
width: 33%;
float: left;
height: 300px;
}
.c-card__header {
color: green;
}
.c-card__title {
font-size: 22px;
}
.c-card__title--large {
font-size: 28px;
}
.c-card--fullwidth {
width: 100%;
}
.c-card--fullwidth .c-card__header {
color: blue;
}
.hide-cards .c-card {
display: none;
}
.c-card.is-active {
background: lightgreen;
}
.c-card.is-hidden {
display: none;
}
@media (min-width: 500px) {
.c-card {
width: 25%;
}
}
@media (min-width: 1000px) {
.c-card__header {
margin-top: 30px .c-card__header --right;
margin-top-padding-right: 25px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment