I have recently started learning to react js. I noticed that in some of the style.ts files & has been used before the class declaration.
export const agGrid = {
extend: [container],
'& .ag-theme-material': {
marginTop: '2rem'
}
};
Can someone please help what is & for? I think the framework used is jss that is visible from package.json file
& is used to reference selector of the parent rule.
const styles = {
container: {
padding: 20,
'&:hover': {
background: 'blue'
},
// Add a global .clear class to the container.
'&.clear': {
clear: 'both'
},
// Reference a global .button scoped to the container.
'& .button': {
background: 'red'
},
// Use multiple container refs in one selector
'&.selected, &.active': {
border: '1px solid red'
}
}
}
Compiles to:
.container-3775999496 {
padding: 20px;
}
.container-3775999496:hover {
background: blue;
}
.container-3775999496.clear {
clear: both;
}
.container-3775999496 .button {
background: red;
}
.container-3775999496.selected, .container-3775999496.active {
border: 1px solid red;
}
Find out more over here - http://cssinjs.org/jss-nested?v=v6.0.1
& is basically using to denote the parent in a nested sass/scss.
agGrid = {
'& .ag-theme-material': {
marginTop: '2rem'
}
Will be converted as
agGrid .ag-theme-material {
margin-top: 2rem
}
into CSS
Or in another example using SCSS
.wrapper {
&:before, &:after {
display: none;
}
}
will be converted into
.wrapper::before {
display: none;
}
.wrapper::after {
display: none;
}
Related
An example react file
const classNames = {
...defaultClassNames,
disabled: 'MyComponent--disabled',
selected: 'MyComponent--selected',
container: classnames('MyComponent', 'MyComponent-v2'),
};
return (
<MyComponent
classNames={classNames}
/>
An example CSS module file
.MyComponent-v2 {
.MyComponent-wrapper {
padding-bottom: 0;
}
.MyComponent:not(.MyComponent--disabled){
&:hover {
background: none !important;
.MyComponent-v2 {
background-color: red;
border-radius: 50%;
}
}
}
.MyComponent:focus,
}
How do I migrate this css module to emotion 10, all the examples I can find are using inline emotion with just a single css property like,
css={css`
background-color: hotpink;
&:hover {
color: ${color};
}
`}
I have this scss:
.nav {
&__item {
color: black;
}
}
This compiles to:
.nav__item
Is it possible to modify the above sccs so that it compiles with a tag in front of it, like the following?
a.nav__item
OR
li.nav_item
Here is one way using #at-root. This way avoids having to declare &__item twice.
.nav {
&__item {
color: black;
#at-root {
ul#{&} {
display: block;
}
}
}
}
Complies to
.nav__item {
color: black;
}
ul.nav__item {
display: block;
}
Try this:
.nav {
a#{&}__item {
color: black;
}
}
Output
.nav a.nav__item {
color: black;
}
Even though this is possible using
.nav {
a#{&}__item {
color: black;
}
}
I would highly encourage you to write it like this
a,
li {
&.nav {
&__item {
color: black;
}
}
}
Inside a Custom Element because border-color is set on the parent page, I can not make border-color work without resorting to !important
:host([player="O"]) {
color: var(--color2);
border-color: var(--color2) !important;
}
The selector works fine, the color is set,
so it is a Specificity issue
Question: Is it possible without !important ?
Working snipppet:
window.customElements.define('game-toes', class extends HTMLElement {
constructor() {
super();
let shadowRoot = this.attachShadow({
mode: 'open'
});
shadowRoot.innerHTML = 'Toes';
shadowRoot.appendChild(document.querySelector('#Styles').content.cloneNode(true));
}
});
:root {
--boardsize: 40vh;
--color1: green;
--color2: red;
}
game-toes {
width: var(--boardsize);
height: var(--boardsize);
border: 10px solid grey;
background: lightgrey;
display: inline-block;
}
<TEMPLATE id="Styles">
<STYLE>
:host {
display: inline-block;
font-size:2em;
}
:host([player="X"]) {
color: var(--color1);
border-color: var(--color1);
}
:host([player="O"]) {
color: var(--color2);
border-color: var(--color2) !important;
}
</STYLE>
</TEMPLATE>
<game-toes player="X"></game-toes>
<game-toes player="O"></game-toes>
qomponents
You are using CSS variable so you can still rely on them like this:
window.customElements.define('game-toes', class extends HTMLElement {
constructor() {
super();
let shadowRoot = this.attachShadow({
mode: 'open'
});
shadowRoot.innerHTML = 'Toes';
shadowRoot.appendChild(document.querySelector('#Styles').content.cloneNode(true));
}
});
:root {
--boardsize: 40vh;
--color1: green;
--color2: red;
}
game-toes {
width: var(--boardsize);
height: var(--boardsize);
border: 10px solid var(--playercolor,grey);
color:var(--playercolor,#000);
background: lightgrey;
display: inline-block;
}
<TEMPLATE id="Styles">
<STYLE>
:host {
display: inline-block;
font-size:2em;
}
:host([player="X"]) {
--playercolor: var(--color1);
}
:host([player="O"]) {
--playercolor: var(--color2);
}
</STYLE>
</TEMPLATE>
<game-toes player="X"></game-toes>
<game-toes player="O"></game-toes>
<game-toes ></game-toes>
As a complement to #Temani excellent answer: it happened because the element CSS style for <games-toes> will supersede the shadow root :host style.
According to Google's presentation:
Outside styles always win over styles defined in shadow DOM. For example, if the user writes the selector fancy-tabs { width: 500px; }, it will trump the component's rule: :host { width: 650px;}
I have to convert some SCSS files to LESS. For most part it is just case of changing $ with # but there are style that use the scss parent selector & that I don't know how to convert.
Here is example
// Sidebar
.sidebar {
.block {
&.newsletter {
.btn {
&:before {
background: transparent;
}
}
}
&.filter {
ol {
li {
a {
color: #blue;
&:before {
display: none;
}
}
}
}
}
.filter-options-title, .block-title {
color: #444;
padding-bottom: 10px;
font-size: 12px;
&:after {
color: #666;
}
}
}
}
How would I replace out those parent selectors to make it the same generated CSS?
The & parent selector is actually the same syntax in Less and SCSS!
From the Less Documentation on Parent Selectors:
The & operator
represents the parent selectors of a nested rule and is most commonly
used when applying a modifying class or pseudo-class to an existing
selector
In comparison, here's the SASS/ SCSS documentation on parent selectors for pseudo classes: http://sass-lang.com/documentation/Sass/Selector/Pseudo.html
So in the case of your code, it would be:
SCSS
$blue: blue;
.sidebar {
.block {
&.newsletter {
.btn {
&:before {
background: transparent;
}
}
}
&.filter {
ol li a {
color: $blue;
&:before {
display: none;
}
}
}
.filter-options-title, .block-title {
color: #444;
padding-bottom: 10px;
font-size: 12px;
&:after {
color: #666;
}
}
}
}
(try compiling/ validating here: https://www.sassmeister.com/)
LESS
#blue: blue;
.sidebar {
.block {
&.newsletter {
.btn {
&:before {
background: transparent;
}
}
}
&.filter {
ol li a {
color: #blue;
&:before {
display: none;
}
}
}
.filter-options-title, .block-title {
color: #444;
padding-bottom: 10px;
font-size: 12px;
&:after {
color: #666;
}
}
}
}
(try compiling/ validating here: http://winless.org/online-less-compiler)
As well as the official documentation, this article on CSS Tricks is helpful too: https://css-tricks.com/the-sass-ampersand
Hope that helps :)
This question already has an answer here:
Is there a SASS rule for outputting a descendant to the root?
(1 answer)
Closed 6 years ago.
With all the neat features in SCSS, it can be easy to get carried away and end up with some pretty rough CSS.
Take, for example, a classic nested rats nest -
.image {
...
.imageWrapper {
...
img {
...
}
}
.textWrapper {
...
title {
...
}
caption {
...
}
}
}
Which compiles to
.image {
...
}
.image .imageWrapper {
...
}
.image .imageWrapper img {
...
}
.image .textWrapper {
...
}
.image .textWrapper .title {
...
}
.image .textWrapper .caption {
...
}
This is not only hard to read, but a slog on processors.
Now, I'm not one to use unspecific class-names (just how long is too long?) so nesting has very little functional use to me, but I find it makes my pre-compiled SCSS extremely understandable - the ability to imply the relationship an element has with its parent and children is invaluable to both myself and the next developer who happens across my code.
Is there any way to keep my SCSS nested in all or (preferably) part of my sheet without rendering endless child selectors in my CSS?
I think you're looking for the #at-root directive.
It works by ‘jumping out’ of where you nest it in your Sass to be a the top level.
For example, you could to this :
.image {
color: #333;
#at-root {
.imageWrapper {
color: #666;
img {
color: #999;
}
}
}
.stayNested {
background-color: #555;
}
#at-root {
.textWrapper {
color: #aaa;
title {
color: #ccc;
}
caption {
color: #fff;
}
}
}
}
That would compile to this :
.image {
color: #333;
}
.imageWrapper {
color: #666;
}
.imageWrapper img {
color: #999;
}
.image .stayNested {
background-color: #555;
}
.textWrapper {
color: #aaa;
}
.textWrapper title {
color: #ccc;
}
.textWrapper caption {
color: #fff;
}
For more info, see the official documentation