Sum 2 numbers, wrong answers only

Liv — Thu, 09 Jun 2022 07:48:40 +0000

Hey Dev.to!
It is almost Friday, so lets start the day with a fun task, sum two numbers together. But without summing the two numbers together like this, like you would do normally:

const num1 = 2;
const num2 = 3;
const result = num1 + num2;
console.log(result);

I start with my solution:

const num1 = 2;
const num2 = 3;
const arr1 = new Array(num1).fill(0);
const arr2 = new Array(num2).fill(0);

const result = arr1.concat(arr2).length;
console.log(result);

Will be fun to see what Frankenstein Solutions you folks come up with. ⚗️🧑‍💻

Overriding third-party frameworks' SCSS: How its done (SCSS)

Liv — Wed, 14 Apr 2021 23:05:00 +0000

Introduction and backstory

We have all been there. You're working on a project and decided to use a third-party framework for the design on the website. Everything is going smooth and fine, you're maybe using a few of its component. Everything is looking good in a short moment of time.

But after working on it for a while, you look at the design and almost vomit. You don't like how each component have rounded corners by default. You know some CSS and apply

border-radius: 0;
Everything should been flat, right?
Wrong!
It is still the same design and in the framework's documentation, there's no option for disable round corners. You spend hours and hours trying to debug the code and search the web without any result.

This is based on a real problem I had the last few days until I solved it by...

Overriding its scss

First of all, you're going to need SCSS for this tutorial
'npm install -g sass'

After installation, make a main SCSS file, main.scss
We want to then import the framework's css in the main file, using @import

//FRAMEWORK
@import "~vuesax/dist/vuesax.css";

Then you need to find what classes you want to override in the framework, for me I want to make all vuesax cards have no border-radius. After some research, the styling is under the class .vs-card

Write the class name above the import and apply your custom CSS.

.vs-card{
border-radius: 0;
}

@import "~vuesax/dist/vuesax.css";

Import main.scss to your project and see your CSS overriding the framework's CSS.

Hope this helps you :)

Some words

This is my first blog post I've written to Dev.to as well a blog post in general. I decided to take the time to write this because on the web, I barely found any information on how to apply your CSS to a framework.
Wrote this at 1 AM in joy after finding the solution.

DEV Community: Liv

Sum 2 numbers, wrong answers only

Overriding third-party frameworks' SCSS: How its done (SCSS)

Introduction and backstory

Overriding its scss

Some words