Last active
August 29, 2015 14:23
-
-
Save r4j4h/cde21a53585578e759c2 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<p>Standard paragraph.</p> | |
<p class="page-specific-thing">Page specific paragraph.</p> | |
<div> | |
<p>Standard paragraph in a div.</p> | |
</div> | |
<div class="callout"> | |
<p>Standard paragraph in a callout.</p> | |
</div> | |
<div class="callout"> | |
<p class="page-specific-thing">Page specific paragraph in a callout.</p> | |
</div> | |
<div class="callout"> | |
<p>Standard paragraph in a callout.</p> | |
<div class="callout"> | |
<p>Standard paragraph in a callout.</p> | |
<div class="callout"> | |
<p>Standard paragraph in a callout.</p> | |
<div class="callout"> | |
<p>Standard paragraph in a callout.</p> | |
</div> | |
</div> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// libsass (v3.2.5) | |
// ---- | |
/* Demonstration page CSS */ | |
/* Works with or without themes */ | |
// Import button component IPE definition mixins | |
//@import "../components/callout/extends"; | |
// start /components/callout/extends: | |
// Define minimal use of placeholder extend | |
@mixin define-callout-solo() { | |
.callout { | |
@extend %cmp-callout; | |
} | |
} | |
@mixin define-callout() { | |
/* Note that comments or styles inside a component's definition will appear | |
wherever people actually do their defining! */ | |
// So stick with these. | |
.callout { | |
@extend %cmp-callout; | |
&-alert { | |
@extend %cmp-callout_alert; // For example, lets require that all callout components style an alert version | |
} | |
&-warning { | |
@extend %cmp-callout_warning !optional; | |
} | |
&-positive { | |
@extend %cmp-callout_positive !optional; | |
} | |
} | |
} | |
// end /components/callout/extends: | |
// Include the minimal callout components' IPE definitions | |
@include define-callout-solo(); | |
.page-specific-thing { | |
color: orange; | |
} | |
/* Style the callout component by its IPE definition */ | |
%cmp-callout { | |
width: 80%; | |
margin: 1em auto; | |
border: 1px solid; | |
border-color: red; | |
.page-specific-thing { | |
text-decoration: underline; | |
} | |
// Can also include components by their IPE definitions! | |
> %cmp-callout { | |
width: 98%; | |
border-color: blue; | |
//border-bottom: none; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Demonstration page CSS */ | |
/* Works with or without themes */ | |
.page-specific-thing { | |
color: orange; | |
} | |
/* Style the callout component by its IPE definition */ | |
.callout { | |
width: 80%; | |
margin: 1em auto; | |
border: 1px solid; | |
border-color: red; | |
} | |
.callout .page-specific-thing { | |
text-decoration: underline; | |
} | |
.callout > .callout { | |
width: 98%; | |
border-color: blue; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<p>Standard paragraph.</p> | |
<p class="page-specific-thing">Page specific paragraph.</p> | |
<div> | |
<p>Standard paragraph in a div.</p> | |
</div> | |
<div class="callout"> | |
<p>Standard paragraph in a callout.</p> | |
</div> | |
<div class="callout"> | |
<p class="page-specific-thing">Page specific paragraph in a callout.</p> | |
</div> | |
<div class="callout"> | |
<p>Standard paragraph in a callout.</p> | |
<div class="callout"> | |
<p>Standard paragraph in a callout.</p> | |
<div class="callout"> | |
<p>Standard paragraph in a callout.</p> | |
<div class="callout"> | |
<p>Standard paragraph in a callout.</p> | |
</div> | |
</div> | |
</div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment