bubble selector #435

Closed
Punk-UnDeaD opened this Issue Oct 27, 2011 · 10 comments

Comments

Projects
None yet
5 participants
.foo{
  html.ua-ie-7{
    color:red;
    html.front{color:green;}
 }
}

html.ua-ie-7 .foo{color:red;}
html.front.ua-ie-7 .foo{color:green;}

tags html and body can not be in the middle of the selector
they should float to the top
Now they can

1.1.3

***less.original.js 2011-06-10 18:09:09.000000000 +0300
--- less.js 2011-06-29 17:38:20.000000000 +0300
***************
*** 2232,2240 ****
          } else {
              if (rules.length > 0) {
                  selector = paths.map(function (p) {
!                     return p.map(function (s) {
!                         return s.toCSS(env);
!                     }).join('').trim();
                  }).join(env.compress ? ',' : (paths.length > 3 ? ',\n' : ', '));
                  css.push(selector,
                          (env.compress ? '{' : ' {\n  ') +
--- 2232,2252 ----
          } else {
              if (rules.length > 0) {
                  selector = paths.map(function (p) {
!                   var body=[];
!                   var html=[];
!                   var b=p.map(function (s) {return s.toCSS(env);});
!                   var bodyre = / body([\.|\#|\[].+)/;
!                   var htmlre = / html([\.|\#|\[].+)/;
!                   for (var key=0;key 3 ? ',\n' : ', '));
                  css.push(selector,
                          (env.compress ? '{' : ' {\n  ') +

Contributor

maranomynet commented Feb 1, 2012

-1

This seems like unnecessary special-casing, and the functionality is already there (i.e. html & { ...styling... })

Just fix this bug and we're good: cloudhead#614

@maranomynet

.foo{
  .bar{
    &.foobar{
       .snafu &{
          .snafubar &{
              //code
          }
       }
    }
  }
}

how to compile?

http://lesscss.org/#-nested-rules
Notice the & combinator—it’s used when you want a nested selector to be concatinated to its parent selector, instead of acting as a descendent. This is especially important for pseudo-classes like :hover and :focus.

Contributor

maranomynet commented Feb 1, 2012

how to compile?

uhm, currently it compiles in a very straightforward way, so:

.snafubar .snafu .foo .bar.foobar {
    // code
}

Makes sense to me. The & token always stands for the whole compiled selector up to that point.

What else do you want?

Contributor

maranomynet commented Feb 1, 2012

I agree that this foo & behaviour should also be documented alongside the &:hover examples.

why .snafubar .snafu?
may be .snafu .snafubar or .snafu.snafubar

using the bubble selector, I can combine classes and attributes of the elements html and body
I have them glue them when necessary
I do not need this trick for other items

it's simple, clear and powerfully
I can use it in the many difficult mixin and not to be mistaken

Contributor

maranomynet commented Feb 1, 2012

why .snafubar .snafu?

Because that's the way it works. I'm merely describing lesscss' current behavior.

BTW, I had overlooked your point about collapsing (or "gluing") class-names together.

I agree that your patch would allow for styling methods that are currently not available. It still seems like a syntatically weird special-casing to me.

I hereby change my "-1" vote to "meh".

It may be simple to you but I have no idea of what's happening in your first example. What is here replacing the & ? Is it the {\n ?

real code from all my project

#container{
  #center{
    float: left;
    width: 100%;
    body.sidebar-first  {margin-left: 0-@sidebarLeftWidth;}
    body.sidebar-second {margin-right:0-@sidebarRightWidth;}
    body.two-sidebars   {margin:    0 0-@sidebarRightWidth 0 0-@sidebarLeftWidth;}
  }
  #squeeze{
    padding:0 @space;
    body.sidebar-first  {margin-left:  @sidebarLeftWidth;}
    body.sidebar-second {margin-right: @sidebarRightWidth;}
    body.two-sidebars   {margin:    0  @sidebarRightWidth 0 @sidebarLeftWidth;}
  }
  >aside {
    float: left;
    z-index: 2;
    position: relative;
    .block {
      margin-bottom:1.5em;
    }
  }
  #sidebar-first {width:  @sidebarLeftWidth+0-@space; padding-left: @space;}
  #sidebar-second{width: @sidebarRightWidth+0-@space; padding-right:@space;margin-top: 77px;}
}

Either way, it's still relevant to fix the bug in IE7 since

.stuff & {}

is already supported.

cloudhead#614

Owner

lukeapage commented Jul 22, 2012

non issue / duplicate

lukeapage closed this Jul 22, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment