How to Define Attribute Selectors in SASS

How do you define attribute selectors in SASS?

You can also nest it like this

input
  &[type="submit"]
    .... 
  &[type="search"]
    .... 

The Sass ampersand and attribute selectors

You can use this mixin as a workaround to get the desired result.

@mixin child-attribute($child) {
  $string: inspect(&);
  $original: str-slice($string, 3, -4);
  @at-root #{ selector-replace(&, &, "[#{$original}#{$child}]" ) } {
    @content;
  }
}

The code simply does the following

1. $string variable is responsible for turning the parent selector to a string using the inspect function
2. $original variable is responsible for getting the text content of the $string variable i.e the value 'data-parent' from '([data-parent])'
3. selector-replace function then replaces the parent selector with the concatenation of the $original variable and child variable

When used in the following ways

[data-parent] {
  @include child-attribute('-child') {
    color: green;
  }
}

The css output

[data-parent-child] {
  color: green;
}

Depending on what you want to achieve, it can also be used like this

[grandparent] {
  @include child-attribute('-parent') {
    color: white;
    @include child-attribute('-child') {
      color: blue;
    }
  }
}

Which generates the following css

[grandparent-parent] {
  color: white;
}

[grandparent-parent-child] {
  color: blue;
}

Hope this helps you

Multiple attribute selectors in SCSS

An @each loop would be another way to write this:

$directions: left right bottom top;
@each $i in $directions {
  [no-padding*="#{$i}"] {
    padding-#{$i}: 0 !important;
  }
}

How to use sass variables in css attribute selectors like [class^= $variables ]?

Simply wrap $varGridsize in #{} like:

@mixin fullwidth($breakpoint,$grid-size){
    $varGridsize:col-#{$grid-size};
    @media only screen and (max-width: #{$breakpoint}px){ 
       [class ^="#{$varGridsize}"]{width:100%;}
    }
}

Error on & with attribute selector in SCSS

The error gives you a hint:

.parent-class {
    &[dir='rtl'] {
        &__cta {
            p {
                margin-left: 6px;
                margin-right: initial;
            }
        }
    }
}

This selector is invalid because it would compile to:

.parent-class[dir='rtl']__cta

Depending on your markup, you might want to write it like that:

 .parent-class {
     $root: &;
     
     &[dir='rtl'] { 
         & #{$root}__cta { 
             p { 
                 margin-left: 6px; 
                 margin-right: initial; 
             } 
         } 
     } 
 }

That would compile to:

.parent-class[dir=rtl] .parent-class__cta p

How to declare SCSS length type attribute selector by REACT property

To answer your question

Please find a solution with attribute selector or tell me that it is not possible because of X reasons (link to docs in best-case).

No, although it would be super useful, according to my research it's currently not possible:

MDN about CSS attr():

Note: The attr() function can be used with any CSS property, but support for properties other than content is experimental, and support for the type-or-unit parameter is sparse.

According to caniuse.com about css3-attr, the ability to use attr() on any CSS property (besides content, and to use it for non-string values (e.g. numbers, colors) via <type_or_unit> as defined per "CSS Values and Units Level 3" is currently unsupported by all browsers.

See also the statement on the current draft for "CSS Values and Units Module Level 4":

The following features are at-risk, and may be dropped during the CR period: toggle(), attr() [...]

(Source: https://drafts.csswg.org/css-values/#status)

In the Chromium issue, I found a link to an interesting resource I wasn't aware of: web-platform-tests dashboard for css-values. Take a look at the (failing) tests prefixed with attr-, especially attr-length-valid.html and attr-px-valid.html.

But there is hope: the Chromium team recently (05/15/2020) posted an Intent to Implement and Ship: CSS advanced attr() function

Implement the augmentation to attr() specified in CSS Level 4, namely, allowing various types (besides ) and usage in all CSS properties (besides pseudo-element 'content').

Note: CSS Level 4 has made substantial revisions to attr() compared to Level 3 to ease the implementation. We'll follow CSS4. [...]

Motivation: This is a highly requested feature, with 77 stars at crbug.com/246571. [...]

Chromium tracking Issue 246571: Implement CSS3 attribute / attr references
)

Firefox also show recent activity, see Firefox tracking Bug 435426 [meta] Implement CSS Values 3 extensions to attr(), there they at least are referring to Chromiums current efforts.

(WebKit Bug 26609 - Support CSS3 attr() function shows no activity, which could be a deal-breaker)

Target attribute values in SASS

This is close. You will have to restate the attribute name in your child selectors each time. Classes and IDs can get away with tacking on an ending to the parent class, but if you extend the same idea to your attribute your second selector would be [data-post][~="title"].

So:

[data-post] {
  font-size: 10px;

  &[data-post~="title"] {
    font-size: 50px;
    color: blue;
  }
}

That should get you there. http://jsbin.com/kazusamore/edit?html,css,js,output

Condition on attribute in sass

Using SASS for this is unneeded. You can use vanilla CSS with attribute selectors. See the following example - images by default have no border, however here with the typeof attribute being assigned 'image' they will receive the defined border.

img {
  border: none;
}
img[typeof='image'] {
  border: 2px solid red;
}

<img src='https://via.placeholder.com/50' typeof='image' />
<img src='https://via.placeholder.com/50' typeof='' />

Prevent adding attribute selectors to SaSS selectors with angular 2

try this:

@Component({
    templateUrl: ...,
    styleUrls: ...,
    encapsulation: ViewEncapsulation.None
})

Here's the official doc.

---

Related Topics