Mobile Responsive React Page in 30 sec's using SCSS

Hrishikesh Mahalle — Tue, 17 Aug 2021 06:18:49 +0000

Mobile responsiveness is one of that annoying jobs which developers needs to do but still procrastinates. Also this is same reason why UI/UX libraries gets boost amongst beginners. Now although it a good thing, but at the same time it not worth it since we gain nothing!

Hence the trick which I'm gonna share can be used in react projects via declaring a global variable of styles using SCSS and then applying them over all Styles

Step 1- Global SCSS:

Code:

$width:768px;

@mixin mobile {
    @media(max-width: #{$width}){
        @content
    }
}

As we can see that the global.scss is initialized with width as a variable. This width denotes the size after which our Mobile elements shall come into use(or start working).

Step 2 - Implement and use:

Code:

@import "../../global.scss";

.intro{
    background-color: blue;
    display: flex;

    @include mobile{
        flex-direction: column;
        align-items: center;
        overflow: hidden;
    }
}

Now here once we implement the global variable in local styles, we can directly use @include mobile from the Global variable and write our adjustments for the section.

And with this we have implemented a better Mobile Responsive Code within No time spend.

Thank You for reading. Peace!

SCSS v/s CSS! Who takes the Final Jab?

Hrishikesh Mahalle — Mon, 16 Aug 2021 20:21:17 +0000

What appeals more fascinating, a wall with just coat plaster or a wall with shades of Paint, and the same goes for the design of House, Buildings, Mobiles and what not. And when it comes to designing a webpage the CSS(Cascading Style Sheets) is the backbone for every Color bit. CSS helps in styling and arranging the HTML code.

But we always have a chance to work with the 'Better alternative' namely SCSS which is subset of CSS. Now although SCSS provides more like a programming feature but has its limitations.

From the Above image we can clearly see that, the repetitiveness is far reduced a lot better, and that's just a single example of many.
Now although SCSS if more like a programing but SCSS variables are determined at the pre-processing stage when SCSS is converted to CSS. Therefore, the se of variables and code re-use is better in performance with SCSS.

Should we opt for CSS from SCSS?

Understanding how the SCSS is to implemented, it gets more and more habituated to use SCSS over CSS since it's efficient to write.

Also with the boom of web application, stylesheets tend to become complex and larger. Thus some handy feature of SCSS like the
CSS isn’t capable of handling flow control rules. SCSS provides @if, @else, @each, $for, and @while flow control rules out of the box.
SCSS supports the standard set of numeric operators for numbers wherein CSS you have to use calc() function for numeric operations. SCSS numeric operations will automatically convert between compatible units.
Thus we can understand that the SCSS is quite useful and shall help to work quit easier while compared to CSS. Hence although CSS is improving, but still has a long way up, before it even reaches the SCSS.

I hope you enjoyed the article. Thanks for reading!

DEV Community: Hrishikesh Mahalle

Mobile Responsive React Page in 30 sec's using SCSS

Step 1- Global SCSS:

Code:

Step 2 - Implement and use:

Code:

SCSS v/s CSS! Who takes the Final Jab?

Should we opt for CSS from SCSS?