-
Notifications
You must be signed in to change notification settings - Fork 32
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Doesn't understand LESS nesting #43
Comments
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. |
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 |
I have pushed a version to the branch less-indentation. Could you install the extension from GitHub and try it out? |
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 |
Yes, I am aware of that limitation. |
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?The text was updated successfully, but these errors were encountered: