FrontEnd.ro logo
CSS Nesting
.foo {
  .bar {
    text-align: center;
  }
  + .bar {
    text-align: right;
  }
}

/* *** */

.foo .bar {
  text-align: center;
}

.foo + .bar {
  text-align: right;
}
.foo {
  border: 1px solid #fff;

  &:hover {
    border-color: #ccc;

    .bar {
      border: 0;
    }
  }
}

/* *** */

.foo {
  border: 1px solid #fff;
}

.foo:hover {
  border-color: #ccc;
}

.foo:hover .bar {
  border: 0;
}