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

Post a Comment

Popular posts from this blog

Retiring from App Maker Professional

Image
The sunken cost fallacy is when one refuses to change their mind because they invested so much into their initial choice. Today, I had to acknowledge that I fell for this fallacy. In November 2019, I came up with the idea of an "app to make apps" and began hacking together SwiftUI code to build an MVP. Like most tech projects, getting 90% there takes about 10% of the time. I uploaded my MVP in December to YouTube here.  https://www.youtube.com/watch?v=WTN4_X4D6I4 App Maker MVP Dec. 2019 But things were quickly about to get out of hand. I decided the app should support importing Swift code. This increased the complexity of the code considerably. I needed to program a way to convert SwiftUI code into my own editor's model. Code Exports in App Maker MVP I chose  SwiftSyntax  to get an AST of the Swift code. Then I made increasingly more complex AST tree walkers. Before you know it, I added so many features that my AST walker could qualify as an AST interpreter! App Maker now
Read more

Follow Up on Corona Labs (now Solar2d)

 Wow! Has Vlad done a great job with the Solar2d game engine after Corona Labs shutdown! As I said in a previous post, Corona SDK (now renamed to Solar2d for obvious reasons) is mobile focused game engine close to my heart. It was owned by a company called Corona Labs which recently shutdown. Now the engine is open source. And the community still very active! So over the Summer I was able to contribute to the budding Solar2d community by creating some plugins and open sourcing previous paid plugins. Here's a list of plugins I've created. SolarWebSockets  - Websocket support for iOS, tvOS, Android, HTML5 (and someone needs to help me with Windows because I don't have a PC). Supports server and client and WSS for clients. I'm very proud of having made most of this in span of one night. QuickJs  - A way to call Javascript code in Solar2d without all the extra boilerplate Material Colors - Easy way to choose colors from code eTransition  - Control the playback of Solar2d
Read more