Skip to content

Instantly share code, notes, and snippets.

@bubbleheadinc
Created June 22, 2015 17:30
Show Gist options
  • Save bubbleheadinc/4f0f8f895548c438c2b7 to your computer and use it in GitHub Desktop.
Save bubbleheadinc/4f0f8f895548c438c2b7 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----
$ns: 'cm-';
$max-site-width: 80rem;
$gt-mobile-port: 25em;
$gt-mobile: 40em;
$gt-tablet-port: 50em;
$gt-tablet-port-1: 53.25em; // tweakpoint
$gt-tablet-port-2: 65em; // tweakpoint
$at-max: $max-site-width;
// ++++++++ Media Queries ++++++++
// Breakpoints
$fix-mqs: false !default; // width set in OLD IE scss file
@mixin x-breakpoint($point) {
// If we're outputting for a fixed media query set...
@if $fix-mqs {
// ...and if we should apply these rules...
@if $fix-mqs >= $at-max {
// ...output the content the user gave us.
@content;
}
}
@else {
@if $point == gt-mobile-port { // when screen size is greater than default mobile to tablet portrait
@media (min-width: $gt-mobile-port) { @content; }
}
@if $point == gt-mobile { // when screen size is greater than default mobile to tablet portrait
@media (min-width: $gt-mobile) { @content; }
}
@if $point == gt-tablet-port { // when screen size is greater than tablet portrait to landscape
@media (min-width: $gt-tablet-port) { @content; }
}
@if $point == gt-tablet-port-1 { // when screen size is greater than tablet portrait to landscape
@media (min-width: $gt-tablet-port-1) { @content; }
}
@if $point == gt-tablet-port-2 { // when screen size is greater than tablet portrait to landscape
@media (min-width: $gt-tablet-port-2) { @content; }
}
@if $point == at-max { // when screen size is at maximum width
@media (min-width: $at-max) { @content; }
}
// @else if $point == gt- {
// @media (min-width: 650px) { @content; }
// }
}
}
// For Old IE
$old-ie: false !default; // Turned on in OLD IE scss
@mixin old-ie {
// Only use this content if we're dealing with old IE
@if $old-ie {
@content;
}
}
.#{$ns}feature{
color: magenta;
.#{$ns}asset__title{
@include x-breakpoint(gt-tablet-port-2){
padding-bottom: 3rem;
}
}
.#{$ns}asset__headline{
font-size: rem(32px);
@include x-breakpoint(gt-tablet-port-2){
font-size: rem(40px);
}
}
}
/* blabhalbhlakb */
.#{$ns}feature{
color: magenta;
@include x-breakpoint(gt-tablet-port-2){
.#{$ns}asset__title{
padding-bottom: 3rem;
}
.#{$ns}asset__headline{
font-size: rem(40px);
}
}
.#{$ns}asset__headline{
font-size: rem(32px);
}
}
.cm-feature {
color: magenta;
}
@media (min-width: 65em) {
.cm-feature .cm-asset__title {
padding-bottom: 3rem;
}
}
.cm-feature .cm-asset__headline {
font-size: rem(32px);
}
@media (min-width: 65em) {
.cm-feature .cm-asset__headline {
font-size: rem(40px);
}
}
/* blabhalbhlakb */
.cm-feature {
color: magenta;
}
@media (min-width: 65em) {
.cm-feature .cm-asset__title {
padding-bottom: 3rem;
}
.cm-feature .cm-asset__headline {
font-size: rem(40px);
}
}
.cm-feature .cm-asset__headline {
font-size: rem(32px);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment