I have this :
.loop(#index) when(#index =< #to) {
.page-#{index} {
nav{
ul{
li:nth-child(#{index}){
background:#fff;
}
}
}
}
.loop(#index + 1);
}
It seems to have a problem, because the output of my css is :
ul li:nth-child( 2) {
background: #fff;
}
ul li:nth-child( 3) {
background: #fff;
}
it creates a space in the pseudo selector and it doesn't work.
Any ideas to remove this space ?
Thanks
It's a bug. A workaround is to set the identifier via temporary variable, e.g.:
ul {
#li: ~"li:nth-child(#{index})";
#{li} {
background: #fff;
}
}
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;
}
}
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;
}
}
}
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;
}
}
}
}
}
As I understand in LessCSS added feature which allows us to select parent element.
Here is an example of it.
.header {
.menu {
border-radius: 5px;
.no-borderradius & {
background-image: url('images/button-background.png');
}
}
}
The output will be.
.header .menu {
border-radius: 5px;
}
.no-borderradius .header .menu {
background-image: url('images/button-background.png');
}
But what if I want to be the output like this. Is it possible or no.
.header .no-borderradius .menu {
background-image: url('images/button-background.png');
}
Thanks for your attention.
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