Sass Responsive Interpolation

Hello again! I have another unpublished post from the past today. This was a short and sweet explanation for a small SCSS script I made to help myself have better control over responsive websites. I didn't write a lot, but I don't think it would have made sense if I wrote more.



November 2, 2019

I know I haven't posted on this blog in awhile, but I did a thing. I actually reinvented responsive CSS for no reason! No Javascript involved :)



Basically the this project does linear interpolation of any CSS attribute between two breakpoints in SCSS (Sass).

Here's how it looks in usage.

@import 'responsive-interpolation';

$left-breakpoint 800px;
$right-breakpoint: 2000px;

$top-breakpoint 800px;
$bottom-breakpoint: 2000px;

#my-responsive-box {
    // This will interpolate the box's width and height to go from 150px to 350px from the left breakpoint
    // to the right breakpoint.
    @include responsive-interpolate-x( ("width","height"), 150px, 350px, $left-breakpoint, $left-breakpoint );
}

#my-responsive-text {
    // This will interpolate the text's font size to go from 32px to 55px from the left breakpoint
    // to the right breakpoint.
    @include responsive-interpolate-x( "font-size", 32px, 55px, $left-breakpoint, $right-breakpoint );
}

#my-responsive-moving-box {
    // This will interpolate the box's x and y position by using the margin left and
    // margin top going from 250px to 0px from the top breakpoint to the bottom breakpoint.
    @include responsive-interpolate-y( ("margin-left","margin-top"), 250px, 0px, $top-breakpoint, $bottom-breakpoint );
}

If you want to see how I made this work, dig into the source below!



Comments

Popular posts from this blog

Follow Up on Corona Labs (now Solar2d)

Super Smash Clash Release for Google Play