This question already has answers here:
Sass .scss: Nesting and multiple classes?
(6 answers)
Closed 7 years ago.
#mixin item {
/* Element Styling */
::before {
/* Element ::Before Styling */
}
:hover::before {
/* Hover animation to be performed by the before when the main element is in a hover state */
}
}
.item {
#include item;
}
This SCSS example produces the following in CSS
.item {
/* Element Styling */
}
item ::before {
/* Element ::Before Styling */
}
item :hover::before {
/* Hover animation to be performed by the before when the main element is in a hover state */
}
Because of the nature of how mixins work, it adds a space between item and ::before which causes those to not be associated with each other in the manner that is expected. When this space is removed the element behaves as expected.
How would I go about using the same or similar method to achive the following output?
.item {
/* Element Styling */
}
item::before {
/* Element ::Before Styling */
}
item:hover::before {
/* Hover animation to be performed by the before when the main element is in a hover state */
}
If you can't tell what the difference is, item ::before is now item::before and so on...
Use the &:
Referencing Parent Selectors: &
Sometimes it’s useful to use a nested rule’s parent selector in other
ways than the default. [...] In these cases, you can explicitly
specify where the parent selector should be inserted using the &
character.
#mixin item {
/* Element Styling */
&::before {
/* Element ::Before Styling */
}
&:hover::before {
/* Hover animation to be performed by the before when the main element is in a hover state */
}
}
You're looking for the ampersand:
#mixin item {
/* Element Styling */
&::before {
/* Element ::Before Styling */
}
&:hover::before {
/* Hover animation to be performed by the before when the main element is in a hover state */
}
}
.item {
#include item;
}
Related
This question already has answers here:
How to exclude particular class name in CSS selector?
(3 answers)
Closed 9 months ago.
So I have a navbar with several links inside of it. If the width of the screen gets too small, all of those links disappear and a hamburger menu icon appears, which is also a link, but it has the class "hamburger". How would I make a selector in CSS that would select all of the links except from that hamburger menu link?
Here is my CSS:
#media only screen and (min-width: 601px) {
/* hide the hamburger */
.hamburger {
display: none;
}
/* show all the nav-buttons */
.navbar a {
display: block;
}
}
/* if browser window is small (max-width) */
#media only screen and (max-width: 600px) {
/* show everything with the hamburger class */
.hamburger {
display: block;
}
/* hide all the nav-buttons */
.navbar a {
display: none;
}
}
You need to use the pseudo class not() as per the MDN docs not() CSS psuedo class
The not() pseudo class requires a comma-separated list of one or more selectors as its argument (i.e. what goes inside the brackets).
In your example where you want all of the links except the one with the class .hamburger it would be:
a:not(.hamburger)
You can use a CSS pseudo-class, specifically the :not() selector, to select elements that do not match the hamburger class.
Assuming that .hamburger is a class nested of another called .navbar:
.navbar a:not(.hamburger) {
/* your code */
}
This will select all <a> tags except those containing the .hamburger class.
This question already has an answer here:
Append the parent selector to the end with Sass
(1 answer)
Closed 8 years ago.
How can I use the ampersand in SCSS to reuse the parent selector as suffix?
I came from LESS CSS and are doing my first project in SCSS right now. In LESS I could use the ampersand & to reference the parent selector at any point in a selector. I seems to me like this operator has some quirks in SCSS.
Example:
.grid {
/* grid styles */
ul& {
/* grid styles if this class was set to an UL element */
}
}
In LESS CSS this compiles to the following and this is what I need in most cases:
.grid {
/* grid styles */
}
ul.grid {
/* grid styles if this class was set to an UL element */
}
But in SCSS this throws an exception. There is another notation in SCSS looking like this:
.grid {
/* grid styles */
ul#{&} {
/* using SCSS escaping syntax*/
}
}
But this again gives me the unexpected result of:
.grid {
/* grid styles */
}
.grid ul.grid {
/* Uh SCCS, what happened now? */
}
Is there a way in SCSS to reuse the parent selector when it is not the first part of a selector?
You can use the #at-root directive to produce a rule that is generated outside its definition scope but that retains the value of its parent (&)
.grid {
/* grid styles */
#at-root {
ul#{&} {
/* using SCSS escaping syntax*/
}
}
}
Output
.grid {
/* grid styles */
}
ul.grid {
/* using SCSS escaping syntax*/
}
Tested on sassmeister
Further information on SASS documentation page
So I've marked up some of the edge cases in my list (first, second, last, and the last odd child) like so:
/* First and second elements */
li:first-child, li:first-child + li {
...
}
/* Last odd and last elements */
li:last-child {
...
}
/* CSS for second last list element, only when it's odd. */
li:nth-last-child(2):nth-child(odd) {
...
}
How do I select identical CSS for all the remaining elements? And could you walk me through the process so I know how to do it next?
Just define li styles. The psuedoclass will override those styles because of specificity rules.
This question already has answers here:
Modifying the middle of a selector in Sass (adding/removing classes, etc.)
(2 answers)
Closed 7 years ago.
Just a question about the nesting of SASS selectors, so Im inside a nested span that I want to apply the :hover pseudo to so the opacity changes to 0, I also want to use this style though when the parent a tag gets the class is-active. Right now I would move the is-active class outside of the span and reapply the style but I'm wondering can you move up a level from within the nested style like traversing?
My example SASS:
.btn-lang {
// styles...
> span {
// styles...
&:hover { // i want to use this when btn-lang has class is-active
opacity: 0;
}
}
// right now I would add these styles here but seems there could be an easier method?
&.is-active {
> span {
&:hover {
opacity: 0;
}
}
}
}
You want to reuse two selectors (.btn-lang and span) in a single construction. This is not possible with SASS.
This situation is where extends really shine:
// Declaring a reusable extend that will not appear in CSS by itself.
%span-with-hover-on-active-element {
& > span {
/* styles for span under btn-lang */ }
&.is-active > span:hover {
opacity: 0; } }
.btn-lang {
/* styles for btn-lang */
// Apply the span-on-hover thing.
#extend %span-with-hover-on-active-element; }
It makes complicated code reuable and easier to read.
Resulting CSS:
.btn-lang > span {
/* styles for span under btn-lang */
}
.is-active.btn-lang > span:hover {
opacity: 0;
}
.btn-lang {
/* styles for btn-lang */
}
I have like this div, that has no ID or CLASS attributes:
<div data-placement="kolp">
blabla
</div>
How can I target that in my CSS ? Maybe some javascript help is needed?
You can try this:
.container > div {
/* targets your div if it's a direct child of container */
}
.container div {
/* targets any div that is inside container */
}
div[data-placement=kolp] {
/* targets any div with the attribute data-placement=kolp */
}
fiddle here: http://jsfiddle.net/JUP87/
You could use attribute-selectors:
div[data-placement] {
/* selects all div elements with the 'data-placement' attribute */
}
/* or */
div[data-placement="kolp"] {
/* selects all div elements with the 'data-placement' attribute which is equal to 'kolp' */
}
JS Fiddle demo.
References:
CSS Selectors, Level 3.