Using the ampersand in Sass conditionals

Question

Using the ampersand in Sass conditionals

I have some specific styling defined like this

.activities {
  border: 1px solid green;

  .activity {
    background-color: red;

    &:first-child {
      background-color: yellow;
    }
  }  
}

I am looking to style the .activity element that is a first child with a yellow background, only if the parent element with .activities class does not have the additional class .events.

In the scenario below, the first .activity element should maintain a background-color: red

<div class="activities events">
  <div class="activity">one</div>
  <div class="activity">two</div>
  <div class="activity">three</div>
</div>

Are there alternative methods to exclude this first-child styling when the element with class .activities also contains the class .events?

or is this the most straightforward solution:

.events .activity:first-child {
  background-color: red;
}

css sass

Answer 1

Answer №1

Implement the :not selector to set a yellow background for the activities element when it does not contain the events class.

.activities {
    border: 1px solid green;

    .activity {
        background-color: red;
    }

    &:not(.events) {
        .activity:first-child {
            background-color: yellow;
        }
    }  
}

This technique reduces redundancy in your code. If you decide to change the color of activity from red to blue, you only need to make the adjustment in one place instead of multiple locations.

https://developer.mozilla.org/en/docs/Web/CSS/:not

Answer 2

Implement the :not selector to set a yellow background for the activities element when it does not contain the events class.

.activities {
    border: 1px solid green;

    .activity {
        background-color: red;
    }

    &:not(.events) {
        .activity:first-child {
            background-color: yellow;
        }
    }  
}

This technique reduces redundancy in your code. If you decide to change the color of activity from red to blue, you only need to make the adjustment in one place instead of multiple locations.

https://developer.mozilla.org/en/docs/Web/CSS/:not

Answer 3

Answer №2

I was feeling uninspired and decided to challenge myself by containing all the activity styles within a single nested activity element. The result is this code snippet - although I would advise against using it instead of Nathan's solution, as it seems unnecessarily complex:

.activities {
  border: 1px solid green;

  .activity {
    background-color: red;

    &:first-child {
      @at-root #{selector-replace(&, '.activities', '.activities:not(.events)')} {
        background-color: yellow;
      }
    }
  }
}

If you want to avoid repeating the 'activities' class, you could store it as a variable:

.activities {
  $this: &;

  border: 1px solid green;

  .activity {
    background-color: red;

    &:first-child {
      @at-root #{selector-replace(&, $this, '#{$this}:not(.events)')} {
        background-color: yellow;
      }
    }
  }
}

Is Sass pushing the boundaries too far?

Answer 4

I was feeling uninspired and decided to challenge myself by containing all the activity styles within a single nested activity element. The result is this code snippet - although I would advise against using it instead of Nathan's solution, as it seems unnecessarily complex:

.activities {
  border: 1px solid green;

  .activity {
    background-color: red;

    &:first-child {
      @at-root #{selector-replace(&, '.activities', '.activities:not(.events)')} {
        background-color: yellow;
      }
    }
  }
}

If you want to avoid repeating the 'activities' class, you could store it as a variable:

.activities {
  $this: &;

  border: 1px solid green;

  .activity {
    background-color: red;

    &:first-child {
      @at-root #{selector-replace(&, $this, '#{$this}:not(.events)')} {
        background-color: yellow;
      }
    }
  }
}

Is Sass pushing the boundaries too far?

Using the ampersand in Sass conditionals

Answer №1

Answer №2

Similar questions

What is the best way to align my navigation bar in the middle of two elements with different

The position of the scroll bar remains consistent as you navigate between different websites

"When the screen resolution changes, the absolute positioning of images won't function as expected

Missing ng-required fields not displaying the has-error validation in AngularJS forms

Tips for eliminating excess space on mobile devices with CSS

What is the best way to locate the final text node within the <p> element?

Nav bar taking up full width of page, centered to the right with content area

What is the reason for the additional space and irregular alignment of my divs when utilizing the 960 grid system?

Creating flexible padding for child elements inside a container using CSS

Create a user interface design for displaying alerts on a web

Switch the class of a div using jQuery when it is clicked

Customize the layout of menu icon in HTML/CSS using FlexBox Grid

I'm encountering problems when attempting to display the image/png response from an xmlHTTPRequest. Instead of the correct data, I

In Outlook, images are always shown in their true dimensions

"Utilizing ng class with an array of objects: A step-by-step guide

Activating a div in React.js using setActive: Step-by-step guide

Clickable link remains functional after being hidden

Ways to incorporate a dictionary into your website's content

Implementing Bootstrap 4 accordions within a Knockout foreach loop, adjusting the icon upon expansion/collapse dilemma

How to extract hover CSS property from a Selenium WebElement using XPath in Python