Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus cursus ante, et tempus ante blandit sit amet. Aliquam erat volutpat. Aenean placerat euismod nulla, nec lacinia elit placerat quis. Etiam ac mollis nulla, sit amet consectetur ligula. Vivamus accumsan leo et urna scelerisque, vel vulputate lorem sagittis. Nulla sodales dolor massa, a blandit ligula dictum eget. Nunc vel leo mollis, auctor lectus sed, egestas odio. Nullam tempor vitae nibh eu mollis. Ut ornare libero quis suscipit vulputate. Pellentesque aliquam est at libero maximus interdum. In tincidunt in odio sit amet malesuada. Suspendisse auctor bibendum diam ac tincidunt. Praesent risus libero, lacinia in augue sit amet, placerat hendrerit eros. Aenean vitae molestie lorem.
Proin at lacus odio. Quisque vehicula finibus nisi. Donec fermentum mi nunc. Praesent molestie sodales mattis. Duis convallis elit massa, eget dapibus nulla mollis et. Curabitur fringilla ex vitae massa fermentum facilisis. Proin id fringilla velit.
Duis eget metus dolor. Nullam cursus quam lorem, quis consectetur neque fringilla sit amet. Maecenas dui nulla, dictum ac sapien ut, pretium commodo risus. Praesent urna nulla, sagittis vitae nunc sed, ornare ultrices libero. Quisque fringilla id odio ultrices molestie. Cras eu lacus sed ligula sodales interdum. In lobortis turpis ac consequat lacinia.
h1 {
font-size: 12px;
@media (min-width: 400px) {
font-size: 16px;
}
@media (min-width: 600px) {
font-size: 20px;
}
@media (min-width: 800px) {
font-size: 24px;
}
@media (min-width: 1000px) {
font-size: 28px;
}
@media (min-width: 1200px) {
font-size: 32px;
}
@media (min-width: 1400px) {
font-size: 36px;
}
}
h1 {
@include sizing(
$font-size: (12px, 36px),
);
}
Top/bottom and left/right
h1 {
@include sizing(
$padding: (10px, 20px),
);
}
h1 {
@include sizing(
$padding-top: (10px, 20px),
$padding-bottom: (10px, 20px),
$padding-left: (10px, 40px),
$padding-right: (10px, 40px),
);
}
// Margin, padding, and border
h1 {
@include sizing(
$padding-tb: (10px, 20px),
$padding-lr: (10px, 40px),
);
}
$--sidebar
:root {
@include sizing(
$--header-height: (90px, 140px),
);
}
header {
height: var(--header-height);
width: 100%;
position: fixed;
top: 0;
left: 0;
}
body {
padding-top: var(--header-height);
}
button {
@include sizing(
$padding: (14px, 36px),
);
}
button {
@include sizing(
$padding: (1em, 3em),
);
}
button {
@include sizing(
$padding: (1rem, 3rem),
);
}
button {
@include sizing(
$padding: (5%, 12%),
);
}
$screen-sizes: 0, 375px, 414px, 480px, 576px, 768px, 992px, 1240px, 1540px, 1800px!default;
The value for start will be assigned at a screen width of 0. The end value is assigned at the last breakpoint.
h1 {
@include sizing(
$property-name: (start, end),
);
}
h1 {
@include sizing(
$font-size: (14px, 36px),
$margin-bottom: (10px, 20px),
$letter-spacing: (0px, 0px),
);
}
By default the property value will change from the start value to the end value on a linear scale. You can assign a ratio to change the scale to a curve. Increase a font size less for mobile and greater for desktop.
// Assign ratio to all properties
h1 {
@include sizing(
$font-size: (14px, 36px),
$margin-bottom: (10px, 20px),
$ratio: (.5),
);
}
// Assign a unique ratio for each property
h1 {
@include sizing(
$font-size: (14px, 36px, .5),
$margin-bottom: (10px, 20px, -.75),
);
}
h1 {
@include sizing(
$font-size: (14px, 40px),
$min: (3),
$max: (8),
);
}
h1 {
@include sizing(
$font-size: (14px, 40px),
$min: (3),
$max: (8),
$contain: (true),
);
}
h3 {
@include sizing(
$font-size: (14px, 40px),
$contain: (true),
$important: (true),
);
font-size: 12px;
}
Note: To override the ratio it must be set in the original mixin use.
// Set the defaults
h1, h2, h3, h4, h5, h6, p {
@include sizing(
$font-size: (14px, 36px),
$margin-bottom: (10px, 20px),
$ratio: (.5),
);
}
// Not Effiecient
h1 {
@include sizing(
$font-size: (18px, 36px),
$margin-bottom: (20px, 40px),
$ratio: (-1),
);
}
h1 {
--cs-font-size-start: 18;
--cs-font-size-end: 36;
--cs-font-size-ratio: -1;
--cs-margin-bottom-start: 20;
--cs-margin-bottom-end: 40;
--cs-margin-bottom-ratio: -1;
}
h2 {
--cs-font-size-start: 14;
--cs-font-size-end: 26;
--cs-font-size-ratio: 1;
--cs-margin-bottom-start: 15;
--cs-margin-bottom-end: 30;
--cs-margin-bottom-ratio: -1;
}
button {
@include sizing(
$font-size: (18px, 36px),
$letter-spacing: (1px, 3px),
$padding-tb: (8px, 12px),
$padding-lr: (12px, 24px),
);
&.sm {
--cs-scale: .75;
}
&.lg {
--cs-scale: 2;
}
}