Slope Calc
Notes|Caveats
Slope-calc import must come at the end of your @use
rules (if applicable), but before all other non-use rules so that we can properly use "sass:math" and prevent the following error
SassError: @use rules must be written before any other rules.
// app.scss
@charset "UTF-8";
@use X;
@use Y;
@import "@union/scss-slope-calc";
// (^ This places `@use "sass:math";` before non-use rules, followed by slope-calc
Example
Scss Input:
.my-widget {
@include slope-calc(padding, 20px 320px, 60px 1440px);
}
CSS Result:
.my-widget {
padding: calc(3.57143vw + .53571rem);
}
Usage
The first argument is a single property or a list of properties (space separated).
The following arguments are lists containing 2 numbers. The first item is the target value. The second item is the screen width that the property should equal the first value.
Flags
Flags are an optional argument passed in as the last argument. In scss, strings work with or without quotes.
-
important
apply the css "!important" flag to the property (or properties) at all breakpoints.Scss Input:
.my-widget { @include slope-calc(padding, 20px 320px, 60px 1440px, 60px 1441px, important); }
CSS Result:
.my-widget { padding: calc(3.57143vw + .53571rem) !important; } @media only screen and (min-width: 90em) { .my-widget { padding: 3.75rem !important; } }
-
clip
add a media query at the largest breakpoint that sets the property to a fixed valueScss Input:
.my-widget { @include slope-calc(padding, 20px 320px, 60px 1440px, clip); }
CSS Result:
.my-widget { padding: calc(3.57143vw + .53571rem); } @media only screen and (min-width: 90em) { .my-widget { padding: 3.75rem; } }
More Examples
Scss Input:
.my-widget {
@include slope-calc(margin padding, 20px 320px, 60px 1440px, clip);
}
CSS Result:
.my-widget {
margin: calc(3.57143vw + .53571rem);
padding: calc(3.57143vw + .53571rem);
}
@media only screen and (min-width: 90em) {
.my-widget {
margin: 3.75rem;
}
}
@media only screen and (min-width: 90em) {
.my-widget {
padding: 3.75rem;
}
}
Browser Support
- IE 9+
- Chrome 19+
- Firefox 4+
- Safari 6+
- Android 4.4+