jakobud / poly-fluid-sizing Goto Github PK
View Code? Open in Web Editor NEWSASS mixin for linear interpolation between multiple values across multiple breakpoints using CSS calc() and viewport units
License: MIT License
SASS mixin for linear interpolation between multiple values across multiple breakpoints using CSS calc() and viewport units
License: MIT License
Hi, Thank you for this great sass mixin.
I was trying to create a css variable and got errors. Is this possible?
@include poly-fluid-sizing(
'--scale',
(
340px: 0.6,
860px: 1,
1600px: 1,
2000px: 1.2,
)
);
Here is the sandbox
https://codesandbox.io/s/xenodochial-tdd-p484z?file=/src/styles.module.scss
Hi Jako,
Thanks for releasing the math.div update!
Currently it looks like the new release is tagged on GitHub but not available on npm, any ideas?
https://www.npmjs.com/package/poly-fluid-sizing
Thanks!
Hello, I'm on Google Chrome v70 and I noticed that when I load this:
.h7 {
@include poly-fluid-sizing('font-size', (320px: 22px, 992px: 40px));
}
I got this:
.h7 {
font-size: 22px;
}
@media (min-width: 320px) {
.h7 {font-size: calc(2.67857vw + 13.42857px);
}
@media (min-width: 992px) {
.h7 {font-size: 40px;
}
But when my screen is greater than 992px, the first media query overrides the second.
It would fix everything to generate something like this:
.h7 {
font-size: 22px;
}
@media (min-width: 320px) and (max-width: 991.98px) {
.h7 {font-size: calc(2.67857vw + 13.42857px);
}
@media (min-width: 992px) {
.h7 {font-size: 40px;
}
EDIT : I did it for myself, I share it:
In your mixin poly-fluid-sizing, just replace this:
// Interpolated size through breakpoints
@for $i from 1 through ($length - 1) {
@media (min-width: nth($keys, $i)) {
$value1: map-get($map, nth($keys, $i));
$value2: map-get($map, nth($keys, ($i + 1)));
// If values are not equal, perform linear interpolation
@if ($value1 !=$value2) {
#{$property}: linear-interpolation((nth($keys, $i): $value1, nth($keys, ($i+1)): $value2));
}
@else {
#{$property}: $value1;
}
}
}
By this:
// Interpolated size through breakpoints
@for $i from 1 through ($length - 1) {
$value1: map-get($map, nth($keys, $i));
$value2: map-get($map, nth($keys, ($i + 1)));
@media (min-width: nth($keys, $i)) and (max-width: (nth($keys, ($i + 1))-0.02) )
{
#{$property}: linear-interpolation((nth($keys, $i): $value1, nth($keys, ($i+1)): $value2));
}
}
DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0
More info and automated migrator: https://sass-lang.com/d/slash-div
Can we update to use div()
?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.