This question already has an answer here:
Concatenating nested classes using SASS [duplicate]
(1 answer)
Closed 8 years ago.
I have the following:
div {
.demo {
color: #000;
}
}
Which Outputs:
div .demo { color: #000; }
However, I need it to output without the space between the element and the class:
div.demo { color: #000; }
Is there any way to do this using SASS Nesting?
Use & to combine a selector with its parent:
div {
&.demo {
color: #000;
}
}
You can use the ampersand in front of .demo to achieve this.
div {
&.demo {
color: #000;
}
}
The ampersand character is a placeholder for whatever the parent element is.
Related
Is there a way to prepend a selector directly to the current selector in scss. Consider the following:
.object-fit {
object-fit: cover;
height: 100%;
width: 100%;
overflow: hidden;
}
is there a way to prepend img so that the output is img.object-fit?
The only way I have seen for prepending is to add & after like so:
.object-fit {
img & {
}
}
but this would turn it into a parent child selector: img .object-fit
The normal way would be just to append the second selector with &img but as this has no dot before the selector, that ends up with a different class name: .object-fitimg
So basically the question is is there anyway inside the object fit class to prepend a bare element selector?
If you use #at-root and & with interpolation syntax:
.object-fit {
#at-root img#{&} {
color: blue;
}
}
Your output will be:
img.object-fit{
color: blue;
}
Complete answer here is #at-root selector-append(), which will also work for multiple parent selectors.
Source: https://github.com/sass/sass/issues/2059#issuecomment-218862922
.object-fit,
.non-fit {
#at-root #{selector-append("img", &)} {
color: blue;
}
}
Output
img.object-fit, img.non-fit {
color: blue;
}
Assuming that I have the following HTML:
<div class="navigation__item">
<span class="navigation__item__icon"></span>
</div>
I want to apply some rules to an icon, when hovering an item, which can be described with the following CSS:
.navigation__item__icon {
color: black;
}
.navigation__item:hover .navigation__item__icon {
color: white;
}
I can achieve this using the following SCSS:
.navigation__item {
&:hover {
.navigation__item__icon { <-- here
color: white;
}
}
&__icon {
color: black;
}
}
Here, is there any way to avoid writing navigation__item? Something like "parent rule \ element".
I like Sass for logical structure so that if I want to rename the whole navigation block with elements, I can simply change navigation class name in the root, and everything is renamed. This case breaks this advantage.
Update: Actually, I have found a way to do this without using {} braces. & can be repeated more than once:
.navigation__item {
&:hover &__icon {
color: white;
}
&__icon {
color: black;
}
}
It is great, but it doesn't make much sense if I have many rules and rules for &:hover itself. The question is still open - is this possible to access sibling element definition from within the {} block.
In Stylus there is a Partial reference but I don't know anything similar in SASS. One solution could be using a variable for the parent selector:
.navigation__item {
$selector: &;
&:hover {
#{$selector}__icon {
color: white;
}
}
&__icon {
color: black;
}
}
Is usefull is you change navigation__item class for another.
EDIT: I had used a wrong example, it's OK now.
This question already has answers here:
Lighten parent's (unknown) background-color in child
(3 answers)
How to override a LESS mixin variable based on a parent's variable
(1 answer)
Closed 7 years ago.
Hi I'm new to using Less and trying to make the best of the features it offers. What I would like to do is the following:
say I have a few anchor elements in html
Blue link
Red link
Green link
and I have the following css
.gen-link-prop {
text-decoration: none;
padding: 10px 40px;
color: #fff;
display: inline-block;
margin: 0 5px;
}
#blue-link-color: #9999ff;
#red-link-color: #ff9999;
#green-link-color: #99ff99;
.blue-link {
.gen-link-prop;
background-color: #blue-link-color;
}
.red-link {
.gen-link-prop;
background-color: #red-link-color;
}
.green-link {
.gen-link-prop;
background-color: #green-link-color;
}
.blue-link:hover, .red-link:hover, .green-link:hover {
background-color: darken(#<-- reference to base color here--<, 20%);
}
I want to be able to apply an operation to a property value that is already applied to the element. Is this even possible? Or is it something simple that I missed somewhere. Help is greatly appreciated
This question already has answers here:
What do commas mean in CSS selectors? [duplicate]
(4 answers)
Closed 7 years ago.
What does this type of CSS definition mean? Note the first two classes are separated without comma but the last two are separated with comma.
.Container .layout, .groupContainer
{
width: 100%;
}
The comma separates selectors allowing one group of CSS styles to apply to multiple different groups. In your posted CSS:
.Container .layout,
.groupContainer {
width: 100%;
}
width: 100% will be applied to elements of class layout within elements of class Container, and to elements with the groupContainer class.
References:
CSS: 'Groups of Selectors'.
It is shortcut of
.groupContainer
{
width: 100%;
}
.Container .layout
{
width: 100%;
}
You should use it to group your CSS
As explained above, it helps group single CSS declarations across multiple selectors, and can help save file size (which could come in very handy as your CSS file gets larger!) and make things a bit clearer to read.
For example, you could have multiple selectors with the same declarations:
.div1 {
color: red;
}
.div2 {
color: red;
}
.div3 {
color: white;
}
.div4 {
color: white;
}
And you can shorten this by using:
.div1,.div2 {
color: red;
}
.div3,div4 {
color: white;
}
The comma is used for grouping, when the same rule applies for several selectors. Each selector is completely independent of the others.
The space is used for select any .layout that are inside .container, even if there are other elements between them.
For your question, the answer is:
you grouping .layout which is inside the .container class and .groupContainer for both the width value is 100%.
I have a chunk of CSS that I want to "scope" to a specific block of HTML. I'm generating a unique ID and then setting it on the block of HTML and then would like to wrap the chunk of CSS with the same ID so that those selectors can't match sibling or parent elements. I don't know the contents of the chunk of CSS. Given a chunk of CSS:
.container {
background-color: black;
}
.container .title {
color: white;
}
.container .description {
color: grey;
}
I need it to come out like this:
.theme0 .container, .theme0.container {
background-color: black;
}
.theme0 .container .title, .theme0.container .title {
color: white;
}
.theme0 .container .description, .theme0.container .description {
color: grey;
}
Is there any way to do this with LESS? The first selector is easy, just wrap the CSS chunk with '.theme0 {' + cssChunk + '}'. But I haven't been able to figure out a way to prepend '.theme0' to all of the selectors without the space.
EDIT:
So I should clarify that our intentions are to build such a system into our build process / dependency system. We're attempting to scope a chunk of css to a react component. We have a couple different approaches we're trying out, this is just one of them. Point is, the CSS and HTML we're trying to scope could be anything, we have no control or knowledge of it. The first pattern can easily be achieved by prepending .uniqueID { and appending }. This gives .uniqueID .someSelector {}. I'm wondering if it's possible to do a similar thing but get .uniqueID.someSelector {}? Ideally without having to write the original chunk of CSS with knowledge of our scoping system.
Assuming the component styles are in a separate CSS file, i.e.:
// component.css
.container {
background-color: black;
}
.container .title {
color: white;
}
.container .description {
color: grey;
}
The wrapper code could be:
.theme0 {
#import (less) "component.css";
&.container:extend(.theme0 .container all) {}
}
in less you can nest selectors for selecting inside that element like:
.theme {
color: black;
.container {
color: blue;
}
}
This wil generate:
.theme {
color:black;
}
.theme .container {
color:blue;
}
Creating elements that are connected is easy enof:
.test#badge will select a class test width an id badge
In less this is dont with the & symbol. (this selects the starting property)
.test {
color: blue;
&#badge {
color:black;
}
}
Compiles to:
.test {
color: blue;
}
.test#badge {
color: black;
}
And for the final selector:
To get the output of .test, .container use the function: .test:extends(.container);
.test {
color: black;
&:extends(.conatiner);
}
.container {
color: pink;
}
Compiles to:
.test {
color: black;
}
.test, .container {
color: pink;
}
You can even extend multiple ones in a single line:
.test:extends(.oclas, .tclss);
and its wil work as abose only for both classes. So outputed selectors would be .test, .oclass and .test, .tclass