Here is my code:
.grid {
> li {
// li styles
.text & {
// new li styles if .grid also has a class of .text
}
}
}
This is wrong, it seems to only work if I target something higher than .grid, but I want to be able to target .grid.text li {} so I can change the li styles based on if the .grid has an extra class, not depending on what .grid lives inside. Is this possible?
I'm trying to avoid doing this:
.grid {
> li {
// li styles
}
&.text {
li {
// new li styles
}
}
}
You could do it using the #at-root directive while mantaining the rules nested
e.g. this snippet
.grid {
> li {
color: #fff;
#at-root {
.text#{&} {
color: #000;
}
}
}
}
on SASS >= 3.3 compiles into
.grid > li {
color: #fff;
}
.text.grid > li {
color: #000;
}
Related
Apologies for the vague title; I appreciate suggestions. I've looked for similar questions but none seem (to me) to be asking the exact same thing.
Say I have this piece of CSS:
nav a {
color: blue;
}
nav li.selected a {
color: red;
}
What would be the recommended/preferred/easiest way to achieve this with nesting in Sass? I'd like to target a when it's a child of li.selected (i.e., referring to exactly one level above itself).
nav {
a {
color: blue;
??? {
color: red;
}
}
}
Here's what I've tried to no avail:
nav {
a {
color: blue;
li.selected & {
color: red;
}
}
}
/* results in li.selected nav a, not nav li.selected a */
nav {
$foo: &;
a {
color: blue;
#at-root #{$foo} li.selected & {
color: red;
}
}
}
/* results in nav li.selected nav a, not nav li.selected a */
Sorry if i get it wrong, but is this what you mean?
nav {
a {
color: blue;
}
li.selected a {
color: red;
}
}
So I have a bunch of nested classes. I'd like to target the IMMEDIATE parent from deep within the nest. So for example, I have:
.navbar {
ul {
li {
a {
.ACTIVE & {
background: red;
}
}
}
}
}
The above results in:
.ACTIVE .navbar ul li a {
background: red;
}
But what I am trying to achieve is:
.navbar ul li.ACTIVE a {
background: red;
}
Is this possible?
Do get to that path using LESS, you'd do something like
.navbar {
& > ul {
& > li {
& > a {
&.active {
background: red;
}
}
}
}
}
This will result the following selector:
.navbar > ul > li > a.active { background: red; }
EDIT:
Sorry, totally missed the most important part.... So, to get what you're trying to achieve :
.navbar {
ul {
li {
&.ACTIVE{
a {
background: red;
}
}
}
}
}
I have the following SCSS for styling links in my menu:
nav {
ul {
li {
a {
color: red
}
}
}
ul.opened {
li {
a {
color: green
}
}
}
}
Which generates the following (correct) CSS:
nav ul li a {
color: red;
}
nav ul.opened li a {
color: green;
}
I tried modifying my JavaScript to apply the class to the nav element instead, and use selector-append() in Sass to append the class. But that seems to do the appending in the wrong order (and if the arguments are reversed, the class is appended to the last element!):
nav {
ul {
li {
a {
color: red;
#at-root #{selector-append('.opened', &)} {
color: green;
}
}
}
}
}
Output (incorrect!):
nav ul li a {
color: red;
}
.openednav ul li a {
color: green;
}
Is there a way the SCSS can be rewritten so that the class can be correctly appended without having to duplicate selectors (similar to the selector-append() method)?
The short answer
Since the element we want to replace has a unique name, what we're looking for is this:
nav {
ul {
li {
a {
color: red;
#at-root #{selector-replace(&, 'ul', 'ul.opened')} {
color: green;
}
}
}
}
}
The long answer
Manipulating selectors is extremely dirty, and I would advise against it unless you absolutely had to. If you're overqualifying your selectors by specifying things like table tr td or ul li, then start by simplifying: tr and ul are both redundant in these selectors (unless you're trying to avoid styling elements under an ordered list). Adjust your nesting to be simpler, etc.
Starting with Sass version 3.4, there are 2 important features that allow you to modify selectors.
Selector functions
The parent selector can be stored in a variable
Example:
.foo ul > li a, .bar {
$sel: &;
#debug $sel;
}
You'll always get a list of list of strings because selectors can be chained together with a comma, even when you have only one selector.
.foo ul > li a, .bar { ... }
(1 2 3 4 5), (1)
You'll note that the descendant selector is being counted here (lists in Sass can be either space or comma delimited). This is extremely important to remember.
When selector-replace() doesn't work
The selector-replace() function does not work in the following cases:
The selector you want to replace is not unique (eg. ul ul li)
You want to insert one or more selectors (eg. ul ul li -> ul ul ul li)
You want to remove a selector (eg. ul > li -> ul li)
In this case, you'll need to loop over the selectors and you'll need to know which position you want to modify. The following function will take a function and apply it to a specific position in your selector using the magic of the call() function.
#function selector-nth($sel, $n, $f, $args...) {
$collector: ();
#each $s in $sel {
$modified: call($f, nth($s, $n), $args...);
$collector: append($collector, set-nth($s, $n, $modified), comma);
}
#return $collector;
}
Append a class (when the selector isn't unique or you don't know its name)
The function we need here takes 2 arguments: the original selector and the selector you'd like to append to it. Uses simple interpolation to do the job.
#function append-class($a, $b) {
#return #{$a}#{$b};
}
.foo, .bar {
ul > li a {
color: red;
#at-root #{selector-nth(&, -2, append-class, '.baz')} {
color: blue;
}
}
}
Output:
.foo ul > li a, .bar ul > li a {
color: red;
}
.foo ul > li.baz a, .bar ul > li.baz a {
color: blue;
}
Insert a selector
This function also takes 2 arguments: the original selector and the selector you'd like to insert before it.
#function insert-selector($a, $b) {
#return $b $a;
}
.foo, .bar {
ul > li a {
color: red;
#at-root #{selector-nth(&, -2, insert-selector, '.baz')} {
color: blue;
}
}
}
Output:
.foo ul > li a, .bar ul > li a {
color: red;
}
.foo ul > .baz li a, .bar ul > .baz li a {
color: blue;
}
Remove a selector
Removing a selector is as simple as replacing your selector with an empty string.
#function remove-selector($sel) {
#return '';
}
.foo, .bar {
ul > li a {
color: red;
#at-root #{selector-nth(&, -2, remove-selector)} {
color: blue;
}
}
}
Output:
.foo ul > li a, .bar ul > li a {
color: red;
}
.foo ul > a, .bar ul > a {
color: blue;
}
TL;DR
Selectors are just a lists. Any list manipulation functions will work on it and you can loop over it to modify it as necessary.
So yeah, don't do it unless you really really really need to. If you've decided you still need it, I've packaged these functions up into the selector-nth library.
I made a mixin that solves this problem.
Github: https://github.com/imkremen/sass-parent-append
Example: https://codepen.io/imkremen/pen/RMVBvq
Usage (scss):
.ancestor {
display: inline-flex;
.grandparent {
padding: 32px;
background-color: lightgreen;
.parent {
padding: 32px;
background-color: blue;
.elem {
padding: 16px;
background-color: white;
#include parent-append(":focus", 3) {
box-shadow: inset 0 0 0 8px aqua;
}
#include parent-append(":hover") {
background-color: fuchsia;
}
#include parent-append("p", 0, true) {
background-color: green;
}
}
}
}
}
Result (css):
.ancestor {
display: inline-flex;
}
.ancestor .grandparent {
padding: 32px;
background-color: lightgreen;
}
.ancestor .grandparent .parent {
padding: 32px;
background-color: blue;
}
.ancestor .grandparent .parent .elem {
padding: 16px;
background-color: white;
}
.ancestor:focus .grandparent .parent .elem {
box-shadow: inset 0 0 0 8px aqua;
}
.ancestor .grandparent .parent:hover .elem {
background-color: fuchsia;
}
.ancestor .grandparent .parent p.elem {
background-color: green;
}
I have a main menu and 4 colours and Id like each colour to cycle through 1-4 then start again if there are more than 4 items.
But each menu item only receives the first colour - this is my CSS (compiled from less):
.main-nav li a:nth-child(4n+1) {
background-color: #7ebdeb;
}
.main-nav li a:nth-child(4n+2) {
background-color: #abc081;
}
.main-nav li a:nth-child(4n+3) {
background-color: #f4d1a2;
}
.main-nav li a:nth-child(4n+4) {
background-color: #e96956;
}
I have no other background colours specified - I've been racking my brain and have tried several online nth-child testers to double check the specific selectors but can't work out what's going wrong sorry.
You are targeting the same element in each list item, the anchor, repeatedly. Each list item only has one child. You probably want:
.main-nav li:nth-child(4n+1) {
background-color: #7ebdeb;
}
.main-nav li:nth-child(4n+2) {
background-color: #abc081;
}
.main-nav li:nth-child(4n+3) {
background-color: #f4d1a2;
}
.main-nav li:nth-child(4n+4) {
background-color: #e96956;
}
jsFiddle example
I guess this is what you want:
JSFiddle
.main-nav li:nth-child(4n+1) a {
background-color: #7ebdeb;
}
.main-nav li:nth-child(4n+2) a {
background-color: #abc081;
}
.main-nav li:nth-child(4n+3) a {
background-color: #f4d1a2;
}
.main-nav li:nth-child(4n+4) a {
background-color: #e96956;
}
So I have this bit of Less
#footer {
ul {
// stuff
}
li {
// stuff
}
}
everything is contained nicely within #footer, but say I want to prefix #footer. How would I prefix footer with a class like .ie6 or .ie7, but within the less "closure" of #footer?
for example, I want to do this (observe pseudo syntax >.ie6, >.ie7) :
#footer {
<.ie6, <.ie7 {
// ie6/7 stuff
}
ul {
// stuff
}
li {
// stuff
}
}
and have it generate this:
.ie6 #footer,
.ie7 #footer {}
#footer {}
#footer ul {}
#footer li {}
Any idea how to accomplish this with Less?
I think this might be of interest to you: https://github.com/cloudhead/less.js/pull/268#issuecomment-1207479
What you want to do isn't possible yet in the master less.js. But a guy, James Foster, forked it and added this feature.
Example:
#box {
#other-box {
margin: 10px 0 0;
.ie7 & {
margin: 5px 0 0;
}
}
}
I don't believe it's possible to place the class before the #footer, unless you wrapped everything in .ie6/7 instead of #footer
LESS website shows the following example:
#header { color: black;
.navigation { font-size: 12px }
.logo { width: 300px;
&:hover { text-decoration: none }
}
}
Which I think is the only way to achieve similar to what you want, so:
#footer {
.ie6{
// ie6 stuff
}
.ie7{
//ie7 stuff
}
ul {
// stuff
}
li {
// stuff
}
}
Would generate with the classes after the ID, I can't seem to find a way to achieve what you want without nesting everything inside the .ie6/7