Skip to content

Instantly share code, notes, and snippets.

@heldr
Created June 3, 2014 21:53
Show Gist options
  • Save heldr/9e2177c0a8d5594d724f to your computer and use it in GitHub Desktop.
Save heldr/9e2177c0a8d5594d724f to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<article class="post">
<h1 class="post__title">Title</h1>
<picture class="post__picture">
<img src="article/picture.jpg" alt="Something" />
</picture>
<p class="post__description">
Lorem ipsum...
</p>
</article>
<article class="post post--highlight">
<h1 class="post__title">Title</h1>
<picture class="post__picture">
<img src="article/picture.jpg" alt="Something" />
</picture>
<p class="post__description">
Lorem ipsum...
</p>
</article>
<article class="post">
<h1 class="post__title">Title</h1>
<picture class="post__picture">
<img src="article/picture.jpg" alt="Something" />
</picture>
<p class="post__description">
Lorem ipsum...
</p>
</article>
// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----
/*_post.scss*/
$module: 'post';
.#{$module} {
padding: 5px;
&__title {
font-size: 20px;
font-weight: 400;
}
&__description {
line-height: 15px;
font-size: 14px;
}
&__picture {
float: left;
max-width: 30%;
}
/* Here start our Modifier */
&--highlight {
background-color: #F0F0F0;
.#{$module}__title {
font-color: #000;
font-weight: 800;
}
}
}
/*_post.scss*/
.post {
padding: 5px;
/* Here start our Modifier */
}
.post__title {
font-size: 20px;
font-weight: 400;
}
.post__description {
line-height: 15px;
font-size: 14px;
}
.post__picture {
float: left;
max-width: 30%;
}
.post--highlight {
background-color: #F0F0F0;
}
.post--highlight .post__title {
font-color: #000;
font-weight: 800;
}
<article class="post">
<h1 class="post__title">Title</h1>
<picture class="post__picture">
<img src="article/picture.jpg" alt="Something" />
</picture>
<p class="post__description">
Lorem ipsum...
</p>
</article>
<article class="post post--highlight">
<h1 class="post__title">Title</h1>
<picture class="post__picture">
<img src="article/picture.jpg" alt="Something" />
</picture>
<p class="post__description">
Lorem ipsum...
</p>
</article>
<article class="post">
<h1 class="post__title">Title</h1>
<picture class="post__picture">
<img src="article/picture.jpg" alt="Something" />
</picture>
<p class="post__description">
Lorem ipsum...
</p>
</article>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment