第3章 これだけはマスターしたいSassの基本機能

3-2 親セレクタの参照 &（アンパサンド）

  1. #side {
  2.   width: 240px;
  3. }
  4. body.top #side {
  5.   width: 300px;
  6. }
  7. #side ul.bnr {
  8.   margin-bottom: 10px;
  9. }
  1. #side {
  2.     width: 240px;
  3.     ul.bnr {
  4.         margin-bottom: 10px;
  5.     }
  6. }
  7. body.top #side {
  8.     width: 300px;
  9. }
  1. #side {
  2.     width: 240px;
  3.     body.top & {
  4.         width: 300px;
  5.     }
  6.     ul.bnr {
  7.         margin-bottom: 10px;
  8.     }
  9. }
  1. a {
  2.     text-decoration: none;
  3.     &:hover {
  4.         text-decoration: underline;
  5.     }
  6. }
  7.  
  8. ul.pageNav {
  9.     li {
  10.         margin: 0;
  11.         width: 50%;
  12.         &.prev {
  13.             float: left;
  14.         }
  15.         &.next {
  16.             float: right;
  17.         }
  18.     }
  19. }
  1. a {
  2.   text-decoration: none;
  3. }
  4. a:hover {
  5.   text-decoration: underline;
  6. }
  7.  
  8. ul.pageNav li {
  9.   margin: 0;
  10.   width: 50%;
  11. }
  12. ul.pageNav li.prev {
  13.   float: left;
  14. }
  15. ul.pageNav li.next {
  16.   float: right;
  17. }
  1. .block {
  2.     width: 500px;
  3.     &__element {
  4.         margin-bottom: 2em;
  5.         &--modifier {
  6.             background-color: #f00;
  7.         }
  8.     }
  9. }
  1. .block {
  2.   width: 500px;
  3. }
  4.  
  5. .block__element {
  6.   margin-bottom: 2em;
  7. }
  8.  
  9. .block__element--modifier {
  10.   background-color: #f00;
  11. }
  1. .block {
  2.     width: 500px;
  3.     & &__element {
  4.         margin-bottom: 2em;
  5.         &--modifier {
  6.             background-color: #f00;
  7.         }
  8.     }
  9. }
  1. .block {
  2.   width: 500px;
  3. }
  4.  
  5. .block .block__element {
  6.   margin-bottom: 2em;
  7. }
  8.  
  9. .block .block__element--modifier {
  10.   background-color: #f00;
  11. }