CODEWITHSUNDEEP
cssless
flks
flks

Reputation: 682

How to specify a html tag on a LESS CSS nested class?

I have a class used on an article and a section HTML5 tag.

On the home:

<article class="exit">
    <a href="exit.php">
        <figure class="box">
            <img src="assets/img/projects/exit-m.jpg" alt="">
            <figcaption>…</figcaption>
        </figure>
    </a>
</article>

On the project page:

<section class="page project exit">
    <div class="corner nw intro">
        <figure class="box">
            <img src="assets/img/projects/exit.jpg" alt="">
            <figcaption>…</figcaption>
        </figure>
   </div>
   …

Each elements with the class exit have a figure HTML5 element inside. With Less, I use this code to do what I want.

article.exit{width:260px; height:200px; top:315px; left:505px;
    figure{background-color:@exit-bg;}
    .box:hover{.perspective-box(se, 10, @exit-shadow);}
}
section.exit{
    .box:hover{.perspective-box(nw, 10, @exit-shadow);}
    .intro figcaption:hover{background:@exit-hover;}
}

But I have to specify if it's an article or a section! I have a lot of classes like that and it's a little annoying…

Is there a solution to do something like this? It will be very cool…

.exit{
    &article{
        width:260px; height:200px; top:315px; left:505px;
        figure{background-color:@exit-bg;}
        .box:hover{.perspective-box(se, 10, @exit-shadow);}
    }
    &section{
        .box:hover{.perspective-box(nw, 10, @exit-shadow);}
        .intro figcaption:hover{background:@exit-hover;}
    }
}

Upvotes: 7

Views: 8329

Answers (2)

Parama Kar
Parama Kar

Reputation: 464

I had this same doubt and landed here but found an interesting quirk that might be helpful. I prefer to nest the styles according to the HTML that I have written when I am using LESS.

So for example, if my HTML looks like this:

<div id="content">
  .....
  <div class="form-container">
    <input type="text" class="form-control"....>
    <textarea class="form-control"></textarea>
    ......
  </diV
</div>

My stylesheet would look like this:

#content{
  .form-container{
     color: red;
     .form-control{
       border: 1px solid black;
     }
  }
}

Now, I wanted to code the input element and textarea differently. When I looked at the above answer, I tried this:

#content{
  .form-container{
     color: red;
     .form-control{
       border: 1px solid black;
       input&{
         height: 40px;
       }
       textarea&{
         height: 100px;
       }
     }
  }
}

The input& portion (and textarea&) was compiled as:

input#content .form-container .form-control {
  height: 20px;
}

So this is a caveat to keep in mind. To resolve this, just extract the .form-control portion out of the nested portion.

Upvotes: 0

BoltClock
BoltClock

Reputation: 723498

I kinda don't see much of a point in trying to nest these two rules if they won't share any common styles within the exit class.

That said, if you still want to nest them, remember that in selectors, element names always precede other simple selectors. Try placing the & after the element name and see if it works:

.exit{
    article&{
        width:260px; height:200px; top:315px; left:505px;
        figure{background-color:@exit-bg;}
        .box:hover{.perspective-box(se, 10, @exit-shadow);}
    }
    section&{
        .box:hover{.perspective-box(nw, 10, @exit-shadow);}
        .intro figcaption:hover{background:@exit-hover;}
    }
}

Upvotes: 17

Related Questions