Sass(SCSS)の基本構文5選

/* CSSに出力されるコメント */
// CSSに出力されないコメント

/* CSSに出力されるコメント */

$color-red: red; // グローバル変数

.error {
  color: $color-red;
}

.info {
  $color-blue: blue; // ローカル変数
  color: $color-blue;
}

// コンパイルエラー
// .info_border {
//   border: solid 1px $color-blue;
// }

.error {
  color: red;
}

.info {
  color: blue;
}

$name: twitter;

.icon-#{$name} {
  color: deepskyblue;
}

// コンパイルエラー
// .icon-$name {
//   color: black;
// }

.icon-twitter {
  color: deepskyblue;
}

nav {
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  li {
    display: inline-block;
  }
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav li {
  display: inline-block;
}

a {
  text-decoration: none;

  &:hover {
    opacity: 0.8; 
  }
}

a {
  text-decoration: none;
}
a:hover {
  opacity: 0.8;
}