Skip to content

Instantly share code, notes, and snippets.

@akfzambrana
Last active March 3, 2017 16:59
Show Gist options
  • Save akfzambrana/b0e46107b8e3a52b3b0d47146e83c7aa to your computer and use it in GitHub Desktop.
Save akfzambrana/b0e46107b8e3a52b3b0d47146e83c7aa to your computer and use it in GitHub Desktop.
Example using placeholder selector
// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----
%loader-base-config
color: red
position: fixed
box-sizing: border-box
left: -9999px
top: -9999px
width: 0
height: 0
overflow: hidden
z-index: 999999
&:after,
&:before
box-sizing: border-box
display: none
&.is-active
background-color: blue
width: 100%
height: 100%
left: 0
top: 0
&:after,
&:before
display: block
.class-1
@extend %loader-base-config
border: 1px solid red
.class-2
@extend %loader-base-config
text-decoration: underline
.class-1, .class-2 {
color: red;
position: fixed;
box-sizing: border-box;
left: -9999px;
top: -9999px;
width: 0;
height: 0;
overflow: hidden;
z-index: 999999;
}
.class-1:after, .class-2:after, .class-1:before, .class-2:before {
box-sizing: border-box;
display: none;
}
.is-active.class-1, .is-active.class-2 {
background-color: blue;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.is-active.class-1:after, .is-active.class-2:after, .is-active.class-1:before, .is-active.class-2:before {
display: block;
}
.class-1 {
border: 1px solid red;
}
.class-2 {
text-decoration: underline;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment