Last active
January 23, 2024 08:37
-
-
Save doughamlin/7103259 to your computer and use it in GitHub Desktop.
SCSS mixins for sizing fonts, paddings and margins with rem units and px unit fallbacks.Width mixin not included because you should use percentages for that (although you should arguably do the same for padding and margin too).
This file contains 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
@mixin font-size($size) { | |
font-size: $size + px; | |
font-size: ($size/10) + rem; | |
} | |
@mixin height($size) { | |
height: $size + px; | |
height: ($size/10) + rem; | |
} | |
@mixin min-height($size) { | |
min-height: $size + px; | |
min-height: ($size/10) + rem; | |
} | |
@mixin max-height($size) { | |
max-height: $size + px; | |
max-height: ($size/10) + rem; | |
} | |
@mixin width($size) { | |
width: $size + px; | |
width: ($size/10) + rem; | |
} | |
@mixin min-width($size) { | |
min-width: $size + px; | |
min-width: ($size/10) + rem; | |
} | |
@mixin max-width($size) { | |
max-width: $size + px; | |
max-width: ($size/10) + rem; | |
} | |
@mixin margin($margin) { | |
@if length($margin) == 1 { | |
margin: $margin+px; | |
margin: $margin/10+rem; | |
} | |
@if length($margin) == 2 { | |
margin: nth($margin, 1)+px nth($margin, 2)+px; | |
margin: nth($margin, 1)*0.1+rem nth($margin, 2)*0.1+rem; | |
} | |
@if length($margin) == 3 { | |
margin: nth($margin, 1)+px nth($margin, 2)+px nth($margin, 3)+px; | |
margin: nth($margin, 1)*0.1+rem nth($margin, 2)*0.1+rem nth($margin, 3)*0.1+rem; | |
} | |
@if length($margin) == 4 { | |
margin: nth($margin, 1)+px nth($margin, 2)+px nth($margin, 3)+px nth($margin, 4)+px; | |
margin: nth($margin, 1)*0.1+rem nth($margin, 2)*0.1+rem nth($margin, 3)*0.1+rem nth($margin, 4)*0.1+rem; | |
} | |
} | |
@mixin margin-top($margin) { | |
margin-top: $margin+px; | |
margin-top: $margin/10+rem; | |
} | |
@mixin margin-right($margin) { | |
margin-right: $margin+px; | |
margin-right: $margin/10+rem; | |
} | |
@mixin margin-bottom($margin) { | |
margin-bottom: $margin+px; | |
margin-bottom: $margin/10+rem; | |
} | |
@mixin margin-left($margin) { | |
margin-left: $margin+px; | |
margin-left: $margin/10+rem; | |
} | |
@mixin padding($padding) { | |
@if length($padding) == 1 { | |
padding: $padding+px; | |
padding: $padding/10+rem; | |
} | |
@if length($padding) == 2 { | |
padding: nth($padding, 1)+px nth($padding, 2)+px; | |
padding: nth($padding, 1)*0.1+rem nth($padding, 2)*0.1+rem; | |
} | |
@if length($padding) == 3 { | |
padding: nth($padding, 1)+px nth($padding, 2)+px nth($padding, 3)+px; | |
padding: nth($padding, 1)*0.1+rem nth($padding, 2)*0.1+rem nth($padding, 3)*0.1+rem; | |
} | |
@if length($padding) == 4 { | |
padding: nth($padding, 1)+px nth($padding, 2)+px nth($padding, 3)+px nth($padding, 4)+px; | |
padding: nth($padding, 1)*0.1+rem nth($padding, 2)*0.1+rem nth($padding, 3)*0.1+rem nth($padding, 4)*0.1+rem; | |
} | |
} | |
@mixin padding-top($padding) { | |
padding-top: $padding+px; | |
padding-top: $padding/10+rem; | |
} | |
@mixin padding-right($padding) { | |
padding-right: $padding+px; | |
padding-right: $padding/10+rem; | |
} | |
@mixin padding-bottom($padding) { | |
padding-bottom: $padding+px; | |
padding-bottom: $padding/10+rem; | |
} | |
@mixin padding-left($padding) { | |
padding-left: $padding+px; | |
padding-left: $padding/10+rem; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
!important use??