Sass / Scss セレクタ、継承、関数、変数の基本的な書き方一覧

/*! コメント */
// このコメントは CSS に含まれません
/* このコメントは、圧縮モードを除いて含まれます */
/*! このコメントは圧縮モードでも含まれます */

/*! コメント */
/* このコメントは、圧縮モードを除いて含まれます */
/*! このコメントは圧縮モードでも含まれます */

ul {
  li {
    list-style-type: none;
  }
}

li {
  ul & {
    list-style-type: none;
  }
}

.nav {
  &__ul {
    li {
      list-style-type: none;
    }
  }
}

ul li {
  list-style-type: none;
}

ul li {
  list-style-type: none;
}

.nav__ul li {
  list-style-type: none;
}

ul {
  li {
    list-style-type: none;

    &:hover {
      opacity: .8;
    }

    &::before {
      content: ':';
    }
  }
}

ul li {
  list-style-type: none;
}

ul li:hover {
  opacity: 0.8;
}

ul li::before {
  content: ":";
}

ul {
  >li {
    list-style-type: none;
  }
  ~li {
    list-style-type: none;
  }
  +li {
    list-style-type: none;
  }
}

ul > li {
  list-style-type: none;
}

ul ~ li {
  list-style-type: none;
}

ul + li {
  list-style-type: none;
}

.container {
  background: #ccc;

  @media(max-width: 700px) {
    & {
      background: red;
    }
  }
}

.container {
  background: #ccc;
}
@media (max-width: 700px) {
  .container {
    background: red;
  }
}

@use "sass:map";

$global-color: rgb(215, 111, 111);

h1 {
  $local-size: 20px;
  color: $global-color;
  font-size: $local-size;
}

$font: (
  'weight': ('lighter': 500,
    'medium': 600,
    'bold': 700),
);

.btn_primary {
  font-weight: map.get($font, weight, bold) //７００
}

h1 {
  color: rgb(215, 111, 111);
  font-size: 20px;
}

.btn_primary {
  font-weight: 700;
}

.button {
  display: inline-block;
  border-radius: 5px;
  padding: 6px 15px;
  margin: 5px;

  &:hover {
    opacity: .8;
  }
}

%button {
  display: inline-block;
  border-radius: 5px;
  padding: 6px 15px;
  margin: 5px;

  &:hover {
    opacity: .8;
  }
}

.primary-button {
  @extend %button;
  @extend .button;
}

@media(max-width: 500px) {
  .primary-button {
    @extend %button;
    /* 外側で定義されたものは、media の中では使うことができません。 */
  }
}

.button, .primary-button {
  display: inline-block;
  border-radius: 5px;
  padding: 6px 15px;
  margin: 5px;
}
.button:hover, .primary-button:hover {
  opacity: 0.8;
}

.primary-button {
  display: inline-block;
  border-radius: 5px;
  padding: 6px 15px;
  margin: 5px;
}
.primary-button:hover {
  opacity: 0.8;
}

@media (max-width: 500px) {
  .primary-button {
    /* 外側で定義されたものは、media の中では使うことができません。 */
  }
}

@function size($size: 50px) {
  @return calc($size / 2);
}

.title {
  font-size: size(100px);
  /* font-size: size(); */
}

.title {
  font-size: 50px;
}

@mixin square($size, $radius: 0, $color: #fff) {
  width: $size;
  height: $size;
  background: $color;
  display: flex;
  align-items: center;
  justify-content: center;

  @if $radius !=0 {
    border-radius: $radius;
  }

  &::before {
    content: '😀';
    font-size: size($size);
  }
}

.avatar {
  @include square($size: 100px, $radius: 50%, $color: green);
}

.avatar {
  width: 100px;
  height: 100px;
  background: green;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.avatar::before {
  content: "😀";
  font-size: 50px;
}

$light-background: #f2ece4;
$light-text: #036;
$dark-background: #6b717f;
$dark-text: #d2e1dd;

@mixin theme-colors($light-theme: true) {
  @if $light-theme {
    background-color: $light-background;
    color: $light-text;
  } @else {
    background-color: $dark-background;
    color: $dark-text;
  }
}

$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f");

@each $name, $glyph in $icons {
  .icon-#{$name}:before {
    display: inline-block;
    font-family: "Icon Font";
    content: $glyph;
  }
}

$base-color: #036;

@for $i from 1 through 3 {
  ul:nth-child(3n + #{$i}) {
    background-color: lighten($base-color, $i * 5%);
  }
}

@function scale-below($value, $base, $ratio: 1.618) {
  @while $value > $base {
    
  }
  @return $value;
}

Styles/
├── _variables.scss
└── style.scss

// _variables.scss
$text-color: rgb(60, 60, 60);

// style.scss
@use "variables";

h1 {
  color: variables.$text-color;
}