Skip to content

Instantly share code, notes, and snippets.

@doughamlin
Last active January 23, 2024 08:37
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save doughamlin/7103259 to your computer and use it in GitHub Desktop.
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).
@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;
}
@jangsugn
Copy link

!important use??

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