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
Related
LESS (CSS)
see in action
.app {
#page {
.inner {
.left {
&.padding-left-10px {
padding-left: 10px;
// rtl direction
.rtl& { //////////////////////////////////
padding-left: 0;
padding-right: 10px;
}
}
}
}
}
}
Consider the line I have highlighted with ///.....
I want the same result in SASS (.scss). Is it possible?
Expected result should be:
.rtl.app #page .inner .left.padding-left-10px {}
and not
.rtl .app #page .inner .left.padding-left-10px {}
Thanks.
It looks like you are attempting to use the LESS feature where you can change the order of the selectors by using the parent selector. It isn't working as expected because that specific LESS feature isn't implemented the same way in SASS.
If you want the equivalent output code in SASS, then you can use the #at-root directive in order to scope the selector to the root. Then you would also need to use variable interpolation (i.e., .rtl#{&}) for the parent selector:
.app {
#page {
.inner {
.left {
&.padding-left-10px {
padding-left: 10px;
#at-root {
.rtl#{&} {
padding-left: 0;
padding-right: 10px;
}
}
}
}
}
}
}
Which would compile to:
.app #page .inner .left.padding-left-10px {
padding-left: 10px;
}
.rtl.app #page .inner .left.padding-left-10px {
padding-left: 0;
padding-right: 10px;
}
Josh gave you an answer which will work, i guess. But I still wanna give you some advice and that is look into BEM, or someway. Nesting like this is really unnecessary.
Your code could be better for readability.
For example:
.padding {
padding: 10px;
}
.padding--left { // This is a modifier for padding
padding: 0 0 0 10px;
}
.padding--right { // This is a modifier for padding
padding: 0 10px 0 0;
}
<div class="padding padding--left">Using it in a div</div>
You don't have to follow all the rules which are defined in BEM, but some are really nice to use.
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.
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;
}
}
I have a problem with nth-of-type(odd):before and first-child:before
I need to disable :before content in first "li" element.
Problem is that css don't react to first-child:before..
P.S I'm using LESS
So, there is a code:
li {
&:first-child {
&:before {
content:none;
}
}
&:nth-of-type(odd) {
&:before {
content:'\b7';
margin:0 8px 0 5px;
}
}
}
li:first-child and li:nth-of-type(odd) will both match the same element, so in this case your second rule is completely overriding the first.
The simplest way around this is to move your first rule below, since both of your selectors are equally specific (1 element, 1 pseudo-class, 1 pseudo-element):
li {
&:nth-of-type(odd) {
&:before {
content:'\b7';
margin:0 8px 0 5px;
}
}
&:first-child {
&:before {
content:none;
}
}
}
Note that because both selectors are matching the same element, the margin style will still apply to the first child's :before. But since you're using content:none in the second rule, you're effectively disabling the :before pseudo-element, so you shouldn't need to change anything else.
That said, if you want to cancel it out explicitly anyway, you can:
li {
&:nth-of-type(odd) {
&:before {
content:'\b7';
margin:0 8px 0 5px;
}
}
&:first-child {
&:before {
content:none;
margin:0;
}
}
}
Currently using SASS on a website build. It is my first project using it, tried a little LESS before and liked it. I made a few basic mixins and variables with LESS, super useful stuff!
I am trying to get my head around SASS mixins, and syntax, specifically for swapping images when the page changes to a different language, be that with body ID changing or <html lang="en">. And, swapping floats around if, for example, a website changed to Chinese. So a mixin where float left is float left unless language is AR and then it becomes float right.
With LESS I think it would be something like:
.headerBg() when (#lang = en) {background-image:url(../img/hello.png);}
.headerBg() when (#lang = it) {background-image:url(../img/ciao.png);}
.header {.headerBg(); width: 200px; height:100px}
.floatleft() when (#lang = en) { float: left;}
.floatleft() when (#lang = ar) { float: right;}
.logo {.floatleft();}
It's the syntax I am having problems with.
I'd probably use the #content feature and do something like this:
#mixin headerBg {
.header {
#content
}
}
#mixin floatDir {
.logo {
#content
}
}
:lang(en) {
#include headerBg {
background-image:url(../img/hello.png);
}
#include floatDir {
float: left;
}
}
:lang(ar) {
#include headerBg {
background-image:url(../img/ciao.png);
}
#include floatDir {
float: right;
}
}
Which compiles to:
:lang(en) .header {
background-image: url(../img/hello.png); }
:lang(en) .logo {
float: left; }
:lang(ar) .header {
background-image: url(../img/ciao.png); }
:lang(ar) .logo {
float: right; }
If the background image names where based on the language, then it might make sense to use #each and do something like this:
#each $lang in en, ar {
:lang(#{$lang}) {
#if $lang == en {
.logo {
float: left;
}
} #else if $lang == ar {
.logo {
float: right;
}
}
.header {
background-image:url(../img/#{$lang}.png);
}
}
}
Which compiles to:
:lang(en) .logo {
float: left; }
:lang(en) .header {
background-image: url(../img/en.png); }
:lang(ar) .logo {
float: right; }
:lang(ar) .header {
background-image: url(../img/ar.png); }