I need to add an attribute [dir=ltr] to all the rules of a big CSS file except for some ones.
Source CSS:
.rule-1 {
color:black
}
.rule-2 {
color: yellow
}
.rule-3 { /* exclude */
color: blue
}
.rule-4 {
color: red
}
Target CSS:
[dir=ltr] .rule-1 {
color:black
}
[dir=ltr] .rule-2 {
color: yellow
}
.rule-3 {
color: blue
}
[dir=ltr] .rule-4 {
color: red
}
Maybe a CSS postprocessor is needed here.
Try using the css :not() attribute, example below:
[dir=ltr]:not(.rule-3) {
//..
}
You can learn more about this attribute and what it does here
The issue was solved using the PostCSS plugin postcss-prefix-selector.
postcss.config.js
module.exports = {
plugins: {
"postcss-prefix-selector": {
prefix: '[dir=ltr]', exclude: [/.rule-3(?![\w])/]
}
}
}
Related
How can I have this output using Sass?
.class.active .class-name1 {}
.class.active .class-name2 {}
Here is what I tried :
.class {
&.avtive {
&-name1 {
}
&-name2 {
}
}
}
You need to keep a reference to the outer class name, and interpolate it for your -name classes. Using color: red as an example of the style to apply:
.class {
$outer-class: &;
&.active {
#{$outer-class}-name1 {
color: red;
}
#{$outer-class}-name2 {
color: red;
}
}
}
Using LESS pre-processor along with shadow-dom for theming support of individual components. I have also attempted nesting :host-context and :host selectors to no avail.
:host-context(.dark) {
#import (multiple) 'variables/dark-theme';
.dropdown;
}
:host-context(.light) {
#import (multiple) 'variables/light-theme';
.dropdown;
}
.dropdown() {
//some component styles here
&:disabled {
background-color: #disabled-bg;
color: #disabled-color;
.dropDownListSelect {
cursor: not-allowed;
}
}
}
This is a result of my own ignorance with Shadow-DOM as it is still somewhat new to me. I was able to accomplish this by using the &:host selector.
:host-context(.dark) {
#import (multiple) 'variables/dark-theme';
.dropdown;
}
:host-context(.light) {
#import (multiple) 'variables/light-theme';
.dropdown;
}
.dropdown() {
//some component styles here
&:host([disabled]) {
background-color: #disabled-bg;
color: #disabled-color;
.dropDownListSelect {
cursor: not-allowed;
}
}
}
I want to get the following selector B__E.B__E--M so that B__E--M only applies if the element also has the B__E class;
I have the following:
.B {
&__E {
// default color
&--M {
// Color i want
}
}
}
The problem is, that the --M modifier should apply another color, but doesn't overwrite the default color from the __E element.
This is not allowed:
.B {
&__E {
// default color
}
}
.B__E.B__E--M {
// color i want
}
If nothing is possible, this would be my guess:
.B {
&__E {
// default color
&.B__E--M {
// Color i want
}
}
}
You are looking for the double ampersand selector.
.B {
&__E {
color:black;
&#{&}--M{
color:white;
}
}
}
/* // Outputs:
.B__E {
color: black;
}
.B__E.B__E--M {
color: white;
}
*/
I want to create a sass file that the selectors will be attribute selectors.
When I work with class selectors, in most of the cases I will do
.parent {
&-child {
}
}
which gives me the following css: .parent-child {}.
I want to achieve the same thing with attribute selectors:
[data-parent] {
&-child {
}
}
which I want to become: [data-parent-child] {}
someone knows how to achieve this? thanks.
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
$string variable is responsible for turning the parent selector to a string using the inspect function
$original variable is responsible for getting the text content of the $string variable i.e the value 'data-parent' from '([data-parent])'
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
You can create mixin that will set styles for elements with data attribytes.
Scss:
#mixin data($name) {
[data-#{$name}] {
#content;
}
}
* {
#include data('lol') {
color: red;
};
}
Css output:
* [data-lol] {
color: red;
}
DEMO
I would go down a slightly different route of having a class on your elements that contain the data attributes.
<div class="data-obj" data-parent="true"></div>
<div class="data-obj" data-parent-child="true"></div>
then in your SASS do
.data-obj {
...
&[data-parent] { ... }
&[data-parent-child] { ... }
}
I'm currently getting this output:
.'teal-dark' { color: #xxx; }
What I want is this: {
.teal-dark { color; #xxx; }
Here is what I'm trying to do:
#teal-dark: #xxx;
.#{currentMember} div { background: ~"#{#{currentMember}}" };
See: http://lesscss.org/features/#variables-feature-variable-interpolation http://lesscss.org/features/#variables-feature-variable-names and
#current-member: teal-dark;
#teal-dark: red;
.#{current-member} {
color: ##current-member;
}
compiles into:
.teal-dark {
color: red;
}
Possible relevant questions:
Defining Variable Variables using LESS CSS
Dynamic class names in LESS
Here's the fix from another post:
#selector: ~'.#{currentMember}';
#{selector} div { background: ~"#{#{currentMember}}" };