Created
July 2, 2021 15:26
-
-
Save kennylam/6c96a0313a64ea9a8a83761c69490245 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
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
| $color: green; | |
| $carbon--base-font-size: 16px !default; | |
| /// Convert a given px unit to a rem unit | |
| /// @param {Number} $px - Number with px unit | |
| /// @return {Number} Number with rem unit | |
| /// @access public | |
| /// @group @carbon/layout | |
| @function carbon--rem($px) { | |
| @if unit($px) != 'px' { | |
| // TODO: update to @error in v11 | |
| @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`"; | |
| } | |
| @return ($px / $carbon--base-font-size) * 1rem; | |
| } | |
| $carbon--grid-breakpoints: ( | |
| sm: ( | |
| columns: 4, | |
| margin: 0, | |
| width: carbon--rem(320px), | |
| ), | |
| md: ( | |
| columns: 8, | |
| margin: carbon--rem(16px), | |
| width: carbon--rem(672px), | |
| ), | |
| lg: ( | |
| columns: 16, | |
| margin: carbon--rem(16px), | |
| width: carbon--rem(1056px), | |
| ), | |
| xlg: ( | |
| columns: 16, | |
| margin: carbon--rem(16px), | |
| width: carbon--rem(1312px), | |
| ), | |
| max: ( | |
| columns: 16, | |
| margin: carbon--rem(24px), | |
| width: carbon--rem(1584px), | |
| ), | |
| ) !default; | |
| @mixin carbon--breakpoint-between( | |
| $lower, | |
| $upper, | |
| $breakpoints: $carbon--grid-breakpoints | |
| ) { | |
| $is-number-lower: type-of($lower) == 'number'; | |
| $is-number-upper: type-of($upper) == 'number'; | |
| $min: if($is-number-lower, $lower, map-get($breakpoints, $lower)); | |
| $max: if($is-number-upper, $upper, map-get($breakpoints, $upper)); | |
| @if $min and $max { | |
| $min-width: if( | |
| not $is-number-lower and $min, | |
| map-get($min, width) + 0.02, | |
| $min | |
| ); | |
| $max-width: if( | |
| not $is-number-upper and $max, | |
| map-get($max, width) - 0.02, | |
| $max | |
| ); | |
| @media (min-width: $min-width) and (max-width: $max-width) { | |
| @content; | |
| } | |
| } @else if $min != null and $max == null { | |
| @include carbon--breakpoint-up($lower) { | |
| @content; | |
| } | |
| } @else if $min == null and $max != null { | |
| @include carbon--breakpoint-down($upper) { | |
| @content; | |
| } | |
| } @else { | |
| @error 'Unable to find a breakpoint to satisfy: (#{$lower},#{$upper}). Expected both to be one of (#{map-keys($breakpoints)}).'; | |
| } | |
| } | |
| .foo { | |
| @include carbon--breakpoint-between('md', 'lg') { | |
| padding: 0; | |
| } | |
| }@import "breakpoint"; |
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
| @media (min-width: 42.02rem) and (max-width: 65.98rem) { | |
| .foo { | |
| padding: 0; | |
| } | |
| } |
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
| { | |
| "sass": { | |
| "compiler": "dart-sass/1.32.12", | |
| "extensions": {}, | |
| "syntax": "SCSS", | |
| "outputStyle": "expanded" | |
| }, | |
| "autoprefixer": false | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment