俺のcss

この記事は移行しました！最新の内容はこちらをご覧ください😀

覚えられなくてググってしまう記号（+とか&）のメモとかテクニックとか。

2個目の要素から何かしたい

間隔あけるためmargin-topつけたいとか。隣接セレクタを使う。

// sass
.item {
  & + & {
    margin-top: 10px;
  }
}

// css
.item + .item {
  margin-top: 10px;
}

classAかつBのとき

// &と.をくっつけるのがポイント！
.item {
  &.-primary {
    background-color: #fff; // class="item -primary" のとき

    &.-hollow {
      background-color: #000; // class="item -primary -hollow" のとき（詳細度が高いのでこちらが優先される）
    }
  }
}

クラスAをデフォルト値として使う（未指定でも適用されるようにする）

.item {
  &, // オレでなきゃ見逃しちゃうね！
  &.-primary {
    background-color: #fff;
  }
}

水平線とテキストのようなコンポーネント作りたい

イメージ

----- ここから -----

// HTMLとしてはタグは一つでいい。
<div class="hr">ここから</div>

// before,afterを使って3要素にして、よしなにやる！
.hr {
  display: flex;
  align-items: center;
  text-align: center;

  &::before,
  &::after {
    content: "";
    background: var.$border-color;
    height: 1px;
    flex: 1 1 auto;
  }
}

余白とか何ピクセルがええんや・・・

8の倍数でいけ！