Skip to content

Instantly share code, notes, and snippets.

@taylorgorman

taylorgorman/extend-example-1.css

Last active July 2, 2022 16:30
Show Gist options
  • Save taylorgorman/5808958 to your computer and use it in GitHub Desktop.
Save taylorgorman/5808958 to your computer and use it in GitHub Desktop.
Download ZIP
Code examples made for https://cnpagency.com/blog/trim-hidden-bulk-in-your-sass-extend-directives/. Don't delete this if that's still up (and it is as of 2022 Jul 2).
Raw
extend-example-1.css
.button, .big-button {
display: inline-block;
padding: 1em;
}
.big-button {
font-size: 1.4em;
}
Raw
extend-example-1.scss
.button {
display: inline-block;
padding: 1em;
}
.big-button {
@extend .button;
font-size: 1.4em;
}
Raw
extend-example-2.css
.button, .big-button, .slideshow .js-plugin-link {
display: inline-block;
padding: 1em;
}
.big-button {
font-size: 1.4em;
background-color: red;
}
form .button, form .big-button, form .slideshow .js-plugin-link, .slideshow form .js-plugin-link {
background-color: blue;
}
.slideshow .js-plugin-link {
position: absolute;
bottom: 5%;
}
.sidebar .button, .sidebar .big-button, .sidebar .slideshow .js-plugin-link, .slideshow .sidebar .js-plugin-link {
background-color: blue;
}
.sidebar .button:after, .sidebar .big-button:after, .sidebar .slideshow .js-plugin-link:after, .slideshow .sidebar .js-plugin-link:after {
content: "\2192";
}
Raw
extend-example-2.scss
.button {
display: inline-block;
padding: 1em;
}
.big-button {
@extend .button;
font-size: 1.4em;
background-color: red;
}
form .button {
background-color: blue;
}
.slideshow .js-plugin-link {
@extend .button;
position: absolute;
bottom: 5%;
}
.sidebar .button {
background-color: blue;
&:after {content: "\2192";}
}
Raw
extend-example-3.css
.button, .big-button, .slideshow .js-plugin-link {
display: inline-block;
padding: 1em;
}
.big-button {
font-size: 1.4em;
background-color: red;
}
form .button {
background-color: blue;
}
.slideshow .js-plugin-link {
position: absolute;
bottom: 5%;
}
.sidebar .button {
background-color: blue;
}
.sidebar .button:after {
content: "\2192";
}
Raw
extend-example-3.scss
%button {
display: inline-block;
padding: 1em;
}
.button {
@extend %button;
}
.big-button {
@extend %button;
font-size: 1.4em;
background-color: red;
}
form .button {
background-color: blue;
}
.slideshow .js-plugin-link {
@extend %button;
position: absolute;
bottom: 5%;
}
.sidebar .button {
background-color: blue;
&:after {content: "\2192";}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment