Web Design Leaves

h1 {
  font-family: "メイリオ" ;
}

$ sass sass/style.scss  return
@charset "UTF-8";
h1 {
  font-family: "メイリオ";
}

//compressed を指定
$ sass --style=compressed sass/style.scss  return
h1{font-family:"メイリオ"}

.sample {
  /* 通常のコメント */
  //１行コメント （コンパイル時に削除される）
  width: 300px;
}

.sample {
  /*! compressed の場合でも削除されないコメント */
  width: 300px;
}

<div class="sample">
  <h3>Title</h3>
  <div class="content">
    <p>paragraph</p>
    <p>paragraph</p>
  </div>
</div>  

.sample {
  border: 1px solid #999;
  background-color: #EEE;
  h3 {
    margin: 20px;
    font-size: 24px;
  }
  .content p {
    color: green;
  }
}

.sample {
  border: 1px solid #999;
  background-color: #EEE;
}
.sample h3 {
  margin: 20px;
  font-size: 24px;
}
.sample .content p {
  color: green;
}

.alert, .warning {
  ul, p {
    margin-right: 0;
    margin-left: 0;
    padding-bottom: 0;
  }
}

.alert ul, .alert p, .warning ul, .warning p {
  margin-right: 0;
  margin-left: 0;
  padding-bottom: 0;
}

ul > {  /*外側のセレクターの後*/
  li {
    list-style-type: none;
  }
}

h2 {
  + p {  /*内側のセレクターの前*/
    border-top: 1px solid gray;
  }
}

p {
  ~ {  /*2つの間に単独で*/
    span {
      opacity: 0.8;
    }
  }
}

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

h2 + p {
  border-top: 1px solid gray;
}

p ~ span {
  opacity: 0.8;
}

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  .foo & { font-weight: normal; }
}

a {
  font-weight: bold;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.foo a {
  font-weight: normal;
}

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; } //& は a を参照
  }
}

#main {
  color: black;
}
#main a {
  font-weight: bold;
}
#main a:hover {
  color: red;
}

.accordion {
  max-width: 600px;
  margin: 4rem auto;
  width: 90%;

  &__copy {
    display: none;
    padding: 1rem 1.5rem 2rem 1.5rem;

    &--open {
      display: block;
    }
  }
}

.accordion {
  max-width: 600px;
  margin: 4rem auto;
  width: 90%;
}
.accordion__copy {
  display: none;
  padding: 1rem 1.5rem 2rem 1.5rem;
}
.accordion__copy--open {
  display: block;
}

.foo {
  & & {
    margin-top: 1rem;
  }
  & + & {
    margin-top: 2rem;
  }
  &,
  &--wide {
    margin-top: 3rem;
  }
}

.bar, .baz {
  & & {
    padding-bottom: 0;
    padding-left: 0;
  }
}

.foo .foo {
  margin-top: 1rem;
}
.foo + .foo {
  margin-top: 2rem;
}
.foo, .foo--wide {
  margin-top: 3rem;
}

.bar .bar, .bar .baz, .baz .bar, .baz .baz {
  padding-bottom: 0;
  padding-left: 0;
}

.
├── css
│   └── style.css
└── sass
    ├── _base.scss
    ├── _variables.scss
    └── style.scss

$primary-color: #333;  /*変数の定義*/

@use "variables";

$font-stack: Helvetica, sans-serif;  /*変数の定義*/

body {
  font-family: $font-stack;
  color: variables.$primary-color;  /*別ファイルのメンバーは namespace.変数名で参照*/
}

@use 'base';
@use "variables";

.inverse {
  background-color: variables.$primary-color;  /*namespace.変数名で参照*/
  color: white;
}

body {
  font-family: Helvetica, sans-serif;
  color: #333;
}

.inverse {
  background-color: #333;
  color: white;
}

.
├── css
│   ├── base.css  //CSS ファイルが生成される
│   ├── variables.css  //CSS ファイルが生成される
│   └── style.css
└── sass
    ├── base.scss //先頭にアンダーバーなし
    ├── variables.scss //先頭にアンダーバーなし
    └── style.scss

$font-color: blue;
$font-color: green !default;

.foo {
  color:$font-color;
}

.foo {
  color: blue;
}

// body の背景色と文字色を上書き
$body-bg: #fefefe;
$body-color: #777;

//フォントを変更
$font-family-base: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, メイリオ, Verdana, Arial, sans-serif;

//角丸設定を上書き
$enable-rounded: false;

//$theme-colors の $light を上書き
$light: #ccc;

/* Bootstrap の読み込み（@import は非推奨ですが、この場合は使っています） */
@import "~bootstrap/scss/bootstrap.scss";

@use 'モジュールの URL' with (
  変数: 値,
  変数: 値,
  ・・・
);

$border-radius: 0.25rem !default;
$padding: 1rem !default;

.code {
  border-radius: $border-radius;
  padding: $padding;
}

@use 'library' with (
  $border-radius: 10px,
  $padding: 10px
);

.code {
  border-radius: 10px;
  padding: 10px;
}

$accent-color: #fbbc04;

:root {
  // 現在の Sass のバージョンでは機能しない
  --accent-color-wrong: $accent-color;

  // 全ての Sass のバージョンで正しく機能する
  --accent-color-right: #{$accent-color};
}

:root {
  --accent-color-wrong: $accent-color; /* そのまま渡されている */
  --accent-color-right: #fbbc04;
}

$padding: 10px;  /*トップレベルで定義*/

.foo {
  $value : 30px; /*ルールセット内で定義*/
  margin: $value;  /*参照可能*/
  p {
    padding: $padding; /*参照可能 */
    margin: $value;  /*参照可能*/
  }
}

.bar {
  margin: $value;  /*参照不可（エラー）*/
}

$var: gold; /*グローバル*/

.content {
  $var: silver;  /*ローカル*/
  color: $var;  /*ローカルを参照（silver）*/
}

.sidebar {
   color: $var;  /*グローバルを参照（gold）*/
}

.content {
  color: silver;
}

.sidebar {
  color: gold;
}

//リストの定義
$classList: top, about, contact;
$classList: top about contact;
$classList: (top) (about) (contact);
$classList: (top, about, contact);
$classList: [top, about, contact];

@use "sass:list";  // list モジュールの読み込み

$classList:list.slash(top, about, contact);

@debug $classList;
//Debug: top / about / contact （コンパイル時のコンソールへの出力）

@use "sass:list";  //list モジュールの読み込み

@debug list.nth(10px 12px 16px, 2);
//Debug: 12px（コンパイル時のコンソールへの出力）
@debug list.nth([line1, line2, line3], -1);
//Debug: line3（コンパイル時のコンソールへの出力）

$class_bg: (
  home: #E8E4E4,
  about: #EFF6FB,
  contact: #E4F8EF,
  news: #F8FBE3
);

$class_bg: (
  home: #E8E4E4,
  about: #EFF6FB,
  contact: #E4F8EF,
  news: #F8FBE3
);

@each $class, $bg in $class_bg {
  .#{$class} {
    background-color: $bg;
  }
}

.home {
  background-color: #E8E4E4;
}
.about {
  background-color: #EFF6FB;
}
.contact {
  background-color: #E4F8EF;
}
.news {
  background-color: #F8FBE3;
}

@use "sass:map";  //map モジュールの読み込み

$font-weights: ("regular": 400, "medium": 500, "bold": 700);  //マップの定義

@debug map.get($font-weights, "medium");
//Debug: 500（コンパイル時のコンソールへの出力）
@debug map.get($font-weights, "extra-bold");
//Debug: null（コンパイル時のコンソールへの出力）

.thumb {
  width: 200px - (5 * 2) - 2;
  padding: 5px + 3px;
  border: 1px * 2 solid #ccc;
}

.thumb {
  width: 188px;
  padding: 8px;
  border: 2px solid #ccc;
}

$main-width: 600px;
$border-width: 2px;

.foo {
  $padding: 5px;
  width: $main-width - $padding * 2 - $border-width *2;
}

.foo {
  width: 586px;
}

p {
  cursor: e + -resize;
}

p {
  cursor: e-resize;
}

p::before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}

p::before {
  content: "Foo Bar";
  font-family: sans-serif;
}

$theme-color: #049A36;

$radius: 3px;

@mixin rounded {
  border-radius: $radius;
}

@use "corners";
@use "variables";

.button {
  @include corners.rounded;   /*名前空間（corners）を指定*/
  padding: 5px + corners.$radius;  /*名前空間（corners）を指定*/
  background-color: variables.$theme-color; /*名前空間（variables）を指定*/
  color: #fff;
}

.button {
  border-radius: 3px;
  padding: 8px;
  background-color: #049A36;
  color: #fff;
}

/* !default フラグを指定して定義 */
$black: #000 !default;
$border-radius: 0.25rem !default;
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;

code {
  border-radius: $border-radius;
  box-shadow: $box-shadow;
}

/* with を使って変数の値を上書き */
@use 'library' with (
  $black: #666,
  $border-radius: 0.1rem
);

code {
  border-radius: 0.1rem;
  box-shadow: 0 0.5rem 1rem rgba(102, 102, 102, 0.15);
}

.
├── css
│   └── style.css
└── sass
    ├── foundation
    │   ├── _code.scss
    │   ├── _lists.scss
    │   └── _index.scsss /*インデックスファイル*/
    └── style.scss

code {
  padding: .25em;
  line-height: 0;
}

ul, ol {
  text-align: left;

  & & {
    padding: {
      bottom: 0;
      left: 0;
    }
  }
}

@use 'code';
@use 'lists';

@use 'foundation';

code {
  padding: .25em;
  line-height: 0;
}

ul, ol {
  text-align: left;
}
ul ul, ol ol {
  padding-bottom: 0;
  padding-left: 0;
}

code {
  padding: .25em;
  line-height: 0;
}

@use 'code';

code {
  padding: .25em;
  line-height: 0;
}

@mixin reset {
  margin: 0;
  padding: 0;
  list-style: none;
}

$color: #333;

@mixin reset {
  margin: 0;
  padding: 0;
  list-style: none;
}

@forward "list" as list-*; /* プレフィックスを指定 */

@use 'foo';

li {
  @include foo.list-reset;
  color: foo.$list-color;
}

li {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #333;
}

$theme-color: #049A36;
$blue-color: blue;
$red-color: red;

@forward "variables" show $theme-color;

@forward "variables" hide $blue-color, $red-color;

$black: #000 !default;
$border-radius: 0.25rem !default;
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;

code {
  border-radius: $border-radius;
  box-shadow: $box-shadow;
}

@forward "library" with (
  $black: #999,
  $border-radius: 0.1rem
);

@use 'foo';

code {
  border-radius: 0.1rem;
  box-shadow: 0 0.5rem 1rem rgba(153, 153, 153, 0.15);
}

@forward 'library' with (
  /* !default フラグを使用 */
  $black: #999 !default,
  $border-radius: 0.1rem !default
);

@use 'foo' with ($black: #333); /* デフォルトをオーバーライド */

code {
  border-radius: 0.1rem;
  box-shadow: 0 0.5rem 1rem rgba(51, 51, 51, 0.15);
}

@mixin ミックスイン名(引数) {
  /* ミックスインの定義を記述 */
}

セレクタ {
  @include ミックスイン名(引数);
}

@mixin my-border($color, $width, $radius) {
  border: {
    color: $color;
    width: $width;
    radius: $radius;
  }
}

p {
  @include my-border(blue, 1px, 3px);
}

p {
  border-color: blue;
  border-width: 1px;
  border-radius: 3px;
}

@mixin rtl($property, $ltr-value, $rtl-value) {
  #{$property}: $ltr-value;

  [dir=rtl] & {
    #{$property}: $rtl-value;
  }
}

.sidebar {
  @include rtl(float, left, right);
}

.sidebar {
  float: left;
}
[dir=rtl] .sidebar {
  float: right;
}

@mixin clearfix() {
  &::after {
    display: block;
    clear: both;
    content: "";
  }
}

.clearfix {
  @include clearfix();
}

.clearfix::after {
  display: block;
  clear: both;
  content: "";
}

@mixin kadomaru($radius: 5px) {
  border-radius: $radius;
}

.foo {
  @include kadomaru; /* カッコと値を省略 */
}
.bar {
  @include kadomaru(); /* 値を省略 */
}
.baz {
  @include kadomaru(10px);
}

.foo {
  border-radius: 5px;
}
.bar {
  border-radius: 5px;
}
.baz {
  border-radius: 10px;
}

@mixin kadomaruBox($radius: 5px, $bgColor: #EEE) {
  border-radius: $radius;
  background-color: $bgColor;
}

.foo {
  @include kadomaruBox(4px);
}
.bar {
  @include kadomaruBox(5px, #DDDDDD);
}

/* 一つ目の値を省略するとエラーになります */
.baz {
  @include kadomaruBox(, #DDDDDD);  //エラー
}

/* カンマも含めて省略するとコンパイル時にエラーにならないが意味をなさない*/
.baz {
  @include kadomaruBox(#DDDDDD);  //border-radius:#DDDDDD となる
}

@mixin kadomaruBox($radius: 5px, $bgColor: #EEE) {
  border-radius: $radius;
  background-color: $bgColor;
}

.foo {
  @include kadomaruBox(4px);
}
.bar {
  @include kadomaruBox(5px, #DDDDDD);
}

.baz {
  @include kadomaruBox($bgColor:#DDDDDD);  //エラーにならない
}

.foo {
  border-radius: 4px;
  background-color: #EEE;
}

.bar {
  border-radius: 5px;
  background-color: #DDDDDD;
}

.baz {
  border-radius: 5px;
  background-color: #DDDDDD;
}

@mixin link-color($normal, $hover, $active: null){
  color: $normal;
  &:hover {
    color: $hover;
    text-decoration: none;
  }
  @if $active {
    &:active {
      color: $active;
      text-decoration: none;
    }
  }
}

.foo a {
  @include link-color(#2B69C7, #365DA0);
}

.bar a {
  @include link-color(#666, #365DA0, #2B69C7);
}

.foo a {
  color: #2B69C7;
}
.foo a:hover {
  color: #365DA0;
  text-decoration: none;
}

.bar a {
  color: #666;
}
.bar a:hover {
  color: #365DA0;
  text-decoration: none;
}
.bar a:active {
  color: #2B69C7;
  text-decoration: none;
}

@mixin boxShadow($values) {
  box-shadow: $values;
}

.foo {
  @include boxShadow(3px 3px 8px #999);
}

.bar {
  /* エラーになる Error: Only 1 argument allowed, but 2 were passed.*/
  @include boxShadow(3px 3px 8px #999, -3px -3px 8px #CCC);
}

@mixin boxShadow($values) {
  box-shadow: $values;
}

.foo {
  @include boxShadow(3px 3px 8px #999);
}

.bar {
  /* ( ) または [ ] で囲んでリストで渡す */
  @include boxShadow((3px 3px 8px #999, -3px -3px 8px #CCC));
  // または @include boxShadow([3px 3px 8px #999, -3px -3px 8px #CCC]);
}

/* 可変長引数（引数名の後に ... ）を使う */
@mixin boxShadow($values...) {
  box-shadow: $values;
}

.foo {
  @include boxShadow(3px 3px 8px #999);
}

//エラーにならない
.bar {
  @include boxShadow(3px 3px 8px #999, -3px -3px 8px #CCC);
}

@mixin order($height, $selectors...) {
  @for $i from 0 to length($selectors) {
    #{nth($selectors, $i + 1)} {
      position: absolute;
      height: $height;
      margin-top: $i * $height;
    }
  }
}

@include order(150px, "input.name", "input.address", "input.zip");

@use "sass:list"; /* list モジュールの読み込み */

@mixin order($height, $selectors...) {
  @for $i from 0 to list.length($selectors) {
    #{list.nth($selectors, $i + 1)} {
      position: absolute;
      height: $height;
      margin-top: $i * $height;
    }
  }
}

@include order(150px, "input.name", "input.address", "input.zip");

input.name {
  position: absolute;
  height: 150px;
  margin-top: 0px;
}

input.address {
  position: absolute;
  height: 150px;
  margin-top: 150px;
}

input.zip {
  position: absolute;
  height: 150px;
  margin-top: 300px;
}

@use "sass:meta"; /* meta モジュールの読み込み */

@mixin syntax-colors($args...) {
  @each $name, $color in meta.keywords($args) {
    pre span.stx-#{$name} {
      color: $color;
    }
  }
}

@include syntax-colors(
  /* キーワード引数を渡す */
  $string: #080,
  $comment: #800,
  $variable: #60b,
)

pre span.stx-string {
  color: #080;
}

pre span.stx-comment {
  color: #800;
}

pre span.stx-variable {
  color: #60b;
}

@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}
$values: #ff0000, #00ff00, #0000ff;

.foo {
  /*エラーになる Error: Missing argument $background*/
  @include colors($values);
}

@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}
$values: #ff0000, #00ff00, #0000ff;

.foo {
  @include colors($values...);  //OK
}

.foo {
  color: #ff0000;
  background-color: #00ff00;
  border-color: #0000ff;
}

@use "sass:map";
@use "sass:meta";

$breakpoints: (
  'xs': (min-width: 0),
  'sm': (min-width: 576px),
  'md': (min-width: 768px),
  'lg': (min-width: 992px),
  'xl': (min-width: 1200px),
  'xxl': (min-width: 1400px)
) !default;

@mixin bp-mq($name: lg) {
  @media screen and #{meta.inspect(map.get($breakpoints, $name))} {
    @content;
  }
}

@use "sass:map";

$breakpoints: (
  'xs': '(min-width: 0)',
  'sm': '(min-width: 576px)',
  'md': '(min-width: 768px)',
  'lg': '(min-width: 992px)',
  'xl': '(min-width: 1200px)',
  'xxl': '(min-width: 1400px)'
) !default;

@mixin bp-mq($name: lg) {
  @media screen and #{map.get($breakpoints, $name)} {
    @content;
  }
}

@use "sass:map";

$breakpoints: (
  'xs': 0,
  'sm': 576px,
  'md': 768px,
  'lg': 992px,
  'xl': 1200px,
  'xxl': 1400px
) !default;

@mixin bp-mq($name: lg) {
  @media screen and (min-width: #{map.get($breakpoints, $name)})  {
    @content;
  }
}

@use "breakpoints" as bp;

.logo {
  width: 130px;
  @include bp.bp-mq(sm) {
    width: 150px;
  }
  @include bp.bp-mq(md) {
    width: 170px;
  }
  @include bp.bp-mq(lg) {
    width: 200px;
  }
}

.logo {
  width: 130px;
}
@media screen and (min-width: 576px) {
  .logo {
    width: 150px;
  }
}
@media screen and (min-width: 768px) {
  .logo {
    width: 170px;
  }
}
@media screen and (min-width: 992px) {
  .logo {
    width: 200px;
  }
}

@use "sass:map";

$breakpoints: (
  'xs': 0,
  'sm': 576px,
  'md': 768px,
  'lg': 992px,
  'xl': 1200px,
  'xxl': 1400px
) !default;

@mixin bp-mq($name: null) {
  @if $name {
    @if map.has-key($breakpoints, $name) {
      @media screen and (min-width: #{map.get($breakpoints, $name)})  {
        @content;
      }
    }@else {
       @error "breakpoint #{$name} is not defined. use: #{map.keys($breakpoints)}";
    }
  } @else {
    /* 引数を省略した場合はメディアクエリを出力しない*/
    @content;
  }
}

.@use "breakpoints" as bp;

.logo {
  width: 130px;
  /* 引数を省略するとミックスインを使わない場合と同じ */
  @include bp.bp-mq() {
    width: 130px;
  }
  @include bp.bp-mq(sm) {
    width: 150px;
  }
  @include bp.bp-mq(md) {
    width: 170px;
  }
  @include bp.bp-mq(lg) {
    width: 200px;
  }
}

.logo {
  width: 130px;
  width: 130px; /*同じ内容が出力されている（不要）*/
}
@media screen and (min-width: 576px) {
  .logo {
    width: 150px;
  }
}
@media screen and (min-width: 768px) {
  .logo {
    width: 170px;
  }
}
@media screen and (min-width: 992px) {
  .logo {
    width: 200px;
  }
}

@use "sass:map";

$breakpoints: (
  'xs': 0,
  'sm': 576px,
  'md': 768px,
  'lg': 992px,
  'xl': 1200px,
  'xxl': 1400px
) !default;

/* min-width での指定 */
@mixin bp-mq-up($name: null) {
  @if $name {
    @if map.has-key($breakpoints, $name) {
      @media screen and (min-width: #{map.get($breakpoints, $name)})  {
        @content;
      }
    }@else {
       @error "breakpoint #{$name} is not defined. use: #{map.keys($breakpoints)}";
    }
  } @else {
    @content;
  }
}

/* max-width での指定 */
@mixin bp-mq-down($name: null) {
  @if $name {
    @if map.has-key($breakpoints, $name) {
      @media screen and (max-width: #{map.get($breakpoints, $name) - 0.2})  {
        @content;
      }
    }@else {
       @error "breakpoint #{$name} is not defined. use: #{map.keys($breakpoints)}";
    }
  } @else {
    @content;
  }
}

/* min-width と max-width の両方での指定 */
@mixin bp-mq-between($min: null, $max: null ) {
  @if $min != null and $max != null  {
    @if map.has-key($breakpoints, $min) and map.has-key($breakpoints, $max) {
      @media screen and (min-width: #{map.get($breakpoints, $min)}) and (max-width: #{map.get($breakpoints, $max) - 0.2}) {
        @content;
      }
    }@else {
      @error "breakpoint is not defined. use: #{map.keys($breakpoints)}";
    }
  } @else {
    @error "need two breakpoints";
  }
}

@use "breakpoints" as bp;

.logo {
  width: 130px;
  @include bp.bp-mq-up(sm) {
    width: 150px;
  }
  @include bp.bp-mq-up(md) {
    width: 170px;
  }
  @include bp.bp-mq-up(lg) {
    width: 200px;
  }
}

.logo2 {
  width: 220px;
  @include bp.bp-mq-down(xl) {
    width: 200px;
  }
  @include bp.bp-mq-down(lg) {
    width: 180px;
  }
  @include bp.bp-mq-down(md) {
    width: 150px;
  }
}

.logo-text {
  background-color: white;
  @include bp.bp-mq-between(md, lg) {
    background-color: silver;
  }
  @include bp.bp-mq-between(lg, xxl) {
    background-color: gold;
  }
}

.logo {
  width: 130px;
}
@media screen and (min-width: 576px) {
  .logo {
    width: 150px;
  }
}
@media screen and (min-width: 768px) {
  .logo {
    width: 170px;
  }
}
@media screen and (min-width: 992px) {
  .logo {
    width: 200px;
  }
}

.logo2 {
  width: 220px;
}
@media screen and (max-width: 1199.8px) {
  .logo2 {
    width: 200px;
  }
}
@media screen and (max-width: 991.8px) {
  .logo2 {
    width: 180px;
  }
}
@media screen and (max-width: 767.8px) {
  .logo2 {
    width: 150px;
  }
}

.logo-text {
  background-color: white;
}
@media screen and (min-width: 768px) and (max-width: 991.8px) {
  .logo-text {
    background-color: silver;
  }
}
@media screen and (min-width: 992px) and (max-width: 1399.8px) {
  .logo-text {
    background-color: gold;
  }
}

@mixin hover($color) {
  &:not([disabled]):hover {
    @content($color);
  }
}

.button {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid lightgreen;
  @include hover(green) using ($color){
    border-width: 2px;
    border-color: $color;
    color: $color;
  }
}

.button {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid lightgreen;
}
.button:not([disabled]):hover {
  border-width: 2px;
  border-color: green;
  color: green;
}

@mixin media($types...) {
  @each $type in $types {
    @media #{$type} {
      @content($type);
    }
  }
}

@include media(screen, print) using ($arg) {
  h1 {
    font-size: 40px;
    @if $arg == print {
      font-family: Verdana, Arial, sans-serif;
    }
  }
}

@media screen {
  h1 {
    font-size: 40px;
  }
}
@media print {
  h1 {
    font-size: 40px;
    font-family: Verdana, Arial, sans-serif;
  }
}

@use "sass:math";

@mixin bgcolors($length:5) {
  @for $i from 1 through $length {
    @content($i, 360deg * math.div($i, $length));
  }
}

@include bgcolors(3) using ($number, $hue) {
  .color-#{$number} {
    background-color: hsl($hue, 75%, 90%);
  }
}

.color-1 {
  background-color: #d2f9d2;
}

.color-2 {
  background-color: #d2d2f9;
}

.color-3 {
  background-color: #f9d2d2;
}

/* セレクタ名を % で始める */
%box {
  margin: 20px 0;
  padding: 10px;
  border: 1px solid #999;
}

.box--primary {
  @extend %box; /* %box を継承 */
  border-color: blue;
  background-color: #CDEBF8;
}

.box--error {
  @extend %box;  /* %box を継承 */
  border-color: red;
  background-color: #F8D0D1;
}}

.box--error, .box--primary {
  margin: 20px 0;
  padding: 10px;
  border: 1px solid #999;
}

.box--primary {
  border-color: blue;
  background-color: #CDEBF8;
}

.box--error {
  border-color: red;
  background-color: #F8D0D1;
}

/* コンポーネントの共通スタイルをプレースホルダーを使って作成 */
%btn {
  display: inline-block;
  position: relative;
  cursor: pointer;
  padding: 10px 20px;
  border: 1px solid #999;
}

/* 色の異なるバリエーションを作成 */
.btn {
  @extend %btn;
  background-color: #fff;
}

.btn--primary {
  @extend %btn;
  border-color: blue;
  background-color: blue;
  color: #fff;
}
.btn--caution {
  @extend %btn;
  border-color: red;
  background-color: red;
  color: #fff;
}

.btn--caution, .btn--primary, .btn {
  display: inline-block;
  position: relative;
  cursor: pointer;
  padding: 10px 20px;
  border: 1px solid #999;
}

.btn {
  background-color: #fff;
}

.btn--primary {
  border-color: blue;
  background-color: blue;
  color: #fff;
}

.btn--caution {
  border-color: red;
  background-color: red;
  color: #fff;
}

/* @extend が適さない例 */
%clearfix {
  &::after {
    display: block;
    clear: both;
    content: "";
  }
}

.wrapper {
  @extend %clearfix;
  //その他のスタイルの設定
}

.header {
  @extend %clearfix;
  //その他のスタイルの設定
}

.nav {
  @extend %clearfix;
  //その他のスタイルの設定
}

.card {
  @extend %clearfix;
  //その他のスタイルの設定
}

.list {
  @extend %clearfix;
  //その他のスタイルの設定
}

・・・

@if 式 {
  適用するスタイルなどの記述（ブロック）
}

@if 式 {
  true の場合に適用する記述（ブロック）
}@else {
  false の場合に適用する記述（ブロック）
}

@if 式１ {
  式１が true の場合に適用するブロック
}@else if 式２ {
  式１が false で、式２が true の場合に適用するブロック
}@else {
  式１及び式２が false の場合に適用するブロック
}

$useBGC: true;

.foo {
  @if $useBGC {
    background-color: blue; /* $useBGC は true なので適用される */
  }
  font-size: 14px;
}

$useBGC: false;

.bar {
  @if $useBGC {
    background-color:green; /* $useBGC は false なので適用されない */
  }
  font-size: 16px;
}

.foo {
  background-color: blue;
  font-size: 14px;
}

.bar {
  font-size: 16px;
}

@mixin link-color($normal, $hover, $active: null){
  color: $normal;
  &:hover {
    color: $hover;
    text-decoration: none;
  }
  @if $active { /* $active が true の場合はこのブロックが適用される */
    &:active {
      color: $active;
      text-decoration: none;
    }
  }
}

.foo a {
  @include link-color(green, darkgreen); /* 3番目の引数を省略（$active は null） */
}

.bar a {
  @include link-color(blue, darkblue, lightblue);
}

.foo a {
  color: green;
}
.foo a:hover {
  color: darkgreen;
  text-decoration: none;
}

.bar a {
  color: blue;
}
.bar a:hover {
  color: darkblue;
  text-decoration: none;
}
.bar a:active {  /* $active は true と判定される */
  color: lightblue;
  text-decoration: none;
}

$type: tree;

p {
  @if $type == ocean {
    color: blue;
  } @else if $type == fire {
    color: red;
  } @else if $type == tree {
    color: green;
  } @else {
    color: black;
  }
}

p {
  color: green;
}

@for $変数名 from 開始の番号 through 終了の番号 {
  適用するスタイルなどの記述（ブロック）
}

@for $変数名 from 開始の番号 to 終了の番号 {
  適用するスタイルなどの記述（ブロック）
}

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}

@for $value from 1 to 5 {
  .mt-#{$value * 10} {
    margin-top: 10px * $value;
  }
}

.mt-10 {
  margin-top: 10px;
}
.mt-20 {
  margin-top: 20px;
}
.mt-30 {
  margin-top: 30px;
}
.mt-40 {
  margin-top: 40px;
}

@use "sass:list"; /* list モジュールの読み込み */

$new-list: (); /* 空のリストを作成 */

@for $i from 1 through 5 {
  /* リストに値を追加 */
  $new-list: list.append($new-list, $i * 10 + px, $separator: comma);
}

@debug $new-list; /* 10px, 20px, 30px, 40px, 50px */

@use "sass:color";  /* color モジュールの読み込み */
@use "sass:list";  /* list モジュールの読み込み */

/* mixin の定義 */
@mixin txt-shadow-3d($color: #999, $lightness: -30%, $opacity: 70%, $repeat:5) {
  /* 引数のリスト（最後にカンマを付ける） */
  $args: 1px 1px $color,;

  @if $repeat > 1 {
    @for $i from 2 through $repeat {
      $args: list.append($args, $i + px $i + px color.scale($color, $lightness: $lightness, $alpha: $opacity), $separator: comma);
    }
  }
  color: $color;
  text-shadow: $args;
}

/* mixin の呼び出し */
.foo {
  font-size: 40px;
  font-weight: bold;
  @include txt-shadow-3d();
}

.bar {
  font-size: 50px;
  @include txt-shadow-3d($color: #EF787A, $lightness: -50%);
}

.foo {
  font-size: 40px;
  font-weight: bold;
  color: #999;
  text-shadow: 1px 1px #999, 2px 2px #6b6b6b, 3px 3px #6b6b6b, 4px 4px #6b6b6b, 5px 5px #6b6b6b;
}

.bar {
  font-size: 50px;
  color: #EF787A;
  text-shadow: 1px 1px #EF787A, 2px 2px #a01315, 3px 3px #a01315, 4px 4px #a01315, 5px 5px #a01315;
}

@while 繰り返しを継続する条件 {
  適用するスタイルなどの記述
  繰り返しの条件を更新（必要に応じて）
}

$value: 10;

@while $value < 50 {
  .mt-#{$value} {
    margin-top: $value + px;
  }
  $value: $value + 10;
}

.mt-10 {
  margin-top: 10px;
}
.mt-20 {
  margin-top: 20px;
}
.mt-30 {
  margin-top: 30px;
}
.mt-40 {
  margin-top: 40px;
}

@use "sass:math"; /* sass:math モジュールの読み込み */

$width: 100%;

div {
  width: math.div($width, 3);  /* 割り算 */
}

.foo {
  width: ceil(math.div($width, 3)); /* 切り上げ */
}

.bar {
  width: floor(math.div($width, 3)); /* 切捨て */
}

.baz {
  width: round(math.div($width, 3)); /* 四捨五入 */
}

div {
  width: 33.3333333333%;
}

.foo {
  width: 34%;
}

.bar {
  width: 33%;
}

.baz {
  width: 33%;
}

math.is-unitless($number)

@use "sass:math"; /* sass:math モジュールの読み込み */

$width: 400;

/* 変数の値に単位がついていない場合は付ける */
@if(math.is-unitless($width)) {
  $width: $width + "px";
}

.foo {
  width: $width ;
}

.foo {
  width: "400px";
}

math.compatible($number1, $number2)

@use "sass:math";

@debug math.compatible(2px, 1px); // true
@debug math.compatible(100px, 3em); // false
@debug math.compatible(10cm, 3mm); // true

math.percentage($number)

@use "sass:math";

@debug math.percentage(0.2); // 20%
@debug math.percentage(math.div(100px, 50px)); // 200%

@debug 0.2 * 100%; // 20%
@debug math.div(100px, 50px) * 100%; // 200%

math.random($limit: null)

@use "sass:math";

@debug math.random(); // 0.2928238498
@debug math.random(); // 0.5194162379
@debug math.random(10); // 2
@debug math.random(10000); // 2063

@use "sass:color"; /* sass:color モジュールの読み込み */

$color: #038F34;
$amount: 20%;

.foo {
  background-color: darken($color, $amount);
}
.bar {
  background-color: color.adjust($color, $lightness:  -($amount));
}
.baz {
  background-color: color.scale($color, $lightness: -($amount));
}
.qux {
  background-color: color.change($color, $lightness: calc(color.lightness($color) - $amount));
}

.foo {
  background-color: #012b10;  /* darken() */
}
.bar {
  background-color: #012b10;  /* color.adjust() */
}
.baz {
  background-color: #02722a;  /* color.scale() */
}
.qux {
  background-color: #012b10;  /* color.change() */
}

.foo {
  background-color: black;  /* darken() */
}
.bar {
  background-color: black;  /* color.adjust() */
}
.baz {
  background-color: #026424;  /* color.scale() */
}

@use "sass:color";

$color: #038F34;

@debug color.alpha(rgba($color, 50%));  //0.5（透過度）
@debug color.red($color); //3 （Red チャンネル）
@debug color.green($color); //143（Green チャンネル）
@debug color.blue($color); //52（Blue チャンネル）
@debug color.hue($color); // 141deg （色相）
@debug color.saturation($color); //95.8904109589%（彩度）
@debug color.lightness($color); //28.6274509804%（明度）
@debug color.complement($color); //#8f035e（補色）
@debug color.grayscale($color); //#494949（グレースケール）
@debug color.blackness($color); //43.9215686275%（黒色度）
@debug color.whiteness($color); //1.1764705882%（白色度）

@use "sass:color";

@function invert($color, $amount: 100%) {
  $inverse: color.change($color, $hue: color.hue($color) + 180);
  @return color.mix($inverse, $color, $amount);
}

$primary-color: #02B054;

.foo {
  /* 100% が適用され補色になる */
  background-color: invert($primary-color);
}

.bar {
  background-color: invert($primary-color, 80%);
}

.baz {
  /* 0% が適用され元の色のまま */
  background-color: invert($primary-color, 0%);
}

.foo {
  background-color: #b0025e;
}

.bar {
  background-color: #8d255c;
}

.baz {
  background-color: #02b054;
}

@use "sass:string";  /* string モジュールの読み込み */

@debug string.unquote("foo");  //foo
@debug string.quote(foo);  //"foo"
@debug string.length("foo");  //3
@debug string.to-upper-case("foo");  //FOO
@debug string.to-lower-case("FOO");  //foo
@debug string.index("Helvetica Neue", "Neue");  //11
@debug string.insert("foo", "X", 3);  //foXo
@debug string.slice("abcd", 2);  //bcd

string.index($string, $substring)

@use "sass:string";

@debug string.index("Helvetica Neue", "Helvetica"); // 1
@debug string.index("Helvetica Neue", "Neue"); // 11
@debug string.index("Helvetica Neue", "Mono"); //null

string.inser($string, $insert, $index)

@use "sass:string";

@debug string.insert("Roboto Bold", " Mono", 7); // "Roboto Mono Bold"
@debug string.insert("Roboto Bold", " Mono", -6); // "Roboto Mono Bold"

@use "sass:string";

@debug string.insert("Roboto", " Bold", 100); // "Roboto Bold"
@debug string.insert("Bold", "Roboto ", -100); // "Roboto Bold"

string.slice($string, $start-at, $end-at: -1)

@use "sass:string";

@debug string.slice("Helvetica Neue", 11); // "Neue"
@debug string.slice("Helvetica Neue", 1, 3); // "Hel"
@debug string.slice("Helvetica Neue", 1, -6); // "Helvetica"
@debug string.slice("Helvetica Neue", -9, -7); // "tic"

list.index($list, $value)

@use "sass:list";  /* list モジュールの読み込み */

@debug list.index(1px solid red, 1px); // 1
@debug list.index(1px solid red, solid); // 2
@debug list.index(1px solid red, dashed); // null
@debug list.index((width: 10px, height: 20px), (height 20px)); //2

list.nth($list, $n)

@use "sass:list";

@debug list.nth(10px 12px 16px, 2); // 12px
@debug list.nth([line1, line2, line3], -1); // line3

$list: foo, bar, baz;
@debug list.nth($list, -2); //bar
@debug list.nth($list, 5); //以下のエラーになる（該当する要素がない）
/*Error: $n: Invalid index 5 for a list with 3 elements.*/

list.set-nth($list, $n, $value)

@use "sass:list";

@debug list.set-nth(10px 20px 30px, 1, 2em); // 2em 20px 30px
@debug list.set-nth((10px 20px 30px), -1, 8em); // 10px, 20px, 8em

$font: Helvetica, Arial, sans-serif;
@debug list.set-nth($font, 3, Roboto); // Helvetica, Arial, Roboto

list.join($list1, $list2, $separator: auto, $bracketed: auto)

@use "sass:list";

@debug list.join(10px 20px, 30px 40px); // 10px 20px 30px 40px
@debug list.join((blue, red), (#abc, #def)); // blue, red, #abc, #def
@debug list.join(10px, 20px); // 10px 20px
@debug list.join(10px, 20px, $separator: comma); // 10px, 20px
@debug list.join((blue, red), (#abc, #def), $separator: space); // blue red #abc #def
@debug list.join([10px], 20px); // [10px 20px]
@debug list.join(10px, 20px, $bracketed: true); // [10px 20px]

list.append($list, $val, $separator: auto)

@use "sass:list";

@debug list.append(10px 20px, 30px); // 10px 20px 30px
@debug list.append((blue, red), green); // blue, red, green
@debug list.append(10px, 20px, $separator: comma); // 10px, 20px
@debug list.append((blue, red), green, $separator: space); // blue red green
/* リストを追加すると、リスト内にネストされる */
@debug list.append(10px 20px, 30px 40px); // 10px 20px (30px 40px)

@use "sass:list";

$box-shadow: (10px 5px 5px #8D9EB8,);  /*または 10px 5px 5px #8D9EB8, */
$box-shadow2: 20px 10px 10px #B0F5C9;

.foo {
  box-shadow: list.append($box-shadow, $box-shadow2, comma);
}

.bar{
  box-shadow: $box-shadow;
}

.foo {
  box-shadow: 10px 5px 5px #8D9EB8, 20px 10px 10px #B0F5C9;
}

.bar {
  box-shadow: 10px 5px 5px #8D9EB8;
}

list.zip($lists...) 

@use "sass:list";

@debug list.zip(10px 50px 100px, short mid long); // 10px short, 50px mid, 100px long
@debug list.zip(10px 50px 100px, short mid); // 10px short, 50px mid

@use "sass:list";

$x-c: 0 0 0 0 0;
$y-c: 0 1px 2px 3px 4px;
$blur: 0 0 0 0 1px;
$color: #ccc #c9c #bbb #b9b #aaa;

.foo {
  text-shadow: zip($x-c, $y-c, $blur, $color);
}

.foo {
  text-shadow: 0 0 0 #ccc, 0 1px 0 #c9c, 0 2px 0 #bbb, 0 3px 0 #b9b, 0 4px 1px #aaa;
}

list.slash($elements...) 

@use "sass:list";

@debug list.slash(1px, 50px, 100px); // 1px / 50px / 100px

map.get($map, $key)

@use "sass:map";  /* map モジュールの読み込み */

$font-weights: ("light": 300, "regular": 400, "medium": 500, "bold": 700);

.foo {
  font-weight: map.get($font-weights, "light");
}
.bar {
  font-weight: map.get($font-weights, "heavy"); /* 存在しないキー */
}

.foo {
  font-weight: 300;
}
/*.bar は存在しないキーを指定したので null が返りプロパティは書き出されません。*/

map.get($map, $key, $keys...)

@use "sass:map";  /* map モジュールの読み込み */

$fonts: (
  "Helvetica": (
    "weights": (
      "regular": 400,
      "medium": 500,
      "bold": 700
    )
  )
);

.foo {
  font-weight: map.get($fonts, "Helvetica", "weights", "regular");
}
.bar {
  font-weight: map.get($fonts, "Helvetica", "colors"); /* 存在しないキー */
}

.foo {
  font-weight: 400;
}
/*.bar は存在しないキーを指定したので null が返りプロパティは書き出されません。*/

map.has-key($map, $key)

@use "sass:map";

$font-weights: ("light": 300, "regular": 400, "medium": 500, "bold": 700);

.foo {
  @if map.has-key($font-weights, "light") {
    font-weight: map.get($font-weights, "light");
  } @else {
    font-weight: 400;
  }
}
.bar {
  @if map.has-key($font-weights, "bolder") {
    font-weight: map.get($font-weights, "bolder");
  } @else {
    font-weight: 700;
  }
}

.foo {
  font-weight: 300; /* "light" は存在するのでその値 */
}
.bar {
  font-weight: 700; /* "bolder" は存在しないので @else の値*/
}

map.has-key($map, $key, $keys...)

@use "sass:map";

$fonts: (
  "Helvetica": (
    "weights": (
      "light": 300,
      "regular": 400,
      "medium": 500,
      "bold": 700
    )
  )
);

.foo {
  @if map.has-key($fonts, "Helvetica", "weights", "light") {
    font-weight: map.get($fonts, "Helvetica", "weights", "light");
  } @else {
    font-weight: 400;
  }
}

.foo {
  font-weight: 300; /* "light" は存在するのでその値 */
}

map.keys($map)

@use "sass:map";

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map.keys($font-weights); /* "regular", "medium", "bold"*/

map.values($map)

@use "sass:map";

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map.values($font-weights); /* 400, 500, 700 */

map.merge($map1, $map2)

@use "sass:map";

$light-weights: ("lightest": 100, "light": 300);
$heavy-weights: ("medium": 500, "bold": 700);

@debug map.merge($light-weights, $heavy-weights);
/*("lightest": 100, "light": 300, "medium": 500, "bold": 700)*/

map.merge($map1, $keys..., $map2)

@use "sass:map";

$fonts: (
  "Helvetica": (
    "weights": (
      "lightest": 100,
      "light": 300
    )
  )
);
$heavy-weights: ("medium": 500, "bold": 700);

@debug map.merge($fonts, "Helvetica", "weights", $heavy-weights);
/*
(
  "Helvetica": (
    "weights": (
      "lightest": 100,
      "light": 300,
      "medium": 500,
      "bold": 700
    )
  )
)
*/

map.remove($map, $keys...)

@use "sass:map";

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map.remove($font-weights, "regular"); /* ("medium": 500, "bold": 700) */
@debug map.remove($font-weights, "regular", "bold"); /* ("medium": 500) */
@debug map.remove($font-weights, "bolder");
/* 指定されたキーが存在しない ("regular": 400, "medium": 500, "bold": 700)) */

map.set($map, $key, $value)

@use "sass:map";

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map.set($font-weights, "regular", 300);
// ("regular": 300, "medium": 500, "bold": 700)

map.set($map, $keys..., $key, $value)

@use "sass:map";

$fonts: (
  "Helvetica": (
    "weights": (
      "regular": 400,
      "medium": 500,
      "bold": 700
    )
  )
);

@debug map.set($fonts, "Helvetica", "weights", "regular", 300);
/*
(
  "Helvetica": (
    "weights": (
      "regular": 300,
      "medium": 500,
      "bold": 700
    )
  )
)
*/

meta.inspect($value)

@use "sass:meta";

$font-family-monospace: Menlo, Consolas, "Courier New", monospace;

:root {
  --font-family-monospace: #{meta.inspect($font-family-monospace)};
}

:root {
  --font-family-monospace: Menlo, Consolas, "Courier New", monospace;
}

@use "sass:meta";

@debug meta.type-of(10px); // number
@debug meta.type-of(10px 20px 30px); // list
@debug meta.type-of((a:10px, b:20px)); // map
@debug meta.type-of(()); // list
@debug meta.type-of(true); // bool
@debug meta.type-of(green); // color

meta.keywords($args)

@use "sass:meta";

/*可変長のキーワード引数を受け取るミックスインの定義*/
@mixin syntax-colors($args...) {
  /* meta.keywords() の返す値をコンソールへ出力（デバッグ用） */
  @debug meta.keywords($args);
  /* 上記により以下の引数名と値のマップがコンソールへの出力される */
  // (string: #080, comment: #800, variable: #60b)

  @each $name, $color in meta.keywords($args) {
    pre span.stx-#{$name} {
      color: $color;
    }
  }
}

/*ミックスインの呼び出し（引数は $引数名：値 のキーワード形式で指定） */
@include syntax-colors($string: #080, $comment: #800, $variable: #60b);

pre span.stx-string {
  color: #080;
}

pre span.stx-comment {
  color: #800;
}

pre span.stx-variable {
  color: #60b;
}