How to conditionally set ::after sass rule in a react app-CodePudding

hope your weekends are going great! I am just trying to figure out how I can conditionally set the &::after {} rule. Please see below to what I mean:

@import "../global/parts";
.nav__item {
  position: relative;
  @include _minWidthMedium {
    text-transform: uppercase;
  }
  &::after {
    content: "";
    position: absolute;
    background-color: $orange;
    bottom: -3px;
    transform: scaleX(0);
    transition: transform 460ms ease-out;
    transform-origin: right;
    perspective: 1000px;
    backface-visibility: hidden;
    pointer-events: none;
    z-index: 70;
  }
  &:hover,
  &.nav__item_active {
    &::after {
      transform: scaleX(1);
      transform-origin: left;
    }
  }
}

As you can see, in the first &::after rule, I am setting the background color to orange that renders an orange underline after hover. However, there are multiple places where this nav__item is being used and I would like to keep the code dry.

What I am trying to do is have background-color set to 'none' if the link is a main CTA, rather than just a regular nav item. Is there any way to do this?

I have tried to search relevant topics on this but couldn't find anything.

CodePudding user response：

To conditionally set the ::after CSS pseudo-element in a React app using Sass, you can use the @if and @else directives to check for a specific condition and apply the appropriate styles.

For example, if you want to apply the ::after pseudo-element to an element only if a certain prop is passed to it, you can use the following Sass code:

.my-element {
  &::after {
    @if $my-prop {
      // Styles for when the prop is true
    } @else {
      // Styles for when the prop is false
    }
  }
}

In this example, the @if directive checks for the presence of the $my-prop variable, and the @else directive provides the styles to apply when the prop is not present. You can customize this code as needed to check for different conditions and apply the appropriate styles.

It's important to note that you will need to use the @include directive to actually include the styles in your CSS. For example:

.my-element {
  @include my-element;
}

This will apply the styles defined in the my-element mixin to the .my-element class in your CSS.

CodePudding user response：

To conditionally set the background-color property for the ::after pseudo-element, you can use the @if or @else directives provided by Sass.

Here is an example of how you could use these directives to set the background-color based on whether the nav__item is a main CTA or not:

@import "../global/parts";
.nav__item {
  position: relative;
  @include _minWidthMedium {
    text-transform: uppercase;
  }
  &::after {
    content: "";
    position: absolute;
    @if $main-cta {
      background-color: none;
    } @else {
      background-color: $orange;
    }
    bottom: -3px;
    transform: scaleX(0);
    transition: transform 460ms ease-out;
    transform-origin: right;
    perspective: 1000px;
    backface-visibility: hidden;
    pointer-events: none;
    z-index: 70;
  }
  &:hover,
  &.nav__item_active {
    &::after {
      transform: scaleX(1);
      transform-origin: left;
    }
  }
}

In this example, the background-color will be set to none if the $main-cta variable is true, and to $orange if the $main-cta variable is false. You can set the value of the $main-cta variable when you include the nav__item class in your HTML code, for example:

<div  $main-cta: true>...</div>