The title is worded poorly, I think an example will better show what I'm trying to do.
I have a LESS file which is actually a CSS file that I grabbed from another site. I want to use these classes, but only when another class is also attached to the element.
An example of what I want to do, using valid LESS:
.external-style {
&.foo {
color: red;
}
&.bar{
color: blue;
}
}
But because there's probably over ten thousand rules I don't want to apply this to each rule individually.
What I'd like to be able to do is something like this:
.external-style {
& {
.foo {
color: red;
}
.bar {
color: blue;
}
}
}
Is this possible in LESS?
The advantage for me is that I can then do this:
<div class="external-style foo"></div>
instead of this:
<div class="external-style"><div class="foo"></div></div>
Which is important when I'm using the display property.
Related
I'm trying to slightly modify the styles of a block formatting plugin in Wordpress by overriding them in my own theme stylesheet. I use Sass but I'm new to it.
Pasting all of the selectors right out of Developer Tools works, but I know that's not the elegant/modular way to do it:
.an-accordion.an-accordion--v2.an-accordion.an-accordion--design-basic .an-accordion__heading {
color: gold
}
What's the right way to do this in Sass? I've tried something like this:
.an-accordion {
&--v2 {
&--design-basic {
&__heading {
color: gold;
}
}
}
}
but it doesn't work. I can tell I'm missing something about the way .an-accordion repeats.
You can use the power of local scoped string variables $something:... combined with the power of string interpolation #{...} and combine it with the current selector string & to create a compound selector for any combination of block, element, and modifier. Which I think is quite nice and readable:
.an-accordion {
$modifier-v2: #{&}--v2;
$modifier-design-basic: #{&}--design-basic;
$element-heading: #{&}__heading;
&#{$modifier-v2}#{$modifier-design-basic} {
#{$element-heading} {
color: gold;
}
}
}
which will result in:
.an-accordion.an-accordion--v2.an-accordion--design-basic .an-accordion__heading {
color: gold;
}
I tried it out on sassmeister.com
Note that I omitted the duplicated .an-accordion class in the selector; if this is important for you to increase the specifity you can insert it with #{&}.
BEM is about blocks, elements, and modifiers. Block scope is the biggest one, the element is some part inside the block and the modifier is optional and represents the status of your block-element. In Sass you can nest elements if they are parent and children and you don't need to repeat the parent element, in your stlesheet, if the beginning of your property is the same for both parent and child, but if the beginning is different you must repeat.
In a html like this:
<div class=" an-accordion an-accordion--v2 .an-accordion--design-basic .an-accordion__heading"></div>
You could have some scss code like this:
.an-accordion{
color: #000;
&__heading{
background-color: tomato;
}
&--v2{
font-weight: bold;
}
&--design-basic{
border: none;
}
}
This question already has answers here:
Using regular expression in css?
(6 answers)
Closed 2 years ago.
I have a lot of tables that have different names like: my-table-1590 , my-table-1400, my-table-1121 , and so on.
I want to add in CSS, one custom style that should change all these tables together.
For example, i want instead of all these individual style code:
#my-table-1590 .my-table--desktop .my-table-product-0 {
background-color: red;
}
#my-table-1400 .my-table--desktop .my-table-product-0 {
background-color: red;
}
#my-table-1121 .my-table--desktop .my-table-product-0 {
background-color: red;
}
...
I want to add only one code that will change all tables (including future tables that i will make).
Is it possible to do this?
Thanks in advance for all the help!!
You can select all IDs that start with #my-table- as follows.
[id^="my-table-"] .my-table--desktop .my-table-product-0 {
background-color: red;
}
..the carat symbol. It's most commonly used in regular expressions to designate the beginning of a string.
It looks like all of your tables have the same structure inside them, with the actual element you want to make red always having the class .my-table-product-0.
So can't you just use the following code?
.my-table-product-0 {
background-color: red;
}
If this isn't possible for some reason, add another class, such as .red-table, to all of the tables so that you can target them like this:
.red-table .my-table--desktop .my-table-product-0 {
background-color: red;
}
This is exactly what classes (that apply to several elements) and not ids (which apply to single elements) are for.
Alternatively, for cases where the structure is not always the same, you can use CSS variables. Declare a variable somewhere like this:
html {
--table-color: red;
}
And then use it on all of your tables:
#my-table-1590 .my-table--desktop .my-table-product-0 {
background-color: var(--table-color);
}
#my-table-1400 .my-table--desktop .my-table-product-0 {
background-color: var(--table-color);
}
#my-table-1121 .my-table--desktop .my-table-product-0 {
background-color: var(--table-color);
}
...
You could try by using CSS variables:
Declaration:
--main-color: black;
Usage:
color: var(--main-color);
More on this here.
Demo: https://codepen.io/moradxd/pen/WJpPyQ
Assume i have this HTML code:
<body class="boxed">
<div class="text-white">
Button
</div>
</dody>
I'm using this sass code as following:
.boxed {
// error with using "Ampersand"
body& {
}
}
But it results a compiling error which says:
Although the result i want is as following:
// This the result i want
body.boxed {
}
I know that i can use it like this, and it will result what i'm looking for:
// I know i can use this
body {
&.boxed {
}
}
But i want to separate the .boxed class code from inside the body css code for orgnization purpose.
So why this is not allowed although the similar code for element and it's parent is working for the following:
// Although this similar code for element and
// it's parent is working
.btn-featured {
.text-white & {
font-size: 30px;
}
}
In fact i hope to know why this not allowed!
Hello morad you need to use #at-root
.boxed {
#at-root body#{&} {
color: red;
}
}
codepen
You need to swap your selectors around for it to work like you've said.
body {
&.boxed {
background: red;
}
}
The issue is that the ampersand connects the previous selector to the current selector. So when you do something like this:
.boxed {
body & {
background: red;
}
}
It's trying to add 'nothing' to the body tag inside an element with the boxed class on it. The best way is to do it how you've already stated.
More info on referencing parent selectors.
So,
I have appended a home class to body like so:
document.body.classList.add("home")
I want to select appContainer a child element of body class by doing
html body.home #appContainer { ..... }
This works without CSS Modules but was wondering how I can do it with CSS modules. Thanks
You need to use wrap the class that you want to be global into :global(). If your selector uses an element you must write it directly after the element with no space in between, like element:global(.class) which translates into element.class.
Therefore, in your case html body:global(.home) #appContainer is the answer.
For anyone else that comes across this issue, I am using postcss-preset-env and I had to do this:
Worked ✅
.toolTipTest :global .rc-tooltip-arrow {
color: blue;
}
This did not work ❌
.toolTipTest:global(.rc-tooltip-arrow) {
color: blue;
}
And neither did this ❌
.toolTipTest:global(.rc-tooltip-arrow) {
color: blue;
}
// Neither Did this
.toolTipTest {
&:global(.rc-tooltip-arrow) {
color: blue;
}
}
I did a little research on this but wasn't able to find what I needed, as I probably don't understand the answers.
I need to be able to define a base color for two specific pages.
Page one uses #brand-color
Page two also uses #brand-color.
Page two has a different body class. I need to make suer that #brand-color on .page-2 is different than on page 1.
I'm not quite sure how to do this, or if it's even possible.
All of the styles are already in the sheet for page 1, I really only need to change he brand-color for it all to update on page 2, I'd prefer to do that then to go through all the css and add extra declarations and duplicates for page 2.
Is this possible?
I don't think this is possible, but you can do something like this:
#brand-primary: #ff0000;
body{
&.page-2{
#brand-primary: #00ff00;
.yourclass{
color: #brand-primary;
}
}
.yourclass{
color: #brand-primary;
}
}
so .yourclass has a different color on body.page-2 but this is only possible within the scope.
but in this case it probably makes more sense to define a second variable.
You should use mixin with changing selector order technique instead of variable.
#brand-color-1: #ff0000;
#brand-color-2: #00ff00;
.brand-color() {
color: #brand-color-1;
.page-2 & {
color: #brand-color-2;
}
}
.my-brand-header {
.brand-color();
}
will be compiled to css:
.my-brand-header {
color: #ff0000;
}
.page-2 .my-brand-header {
color: #00ff00;
}