Pricing Component made with React and Sass

Community feedback

• 

  P

  Arnold Limberg•410

  @CreativeLogicPosted 7 months ago

  Hi. Great job. However, the design called for different prices. You seem to have an extra 9 for each price. May I ask, why do you like SASS so much? I recently learned native CSS has nesting. Is there a justification to learn SASS for some more minor features?

  1

  ---

  

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 7 months ago

  Hello @CreativeLogic, ah it's not and extra 9, it's because I switched the initial state, the right one is monthly but I setted as Annually, this is the reason why is showing an extra 9.

  What strongly drives me to choose Sass is its ability to use mixins. Even though I don't use them extensively in my solutions, I appreciate them and see them as essential sometimes. Thanks to mixins and conditionals in Sass, I'm able to create my portfolio. I also appreciate the extra organization it provides with the use of partial files, like _var.scss, _reset.scss and so on. But in summary, almost everything that can be done in Sass can also be done in CSS.

  0

  

  P

  Arnold Limberg•410

  @CreativeLogicPosted 7 months ago

  @R3ygoski

  I see. I will have to look into mixins. It just seems to me that native CSS is adopting the features of SASS and it may not be worth the overhead of learning it and configuring it anymore.

  0

  

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 7 months ago

  @CreativeLogic Yes, CSS indeed has several features that are similar to Sass. Nowadays, I wouldn't necessarily advise someone to switch to Sass unless they need to use features like mixins or want to maintain better code organization.

  0

  

  P

  Arnold Limberg•410

  @CreativeLogicPosted 7 months ago

  @R3ygoski

  Quick question. You have a lot of experience. When we do these projects, the Figma files usually have a set height. So far, as far as I've seen, about 50rem(like people with 4k monitors). I usually set min-height:50rem on the body. Someone suggested I use viewport units to write less code, but isn't it an issue when the designs call for a set height. If your viewport exceeds 50rem it wont be centered perfectly anymore, right? I want it to be as close to perfect as possible when I upload my project, which shows on the slider.

  0

  

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 7 months ago

  @CreativeLogic The choice between using viewport units or relative units largely depends on the design and project requirements.

  If the Figma design specifies a fixed height of 50rem, then it makes sense to use min-height: 50rem for the body to ensure that the design is maintained as specified.

  And yes, you are correct, if the viewport height exceeds 50rem, it will cause it to be off-centered. However, to solve this, you can use display: flex; and its related properties to center your project.

  For the most part, I don't set a maximum height for my project. I prefer to leave the body with height: auto; and adjust the content within it as needed.

  1