Gaurav Soni Gaurav Soni - 1 month ago 14
Sass (Sass) Question

nesting multiple classes using sass

I'm trying to nest multiple class using sass. I want to use hover to show a button. My scss is as follows:

.item{
border-bottom: 1px dotted #ccc;
text-indent: 50px;
height: 81%;
padding: 2px;
text-transform: capitalize;
color: green;

.Button{
visibility: hidden;

&:hover{
visibility: visible;
}
}
}


this is shown in css as :

.item {
border-bottom: 1px dotted #ccc;
text-indent: 50px;
height: 81%;
padding: 2px;
text-transform: capitalize;
color: green; }

.item .Button {
visibility: hidden; }

.item .Button:hover {
visibility: visible; }


The hover property is not working here.

Answer

Since the button is already hidden, I would put the visible property on the item:hover instead.

How the SCSS should look:

.item {
  border-bottom: 1px dotted #ccc;
  text-indent: 50px;
  height: 81%;
  padding: 2px;
  text-transform: capitalize;
  color: green;

  .Button {
    visibility: hidden;
  }

  &:hover .Button {
    visibility: visible;
  }
}

.item {
  border-bottom: 1px dotted #ccc;
  text-indent: 50px;
  height: 81%;
  padding: 2px;
  text-transform: capitalize;
  color: green; 
}

.item .Button {
  visibility: hidden; 
}

.item:hover .Button {
  visibility: visible; 
}
<div class="item">
  Hover Item Class
  <button class="Button">button shows</button>
</div>