I'm looking at the following selector from a .css file:
.tab {
flex: 1 0 auto;
height: 52px;
& + & {
border-left: 1px solid;
}
}
I'm not familiar with the syntax of & + & {} - what does it mean?
This is not CSS but some file meant to be compiled to CSS. It's probably SCSS or Less.
In SCSS and Less, the & is just a repetition of the enclosing selector.
So
& + & {
border-left: 1px solid;
}
would be translated as
.tab + .tab {
border-left: 1px solid;
}
This construct is common when you need to add a border between items: you add it to the left of any items which follows another one.
introduction to the sass/less ampersand
Related
I'm looking for a way to make an equivalent to .bloc + .bloc or .article + .article but directly from a mixin bloc-article() :
#mixin bloc-article() {
margin-top: 20px;
margin-top: 50px;
& + "bloc-article()" { // is there a "$this"-like to make an equivalent to `.bloc + .bloc` or `.article + .article` here ?
border-top: 1px solid red;
}
}
.bloc {
#include bloc-article();
}
.article {
#include bloc-article();
}
is there a "$this"-like to make an equivalent to .bloc + .bloc or .article + .article directly from the mixin ?
You can write your mixin with an & + & selector:
#mixin bloc-article() {
// …
& + & {
border-top: 1px solid red;
}
}
Which compiles from:
.article {
#include bloc-article();
}
to:
.article + .article {
border-top: 1px solid red;
}
Here, the Sass parent selector is the $this you are looking for.
From the docs:
The parent selector, &, is a special selector invented by Sass that’s used in nested selectors to refer to the outer selector. It makes it possible to re-use the outer selector in more complex ways, like adding a pseudo-class or adding a selector before the parent.
I am trying to write Less in the context of React.
The following code works:
.rt-tr-group .rt-tr:hover .rt-td {
color: #fff;
&:first-child { /* notice single ampersand */
border-left: 2px solid #007aff;
}
}
This code also works:
.rt-tr-group .rt-tr:hover .rt-td {
color: #fff;
}
.rt-tr-group .rt-tr:hover .rt-td:first-child {
border-left: 2px solid #007aff;
}
However, the following code does not work:
.rt-tr-group .rt-tr:hover .rt-td {
color: #fff;
&&:first-child { /* notice double ampersand */
border-left: 2px solid #007aff;
}
}
I have seen the double ampersand used elsewhere in the codebase, so && does something. Could someone please explain the difference to me?
The double ampersand you've seen might be & + & or & ~ &, not &&, as to the best of my knowledge the latter does nothing in Sass.
Using & + & will allow you to target an adjacent sibling of the same selector, for example this SCSS:
.btn {
...
& + & {
margin-left: 15px;
background: firebrick;
}
}
...will compile to this CSS:
.btn {
...
}
.btn + .btn {
margin-left: 15px;
background: firebrick;
}
Read more about the double ampersand here at Team Treehouse.
&& is redundant to the basic logical operator AND in nearly every popular programming language, while the single & is used specifically in SASS for connecting CSS selectors.
Connecting, or to be more precise in the use case of SASS: Concatenating selectors is very different from combining two conditionals in a logical sense.
Read further:
https://www.sitepoint.com/sass-basics-operators/ and https://javascript.info/logical-operators
It could be to increase specificity: .thing.thing is higher than just .thing
I am using bootstrap3 and I would like to use multiple inputs-group-addon together.
If I try to do so, unfortunately I get in some elements a 2px border instead of 1px.
Bootply
What kind of CSS style I could use to solve my problem?
Thanks
This is a common known problem in bootstrap, you can overcome this problem by overriding '.inputs-group-addon' class.
bootply
Example
.input-group-addon:first-child + .input-group-addon:last-child {
border-left: 1px solid #ccc;
}
.input-group-addon:not(:first-child):not(:last-child) + .input-group-addon:not(:first-child):not(:last-child) {
border-left: 0;
}
.form-control + .input-group-addon:not(:first-child):not(:last-child) {
border-left: 0;
}
.input-group-addon:not(:first-child):not(:last-child) + .form-control {
border-left: 0;
}
Also there is an issue in bootstrap.
Add following CSS:
.input-group-addon{
border-left: 0;
}
This will work. See this.
Has anyone had issues with LESS compiling CSS that utilizes plus signs [+] and/or greater than [>] symbols, whereas the inclusion of these causes compilation errors/fails? (we're using the standard lessc compiler). The LESS below is identical to what we're trying to compile - the first plus after banana.keynote is what sets the compiler error off:
.banana.keynote {
+ {
label:before {
border: 2px solid #CC6633 !important;
}
}
}
.banana.chunga {
+ {
label:before {
border: 2px solid #ffb5ff !important;
}
}
}
.banana.gordita {
+ {
label:before {
border: 2px solid #4067ea !important;
}
}
}
NOTE: admittedly, I'm using an online converter to go from CSS to LESS - could this be producing weird artifacts in code?
Thanks.
Combinators in Less must always be followed by an element identifier, i.e. you can't use + alone on its own. Rewrite your code to:
.banana.keynote {
+ label:before {
border: 2px solid #CC6633;
}
}
If you really need to get it "alone" for some reason you may hack it through selector interpolaton:
#plus: ~'+';
.banana.keynote {
#{plus} {
label:before {
border: 2px solid #CC6633;
}
}
}
---
P.S. Additionally note that the following code:
.banana.keynote + {
label:before {
border: 2px solid #CC6633;
}
}
while compiled w/o any errors, does not produce the proper CSS (invalid + is just silently omitted).
How can I simplify this SASS so that I only write .question-sector-answer the once? I need to apply different styles to the .question-sector-answer if the parent div has a class of both .question-row and .question-review. This currently seems unwieldy and I'm sure could be simplified and made more elegant:
.question-row {
border-bottom: 1px solid #ddd;
&.question-review {
.question-sector-answer {
padding-top: 30px;
}
}
.question-sector-answer {
padding: 15px;
}
}
I don't see how you can simplify it. You need to use 2 different styles for .question-sector-answer under different parents. Since it's impossible in css to access parent selector, you have no choice but do what you did (well, in SASS you kind of can - see below). Although my personal preference to always put more generic selectors on top and more specific ones to the bottom like so:
.question-row {
border-bottom: 1px solid #ddd;
.question-sector-answer {
padding: 15px;
}
&.question-review {
.question-sector-answer {
padding-top: 30px;
}
}
}
So in SASS you can access parent selector with & using it in certain way, but I don't think you can recreate your styles with it, the best I could come up with was this but it looks uglier than your original way of doing it, but you're welcome to play with it:
.question-row {
border-bottom: 1px solid #ddd;
}
.question-sector-answer
{
.question-row & {
padding-top: 15px;
}
.question-row.question-review &
{
padding: 30px;
}
}
You can read more about accessing parent selectors with & here
.question-row {
border-bottom: 1px solid #ddd;
}
.question-sector-answer {
padding: 15px;
.question-review & {
padding-top: 30px;
}
}
De-nesting here does two things: (1) creates terser, more flexible CSS and (2) allows the parent & selector. To compensate for the decrease in OOP, we slightly indent to imply subjugation. But in SASS you want to avoid the temptation to nest when not totally necessary, because nesting for OOP's sake tends to create more problems than it solves.