Doesn't understand LESS nesting
djboris88 opened this issue · 5 comments
djboris88 commented
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
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
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-textHirse commented
I have pushed a version to the branch less-indentation. Could you install the extension from GitHub and try it out?
djboris88 commented
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
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.