sass：&符号的用法

一、使用&连接符

//sass
.side-container {
  float: left;
  height: 100vh;
  transition: width 0.5s;
  background-color: #263238;
  &.unfolded {
    width: 195px;
    .logo {
      width: 195px;
      height: 64px;
    }
  }
  &.folded {
    width: 64px;
    .logo {
      width: 64px;
      height: 64px;
      padding: 10px;
      box-sizing: border-box;
    }
  }
}

//css
.side-container {
  float: left;
  height: 100vh;
  transition: width 0.5s;
  background-color: #263238;
}
.side-container.unfolded {
  width: 195px;
}
.side-container.unfolded .logo {
  width: 195px;
  height: 64px;
}
.side-container.folded {
  width: 64px;
}
.side-container.folded .logo {
  width: 64px;
  height: 64px;
  padding: 10px;
  box-sizing: border-box;
}

二、不使用&连接符

// sass
.side-container {
  float: left;
  height: 100vh;
  transition: width 0.5s;
  background-color: #263238;
  .unfolded {
    width: 195px;
    .logo {
      width: 195px;
      height: 64px;
    }
  }
  .folded {
    width: 64px;
    .logo {
      width: 64px;
      height: 64px;
      padding: 10px;
      box-sizing: border-box;
    }
  }
}

// css
.side-container {
  float: left;
  height: 100vh;
  transition: width 0.5s;
  background-color: #263238;
}
.side-container .unfolded {
  width: 195px;
}
.side-container .unfolded .logo {
  width: 195px;
  height: 64px;
}
.side-container .folded {
  width: 64px;
}
.side-container .folded .logo {
  width: 64px;
  height: 64px;
  padding: 10px;
  box-sizing: border-box;
}

三、对比

（1）多类选择器：.side-container.unfolded与.side-container .unfolded是不一样的，前者是同级关系，后者是父子级关系。