Css not selector sass

Css – SASS :not selector

I have a :not css selector in SASS mixin but it doesn’t do anything:

Code Snippet:

@mixin dropdown-pos($pos:right) < &:not(.notip) < @if $comp-tip == true< @if $pos == right < top:$dropdown-width * -0.6; @include tip($pos:$pos); >> > &.notip < @if $pos == right < top: 0; left:$dropdown-width * 0.8; >> > 

The .notip class is being generated but no CSS is being generated for :not(.notip) .

Best Solution

I tried re-creating this, and .someclass.notip was being generated for me but .someclass:not(.notip) was not, for as long as I did not have the @mixin tip() defined. Once I had that, it all worked.

$dropdown-width: 100px; $comp-tip: true; @mixin tip($pos:right) < >@mixin dropdown-pos($pos:right) < &:not(.notip) < @if $comp-tip == true< @if $pos == right < top:$dropdown-width * -0.6; background-color: #f00; @include tip($pos:$pos); >> > &.notip < @if $pos == right < top: 0; left:$dropdown-width * 0.8; background-color: #00f; >> > .someclass

EDIT: http://sassmeister.com/ is a good place to debug your SASS because it gives you error messages. Undefined mixin ‘tip’. it what I get when I remove @mixin tip($pos:right)

Related Solutions

Html – How to make a div not larger than its contents

The solution is to set your div to display: inline-block .

Css – CSS parent selector

There is currently no way to select the parent of an element in CSS.

If there was a way to do it, it would be in either of the current CSS selectors specs:

That said, the Selectors Level 4 Working Draft includes a :has() pseudo-class that will provide this capability. It will be similar to the jQuery implementation.

In the meantime, you’ll have to resort to JavaScript if you need to select a parent element.

Источник

Multiple Code Examples Demonstrating the Use of the Sass Not Selector

Although the selector functions similarly in SCSS as it does in CSS, we must add a prefix to the selector when working with SASS files. By following this approach, I was able to successfully execute the code without encountering any errors. As an alternative solution, I decided to search on Github to gain insights from other sass projects, which I should have done earlier.

SASS :not selector

I attempted to replicate this situation where the code .someclass.notip was successfully generated, but the code .someclass:not(.notip) was not generated unless the code @mixin tip() was defined. Once I defined the code @mixin tip() , everything worked as expected.

$dropdown-width: 100px; $comp-tip: true; @mixin tip($pos:right) < >@mixin dropdown-pos($pos:right) < &:not(.notip) < @if $comp-tip == true< @if $pos == right < top:$dropdown-width * -0.6; background-color: #f00; @include tip($pos:$pos); >> > &.notip < @if $pos == right < top: 0; left:$dropdown-width * 0.8; background-color: #00f; >> > .someclass

You can utilize http://sassmeister.com/ as a helpful platform to troubleshoot your SASS code since it provides informative error messages. The output I obtain after excluding @mixin tip($pos:right) < >is what I receive.

Css — SASS :not selector, I tried re-creating this, and .someclass.notip was being generated for me but .someclass:not(.notip) was not, for as long as I did not have the @mixin tip() defined. Once I had that, it all worked. Once I had that, it all worked. Code sample&:not(.notip)

Sass Selector: When a tag is not in another tag

Although I should have done it earlier, I finally decided to explore Github in order to find out how other sass projects tackle the same issue. «»».

It appears that the :not selector functions similarly in SCSS and CSS, but in SASS files, we must add the * prefix to the :not selector.

This works without errors.

Instead of utilizing the :not selector, you have the option to directly style the code and code elements within the pre tag. By doing so, you will achieve the desired outcome.

SASS: Expression with Combined &:not selectors, But what does it mean the scss next to it — :not(&—inactive):hover? And these &:not selectors used combined? Also, this scss has some strange behaviour — on localhost this doesn’t not work — does not apply at all, and when it is deployed on a test server, it got applied and works fine (it gets compiled and …

SCSS/CSS Using :not selector for only certain elements

After some consideration, I believe I have managed to solve the problem by utilizing Sass.

.listing < article< // Generic Styles >&.alt article, &:not(.alt) article:not(:first-child) < // More Styles >> 

Upon reviewing my original code example, I noticed that it was somewhat unusual. Therefore, I have made some updates to ensure its accuracy.

.listing:not(.alt) article:not(:first-child)

Sass Selector: When a tag is not in another tag, Okay, I probably should’ve done this sooner, but I searched Github to see how other sass projects do the same.. Looks like while the :not selector works in SCSS the same way it works in CSS, we need to prefix the :not selector with * for SASS files: *:not(pre) > code color: blue This works without errors.

SCSS. Reference second level ascending selector

Updated version: Superior to the original.

and the original text is as follows:

Although your idea was correct, you need to place the a:hover at the top-level in order to achieve the desired result. It may not be exactly what you wanted, but it is the only way SCSS will provide you with the intended outcome.

I think you looking for this:

Sass Selector Functions, 9 rows· The selector functions are used to check and manipulate selectors. …

Источник

Sass not selector more than one

Thanks Solution: Managed to get it working by typing the second selector out in full: Question: I have the same CSS selector across multiple SASS partials files that are all being called into the same master file. Please see example below: File1: File2: Master file: I would have expected SASS to have been clever and found that the same selector is being used in two partial files and combine them for the final single CSS file.

Styling one element with multiple selectors (sass)

I’ve an element I want to style only if it’s got two classes applied to it:

custom-select-value—companies and custom-select-value—companies-disabled

It’s actually the pseudo element I want to style, and the following css works:

It’s probably very simple, but I was just struggling to translate that to sass and was hoping someone could help? The following doesn’t work:

Also, just wondered as I was writing this — what’s the main element of a pseudo element called? «Parent» doesn’t seem quite right?

Managed to get it working by typing the second selector out in full:

Same selector across SASS Partials not being aggregated, As I remember SASS has no functionality for merging same selectors. I think you just need to rewrite your code.

Same selector across SASS Partials not being aggregated

I have the same CSS selector across multiple SASS partials files that are all being called into the same master file. Please see example below:

@import 'partials/File1'; @import 'partials/File2'; 

I would have expected SASS to have been clever and found that the same selector is being used in two partial files and combine them for the final single CSS file. Instead it creates two different instances of the same selector in the final file.

I know the SASS architecture I am using might be better managed to accommodate for this but is there a setting or some other mechanism to allow SASS to do this?

What you’re asking for would actually be incorrect behavior, because in a CSS file rule order matters. Take the following code:

You can’t merge the two rules for the .foo selector, because wherever you’d put the result, it’d never keep the intended styling for elements with both foo and bar classes.

As I remember SASS has no functionality for merging same selectors. I think you just need to rewrite your code.

Isn’t it logical that there is only one place in one file where you need to adjust something to a specific item? For example if someone else need to change your code that person need to look at two places.

Specificity — CSS: Cascading Style Sheets, The universal selector ( * ) and the pseudo-class :where() and its parameters aren’t counted when calculating the weight, but they do match elements. The value

SASS selector-append function with multiple selectors WITH whitespace

I’m aiming to use @at-root body.home # within a nested selector, however, as my img and video selectors require the same properties @at-root body.home # only targets img and not video .

I’ve tried to use the selector-append function, which would do the job, but the issue is it strips whitespace so instead of:

body.home .slider__container.—media .slider .slide img,body.home .slider__container.—media .slider .slide video

How can I keep my nested selectors but reference body.home within multiple selectors? I guess I could use a class (haha) but I’m curious!

body.home.slider__container.—media .slider .slide img,body.home.slider__container.—media .slider .slide video

.slider__container < &.--media < .slider < .slide < img, video < max-height: calc(100% - (30px * 4) - (28px * 2)); max-width: calc(100% - 60px); @at-root # < max-height: calc(100% - (65px * 4) - (28px * 2)); transition: transform 400ms, filter 400ms; transform: scale(0.8); >@include media(tablet-p) < max-height: calc(100% - (20px * 4) - (28px * 2)); max-width: calc(100% - 40px); @at-root # < max-width: calc(100% - 100px); >> @include media(phone) < max-height: calc(100% - (20px * 4) - (28px * 2)); max-width: calc(100% - 40px); @at-root # < max-height: calc(100% - (65px * 4) - (24px * 2)); max-width: calc(100% - 50px); transform: scale(0.7); >> > > > > > 

I have coded a «parent selector» SCSS mixin some time ago and I believe it’s what you need. Check it out:

@mixin parent($el) < $index: str-index(#, ' '); $this-parent: str-slice(#, 0, $index); @at-root # < @content; >> .a < $main-parent: &; background: lightgreen; .b< .c< background: green; .d< .e< .f< .g< @include parent(&)< background: red; >/* targetting specific elements with just at root */ @at-root # .b .c < background: salmon; >> > > > > > > 

How to apply styles conditionally inside multiple id selection?, Take a look at my response below. SCSS can not check anything from Your HTML. You need to pass some variable to Your mixin and than SCSS will be

Источник