Created
June 7, 2013 22:35
-
-
Save tmaslen/5732881 to your computer and use it in GitHub Desktop.
This file contains hidden or 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
| // How I have to do it | |
| @mixin image { | |
| background: #ccc; | |
| margin: 0 0 1.5em; | |
| padding-top: 4px; | |
| p { | |
| color: #666; | |
| font-style: italic; | |
| font-size: 12px; | |
| font-size: 1.2rem; | |
| line-height: 15px; | |
| line-height: 1.5rem; | |
| margin-bottom: 0; | |
| } | |
| } | |
| @if $typography_component { | |
| // Lots of CSS defining a typographic style | |
| .image { | |
| @include image; | |
| } | |
| .imageStretch { | |
| @include image; | |
| img { | |
| display: block; | |
| width: 100%; | |
| } | |
| } | |
| .imageCenter { | |
| @include image; | |
| clear: both; | |
| text-align: center; | |
| img { | |
| display: inline; | |
| } | |
| } | |
| .imageLeft, .imageRight { | |
| @include image; | |
| width: 100%; | |
| img { | |
| width: 100%; | |
| } | |
| } | |
| @include respondMinMax(640px, false) { | |
| .imageLeft { | |
| @include image; | |
| float: left; | |
| margin: 0 15px 5px 0; | |
| margin: 0 1.5rem 0.5rem 0; | |
| width: 50%; | |
| } | |
| .imageRight { | |
| @include image; | |
| float: right; | |
| margin: 0 0 5px 15px; | |
| margin: 0 0 0.5em 1.5rem; | |
| width: 50%; | |
| } | |
| } | |
| } | |
| // How I'd like to do it | |
| // This keeps the mixin closer to where its used. | |
| @if $typography_component { | |
| // Lots of CSS defining a typographic style | |
| @mixin image { | |
| background: #ccc; | |
| margin: 0 0 1.5em; | |
| padding-top: 4px; | |
| p { | |
| color: #666; | |
| font-style: italic; | |
| font-size: 12px; | |
| font-size: 1.2rem; | |
| line-height: 15px; | |
| line-height: 1.5rem; | |
| margin-bottom: 0; | |
| } | |
| } | |
| .image { | |
| @include image; | |
| } | |
| .imageStretch { | |
| @include image; | |
| img { | |
| display: block; | |
| width: 100%; | |
| } | |
| } | |
| .imageCenter { | |
| @include image; | |
| clear: both; | |
| text-align: center; | |
| img { | |
| display: inline; | |
| } | |
| } | |
| .imageLeft, .imageRight { | |
| @include image; | |
| width: 100%; | |
| img { | |
| width: 100%; | |
| } | |
| } | |
| @include respondMinMax(640px, false) { | |
| .imageLeft { | |
| @include image; | |
| float: left; | |
| margin: 0 15px 5px 0; | |
| margin: 0 1.5rem 0.5rem 0; | |
| width: 50%; | |
| } | |
| .imageRight { | |
| @include image; | |
| float: right; | |
| margin: 0 0 5px 15px; | |
| margin: 0 0 0.5em 1.5rem; | |
| width: 50%; | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment