Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
<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>
// ----
// 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;
}
}
/* 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;
}
<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