Doesn't understand LESS nesting

djboris88 commented 9 years ago

When in less file, nested styles shows as &.child while it should be #parent .something. It renders it difficult to navigate, since I got many &:after and I cannot differ them. Is there a way around for this?

Hirse commented 9 years ago

I don't really use less, so I didn't pay much attention to it, but I am happy to improve it if I can. Could you add an example less file and tell me what you expect to see in the outline?

djboris88 commented 9 years ago

It would be great if you could add full support for less! I am currently working on some project, where I have to migrate template from old framework to a new one, and I have to migrate styles from 10 less files into 22 files, to categorize them and make it work. I often find myself lost in all those files and styles in so many places. I am certain that less outliner would do miracles for me.

Ok, here is the example.

//--------------------------------------------------------------
// Copyright (C) joomla-monster.com
// License: http://www.joomla-monster.com/license.html Joomla-Monster Proprietary Use License
// Website: http://www.joomla-monster.com
// Support: info@joomla-monster.com
//---------------------------------------------------------------
// ANIMATED BUTTONS
//---------------------------------------------------------------

@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);

.ch-item.ch-first .ch-info,
.ch-item.ch-second .ch-info .ch-info-back,
.ch-item.ch-third .ch-info .ch-info-back {
    background-color: @le;
}

.ch-item {
  position: relative;
  width: 154px;
  height: 154px;
  border: 5px solid transparent;
  .box-shadow (0 0 0 5px rgba(0, 0, 0, 0.05));
  -webkit-background-clip: padding-box !important; 
     -moz-background-clip: padding-box !important; 
          background-clip: padding-box !important;
  .ch-info .ch-container {
    position: relative;
    display: table;
    width: 100%;
    height: 100%;
  }
  .ch-info .ch-outer {
    display: table-cell;
    vertical-align: middle;
  }
  .ch-info p {
    padding: 20px 5px 0;
    margin: 0;
    text-align: center;
    .box-sizing (border-box);
    line-height: 30px;
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 24px;
    background: url("../images/badge_sep.png") no-repeat top center;
  }
  .ch-info p a:link,
  .ch-info p a:visited {
    color: @white;
  }
  .ch-info p a:hover {
    text-decoration: none;
  }
  .ch-info p span.smaller {
    font-size: 16px;
    line-height: 22px;
  }
}

x:-o-prefocus,
.ch-item {
  border: none; /* opera fix */
}

/* first */

.ch-item.ch-first {
  .box-shadow2 (0 0 0 10px rgba(255, 255, 255, 0.3) inset, 0 0 0 5px rgba(0, 0, 0, 0.05));
  .rounded-corners (50%);
  position: relative;
  cursor: default;
  .transition (all 0.4s ease-in-out);
  .ch-info {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 134px;
    height: 134px;
    .rounded-corners (50%);
    opacity: 0;
    .transition (all 0.4s ease-in-out);
    .scale(0);
    -webkit-backface-visibility: hidden; /*for a smooth font */
  }
} 

.ch-item.ch-first:hover .ch-info {
  opacity: 1;
  .scale(1);
}

/*second*/

.ch-item.ch-second {
  .rounded-corners (50%);
  position: relative;
  cursor: default;
  overflow: hidden;
  .ch-info-wrap {
    position: absolute;
    width: 134px;
    height: 134px;
    .rounded-corners (50%);
    .perspective(800px);
    .transition (all 0.4s ease-in-out);
    left: 10px;
    top: 10px;
    .box-shadow (0 0 0 10px rgba(255, 255, 255, 0.3));
  }
  .ch-info {
    position: absolute;
    width: 100%;
    height: 100%;
    .rounded-corners (50%);
    .transition (all 0.4s ease-in-out);
    .transformstyle (preserve-3d);
  }
  .ch-info > div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    .rounded-corners (50%);
    background-position: center center;
    .backface (hidden);
  }
  .ch-info .ch-info-back {
    .rotate3d(0,1,0,180deg);
  }
}

x:-o-prefocus,
.ch-item.ch-second .ch-info .ch-info-back {
  display: none; /* opera fix */
}

x:-o-prefocus,
.ch-item.ch-second:hover .ch-info .ch-info-back {
  display: block; /* opera fix */
}

.ch-item.ch-second:hover .ch-info {
  .rotate3d(0,1,0,-180deg);
}

/** ie10 fix **/

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .ch-item.ch-second:hover .ch-info {
    transform: none;
    -ms-transfrom: none;
    .ch-info-back {
      display: block;
      opacity: 100;
    }
  }
  .ch-item.ch-second .ch-info .ch-info-back {
    display: none;
    transform: none;
    -ms-transfrom: none;
    .transition (all 0.4s ease-in-out);
    opacity: 0;
  }
} 

/*third*/

.ch-item.ch-third {
  .rounded-corners (50%);
  position: relative;
  cursor: default;
  .perspective(900px);
  .ch-info-front {
    .box-shadow (0 0 0 10px rgba(255, 255, 255, 0.3) inset);
  }
  .ch-info {
    position: absolute;
    width: 100%;
    height: 100%;
    .transformstyle(preserve-3d);
  }
  .ch-info > div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    .rounded-corners (50%);
    .transition (all 0.4s linear);
    background-position: center center;
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
  }
  .ch-info > div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    .rounded-corners (50%);
    .transition (all 0.4s linear);
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
  }
  .ch-info .ch-info-back {
    -webkit-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    -moz-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    -o-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    -ms-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
    opacity: 0;
  }
}

.ch-item.ch-third:hover {
  .ch-info-front {
    -webkit-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    -moz-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    -o-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    -ms-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
    opacity: 0;
  }
  .ch-info-back {
    -webkit-transform: rotate3d(1,0,0,0deg);
    -moz-transform: rotate3d(1,0,0,0deg);
    -o-transform: rotate3d(1,0,0,0deg);
    -ms-transform: rotate3d(1,0,0,0deg);
    transform: rotate3d(1,0,0,0deg);
    opacity: 1;
  }
}

/** animated buttons **/

a.a-btn:link,
a.a-btn:visited {
  text-decoration: none;
}

.a-btn {
  width: 135px;
  height: 135px;
  .rounded-corners (50%);
  display: block;
  margin: 20px;
  float: left;
  position: relative;
  background: #c05a24;
  .transition (all 0.3s linear);
  border: 5px solid transparent;
  .box-shadow (0 0 0 5px rgba(255, 255, 255, 0.25));
  .background-clip (padding-box);
  > span {
    display: inline-block;
    width: 125px;
    height: 125px;
    padding: 5px;
    text-align: center;
    vertical-align: middle;
    font-size: 24px;
    line-height: 30px;
    color: @white;
    .transition (all 0.3s linear);
    font-family: 'Open Sans Condensed', sans-serif;
  }
  span.second,
  span.third {
    height: 80px;
    padding-top: 50px;
  }
  span.smaller {
    font-size: 16px;
    line-height: 22px;
    display: block;
  }
  > span.first, 
  > span.third {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
  }
  > span.first {
    background: url("../images/badge_star.png") no-repeat center center;
    opacity: 1;
  }
}

.a-btn:hover {
  background: #b9bfa1;
  .background-clip (padding-box);
  > span.third {
    opacity: 1;
  }
  > span.second {
    opacity: 0;
    .scale (0);
  }
  > span.first {
    -webkit-animation: rotate 1s linear;
    -moz-animation: rotate 1s linear;
    animation: rotate 1s linear;
  }
}

@keyframes rotate{
  0% { transform: scale(1) rotate(0);}
  50% { transform: scale(0.5) rotate(180deg);}
  100% { transform: scale(1) rotate(360deg);}
}

@-webkit-keyframes rotate{
  0% { -webkit-transform: scale(1) rotate(0);}
  50% { -webkit-transform: scale(0.5) rotate(180deg);}
  100% { -webkit-transform: scale(1) rotate(360deg);}
}

@-moz-keyframes rotate{
  0% { -moz-transform: scale(1) rotate(0);}
  50% { -moz-transform: scale(0.5) rotate(180deg);}
  100% { -moz-transform: scale(1) rotate(360deg);}
}

/** animated buttons **/

.a-button {
  padding-left: 80px;
  width: 226px;
  height: 50px;
  display: block;
  position: relative;
  overflow: hidden;
  text-align: left;
  margin: 0 0 2px;
  img {
    position: absolute;
    left: 20px;
    top: 10px;
    border: none;
    .transition (all 0.3s ease-in-out);
  }
  .a-btn-slide-text {
    position: absolute;
    font-size: 24px;
    line-height: 50px;
    font-weight: 600;
    top: 0;
    left: 15px;
    opacity: 0;
    .transition (opacity 0.2s ease-in-out);
  }
  .a-btn-text {
    display: block;
    font-size: 20px;
    line-height: 50px;
    font-family: @JMaButtonFontFamily;
  }
  .a-btn-text2 {
    display: none;
    font-size: 20px;
    line-height: 50px;
    font-family: @JMaButtonFontFamily;
  }
}

.a-button {
    &.first {
        background: transparent url("../images/dir/button1.png") no-repeat scroll right top;
        > .a-btn-slide-text {
            color: @le2;
        }
        &:hover {
            background: transparent url("../images/dir/button1_hover.png") no-repeat scroll right top;
        }
    }
    &.second {
        background: transparent url("../images/dir/button2.png") no-repeat scroll right top;
        > .a-btn-slide-text {
            color: multiply(@le2, #555);
        }
        &:hover {
            background: transparent url("../images/dir/button2_hover.png") no-repeat scroll right top;
        }
    }
    &.third {
        background: transparent url("../images/dir/button3.png") no-repeat scroll right top;
        > .a-btn-slide-text {
            color: multiply(@le, #222);
        }
        &:hover {
            background: transparent url("../images/1/button3_hover.png") no-repeat scroll right top;
        }
    }
}

a.a-button:link,
a.a-button:visited {
  color: #fff;
  text-decoration: none;
}

.a-button:hover {
  .a-btn-text {
    display: none;
  }
  .a-btn-text2 {
    display: block;
  }
  img {
    .scale (10);
    opacity: 0;
  }
  .a-btn-slide-text {
    opacity: 1;
  }
}

And the list should look like this:

... .ch-item.ch-first .ch-info,
    .ch-item.ch-second .ch-info .ch-info-back,
    .ch-item.ch-third .ch-info .ch-info-back

... .ch-item
    ... .ch-info .ch-container
    ... .ch-info .ch-outer
    ... .ch-info p
    ... .ch-info p a:link,
        .ch-info p a:visited
    ... .ch-info p a:hover
    ... .ch-info p span.smaller

<>  x:-o-prefocus,
    .ch-item

... .ch-item.ch-first
    ... .ch-info

... .ch-item.ch-first:hover .ch-info

... .ch-item.ch-second
    ... .ch-info-wrap
    ... .ch-info
    ... .ch-info > div
    ... .ch-info .ch-info-back

<>  x:-o-prefocus,
    .ch-item.ch-second .ch-info .ch-info-back

<>  x:-o-prefocus,
    .ch-item.ch-second:hover .ch-info .ch-info-back

... .ch-item.ch-second:hover .ch-info

@   @media screen and (-ms-high-contrast: active), 
    (-ms-high-contrast: none)
    ... .ch-item.ch-second:hover .ch-info
        ... .ch-info-back
    ... .ch-item.ch-second .ch-info .ch-info-back

... .ch-item.ch-third
    ... .ch-info-front
    ... .ch-info
    ... .ch-info > div
    ... .ch-info > div
    ... .ch-info .ch-info-back

... .ch-item.ch-third:hover
    ... .ch-info-front
    ... .ch-info-back

<>  a.a-btn:link,
    a.a-btn:visited

... .a-btn
    <>  > span
    <>  span.second,
        span.third
    <>  span.smaller
    <>  > span.first, 
        > span.third
    <>  > span.first

... .a-btn:hover
    <>  > span.third
    <>  > span.second
    <>  > span.first

@   @keyframes rotate

@   @-webkit-keyframes rotate

@   @-moz-keyframes rotate

... .a-button
    <>  img
    ... .a-btn-slide-text
    ... .a-btn-text
    ... .a-btn-text2

... .a-button
    &   &.first
        <>  > .a-btn-slide-text
        &   &:hover
    &   &.second
        <>  > .a-btn-slide-text
        &   &:hover
    &   &.third
        <>  > .a-btn-slide-text
        &   &:hover

<>  a.a-button:link,
    a.a-button:visited

... .a-button:hover
    ... .a-btn-text
    ... .a-btn-text2
    <>  img
    ... .a-btn-slide-text

Hirse commented 9 years ago

I have pushed a version to the branch less-indentation. Could you install the extension from GitHub and try it out?

djboris88 commented 9 years ago

I tried it, it is much, much better now, thank you very much!

There is just one more thing, when there is more than one selector, like h1, h2, h3 { ... } it only shows the last one, in this example h3.

Hirse commented 9 years ago

Yes, I am aware of that limitation. Currently I only check line by line, so this should only occur if the selector spans over several lines.

Hirse / brackets-outline-list

Doesn't understand LESS nesting #43