CODEWITHSUNDEEP
reactjssass
jifakir
jifakir

Reputation: 106

Why CSS(sass) calc() method doesn't work in React?

At first look at my codes: JSX:

import React from "react";
import "./styles.scss";

export default function App() {
  return (
    <div className="App">
      <h1> This is a Portfolio Item </h1>
      <div className="item-container">
        <div className="img-container">
          <img
            src="https://tf-react-chester.now.sh/images/portfolio-image-5.jpg"
            alt="Portfolio 1"
          />
        </div>
        <h3>This is the Title of Item </h3>
        <h4>
          This is the description of Item. This is the description of Item.{" "}
        </h4>
      </div>
    </div>
  );
}

And CSS(SASS):

.App {
  .item-container {
    width: 100%;
    height:auto;
    .img-container {
      position: relative;
      $margin: 20px;
      &::before{
        position: absolute;
        content: '';
        **width: calc(100%-20px);
        height: calc(100%-20px);** /* These two line don't work. */
        left: 10px;
        top: 10px;
        background-color: #fff;
        transition: all 0.5s ease-in-out;
        transform: scaleX(0);
        transform-origin: 0;
      }
     &:hover {
        transform: scaleX(1);
        }
      img{
        max-width: 100%;
      }
    }
  }
}

I am trying to create a ::before animated content over the image. But when I am using calc() method it doesn't work at all. What's the reason? Note: I have tried some solution to the same problem from StackOverflow but those don't work for me.

This is the codesandbox link:CodeSandBox

Upvotes: 1

Views: 863

Answers (1)

Gozdzikovski
Gozdzikovski

Reputation: 46

Try with spaces ;)

width: calc(100% - 20px);
height: calc(100% - 20px);

Upvotes: 3

Related Questions