Skip to content

Instantly share code, notes, and snippets.

@lyzadanger
Last active August 29, 2015 14:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lyzadanger/6cab649a48b6d6913b03 to your computer and use it in GitHub Desktop.
Save lyzadanger/6cab649a48b6d6913b03 to your computer and use it in GitHub Desktop.
Jacket + Custom MQ-handling Mixin
body {
margin: 2em;
}
.button {
background-color: #007dc6;
border-radius: 0.25em;
box-sizing: border-box;
color: #fff;
display: inline-block;
line-height: 1;
padding: 0.6em 1em;
text-decoration: none;
transition: opacity 250ms ease-in-out;
&:hover,
&:focus {
@include opacity(0.75);
}
}
.button-group {
list-style: none none;
margin: 0;
padding: 0;
.button {
display: block;
text-align: center;
width: 100%;
&:hover,
&:focus {
z-index: 2;
}
}
@include respond-to(small) {
li:not(:first-child) .button {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
li:not(:last-child) .button {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
@include respond-to(large, naked) {
display: table;
table-layout: fixed;
width: 100%;
li {
display: table-cell;
}
li:not(:first-child) .button {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
li:not(:last-child) .button {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
}
}
$breakpoints: (
'small' : 'screen and ( max-width: 479px )',
'large' : 'screen and ( min-width: 480px )'
);
@mixin opacity($amount) {
$perc: $amount * 100;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + $perc + ")";
/* IE 5-7 */
filter: alpha(opacity=$perc);
/* Netscape */
-moz-opacity: $amount;
/* Safari 1.x */
-khtml-opacity: $amount;
/* Good browsers */
opacity: $amount;
}
@mixin respond-to($name, $wrap: mq) {
// If we're inside of a context where there are no media queries
@include jacket(noqueries) {
// If $wrap is set to naked, include this content unwrapped no matter
// what else the context is
@if $wrap == naked {
@content;
} @else {
// Include this unwrapped if we are also in the $name context
@include jacket($name) {
@content;
}
}
}
@include jacket(queries) {
// If we're in a context that does want MQs
@if map-has-key($breakpoints, $name) {
// Prints a media query based on the value
@media #{map-get($breakpoints, $name)} {
@content;
}
}
// If the key doesn't exist in the map
@else {
@warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
+ "Please make sure it is defined in `$breakpoints` map.";
}
}
}
/* line 1, ../sass/_button-group.scss */
body {
margin: 2em;
}
/* line 5, ../sass/_button-group.scss */
.button {
background-color: #007dc6;
border-radius: 0.25em;
box-sizing: border-box;
color: #fff;
display: inline-block;
line-height: 1;
padding: 0.6em 1em;
text-decoration: none;
transition: opacity 250ms ease-in-out;
}
/* line 16, ../sass/_button-group.scss */
.button:hover, .button:focus {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
/* IE 5-7 */
filter: alpha(opacity=75);
/* Netscape */
-moz-opacity: 0.75;
/* Safari 1.x */
-khtml-opacity: 0.75;
/* Good browsers */
opacity: 0.75;
}
/* line 22, ../sass/_button-group.scss */
.button-group {
list-style: none none;
margin: 0;
padding: 0;
display: table;
table-layout: fixed;
width: 100%;
}
/* line 27, ../sass/_button-group.scss */
.button-group .button {
display: block;
text-align: center;
width: 100%;
}
/* line 32, ../sass/_button-group.scss */
.button-group .button:hover, .button-group .button:focus {
z-index: 2;
}
/* line 55, ../sass/_button-group.scss */
.button-group li {
display: table-cell;
}
/* line 59, ../sass/_button-group.scss */
.button-group li:not(:first-child) .button {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
/* line 64, ../sass/_button-group.scss */
.button-group li:not(:last-child) .button {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
@import 'jacket';
@import 'mixins';
$jacket: noqueries, ie;
@import 'button-group';
/* line 1, ../sass/_button-group.scss */
body {
margin: 2em;
}
/* line 5, ../sass/_button-group.scss */
.button {
background-color: #007dc6;
border-radius: 0.25em;
box-sizing: border-box;
color: #fff;
display: inline-block;
line-height: 1;
padding: 0.6em 1em;
text-decoration: none;
transition: opacity 250ms ease-in-out;
}
/* line 16, ../sass/_button-group.scss */
.button:hover, .button:focus {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
/* IE 5-7 */
filter: alpha(opacity=75);
/* Netscape */
-moz-opacity: 0.75;
/* Safari 1.x */
-khtml-opacity: 0.75;
/* Good browsers */
opacity: 0.75;
}
/* line 22, ../sass/_button-group.scss */
.button-group {
list-style: none none;
margin: 0;
padding: 0;
}
/* line 27, ../sass/_button-group.scss */
.button-group .button {
display: block;
text-align: center;
width: 100%;
}
/* line 32, ../sass/_button-group.scss */
.button-group .button:hover, .button-group .button:focus {
z-index: 2;
}
@media screen and (max-width: 479px) {
/* line 39, ../sass/_button-group.scss */
.button-group li:not(:first-child) .button {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
/* line 44, ../sass/_button-group.scss */
.button-group li:not(:last-child) .button {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
@media screen and (min-width: 480px) {
/* line 22, ../sass/_button-group.scss */
.button-group {
display: table;
table-layout: fixed;
width: 100%;
}
/* line 55, ../sass/_button-group.scss */
.button-group li {
display: table-cell;
}
/* line 59, ../sass/_button-group.scss */
.button-group li:not(:first-child) .button {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
/* line 64, ../sass/_button-group.scss */
.button-group li:not(:last-child) .button {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
}
@import 'jacket';
@import 'mixins';
$jacket: queries;
@import 'button-group';
@lyzadanger
Copy link
Author

This mixin is the key.

@lyzadanger
Copy link
Author

The screen.css and ie.css are the output. The gist reordered my files alphabetically :).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment