Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----
/* Media query breakpoints */
$mw576: "(min-width: 576px)";
$mw768: "(min-width: 768px)";
$mw992: "(min-width: 992px)";
$mw1200: "(min-width: 1200px)";
$maxw600: "(max-width: 600px)";
$maxw1024: "(max-width: 1024px)";
/* Container*/
$container-max-width: ($mw576: 540px, $mw768: 720px, $mw992: 960px, $mw1200: 1140px);
/* Padding|Margins */
$pl: ('default': 15px, $mw576: 30px, $mw768: 30px, $mw992: 15px, $mw1200: 15px);
$pr: ('default': 15px, $mw576: 30px, $mw768: 30px, $mw992: 15px, $mw1200: 15px);
/* Typography */
$title1-fz: ('default': 30px, $mw576: 32px, $mw768: 36px, $mw992: 48px, $mw1200: 48px);
$title2-fz: ('default': 36px, $mw576: 36px, $mw768: 36px, $mw992: 48px, $mw1200: 48px); //**//
$title3-fz: ('default': 26px, $mw576: 26px, $mw768: 26px, $mw992: 30px, $mw1200: 30px);
$title4-fz: ('default': 36px, $mw576: 36px, $mw768: 36px, $mw992: 48px, $mw1200: 48px); //**//
$title5-fz: ('default': 20px, $mw576: 20px, $mw768: 20px, $mw992: 24px, $mw1200: 24px);
$title6-fz: ('default': 36px, $mw576: 36px, $mw768: 36px, $mw992: 48px, $mw1200: 48px); //**//
$title1-lh: ('default': 32px, $mw576: 32px, $mw768: 36px, $mw992: 48px, $mw1200: 48px);
$title2-lh: ('default': 36px, $mw576: 36px, $mw768: 36px, $mw992: 48px, $mw1200: 48px); //**//
$title3-lh: ('default': 28px, $mw576: 28px, $mw768: 28px, $mw992: 36px, $mw1200: 36px);
$title4-lh: ('default': 36px, $mw576: 36px, $mw768: 36px, $mw992: 48px, $mw1200: 48px); //**//
$title5-lh: ('default': 23px, $mw576: 23px, $mw768: 23px, $mw992: 29px, $mw1200: 29px);
$title6-lh: ('default': 36px, $mw576: 36px, $mw768: 36px, $mw992: 48px, $mw1200: 48px); //**//
$body-fz: ('default': 16px, $mw576: 16px, $mw768: 16px, $mw992: 18px, $mw1200: 18px);
$body-lh: ('default': 25px, $mw576: 25px, $mw768: 25px, $mw992: 31px, $mw1200: 31px);
@mixin container($responsiveValues) {
& {
margin: 0 auto;
padding-left: map-get($pl, "default");
padding-right: map-get($pr, "default");
}
@each $media, $value in $responsiveValues {
@media #{$media} {
& {
max-width: $value;
padding-left: map-get($pl, $media);
padding-right: map-get($pr, $media);
}
}
}
}
.Container{
@include container($container-max-width);
}
@media #{$mw576} {
.Class {
font-size:20px;
}
}
/* Response a rule */
@mixin response-rule($property, $defaultValue, $responsiveValues: ()) {
@if $defaultValue {
& {
#{$property}: $defaultValue;
}
}
@else {
& {
#{$property}: map-get($responsiveValues, "default");
}
}
@each $media, $value in $responsiveValues {
@if $media != "default" {
@media #{$media} {
& {
#{$property}: $value;
}
}
}
}
}
.CLASS {
@include response-rule("font-size", null, $title1-fz);
}
/* Media query breakpoints */
/* Container*/
/* Padding|Margins */
/* Typography */
.Container {
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
}
@media (min-width: 576px) {
.Container {
max-width: 540px;
padding-left: 30px;
padding-right: 30px;
}
}
@media (min-width: 768px) {
.Container {
max-width: 720px;
padding-left: 30px;
padding-right: 30px;
}
}
@media (min-width: 992px) {
.Container {
max-width: 960px;
padding-left: 15px;
padding-right: 15px;
}
}
@media (min-width: 1200px) {
.Container {
max-width: 1140px;
padding-left: 15px;
padding-right: 15px;
}
}
@media (min-width: 576px) {
.Class {
font-size: 20px;
}
}
/* Response a rule */
.CLASS {
font-size: 30px;
}
@media (min-width: 576px) {
.CLASS {
font-size: 32px;
}
}
@media (min-width: 768px) {
.CLASS {
font-size: 36px;
}
}
@media (min-width: 992px) {
.CLASS {
font-size: 48px;
}
}
@media (min-width: 1200px) {
.CLASS {
font-size: 48px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.