dart-sassの@importの記載を@useなどに置き換え #61

miwashutaro0611 · 2021-12-22T16:35:50Z

closeするissues

close dart-sassの書き方に合わせる #51

行ったこと

既存のbuildエラーがあったため、修正
webp変換周りでエラーが起きていたため、一旦削除
dart-sassの書き方に合わせて、@importの廃止・@useなどの追加

変更結果について

変更前(@importの記載していた時の結果)

@keyframes blink-red {
  0% {
    outline-color: red
  }
  49.9% {
    outline-color: red
  }
  50% {
    outline-color: transparent
  }
  100% {
    outline-color: transparent
  }
}

@keyframes blink-gold {
  0% {
    outline-color: gold
  }
  49.9% {
    outline-color: gold
  }
  50% {
    outline-color: transparent
  }
  100% {
    outline-color: transparent
  }
}

ul>:not(li), ol>:not(li) {
  content: "<ul>タグ、<ol>タグの直下に入れられるのは<li>タグだけです";
  outline: 2px solid red;
  animation: blink-red 1s infinite
}

dl>:not(dt):not(dd):not(div) {
  content: "<dl>タグ、タグの直下に入れられるのは<dt>,<dd>,および<div>タグだけです";
  outline: 2px solid red;
  animation: blink-red 1s infinite
}

a[name] {
  content: "name属性はHTML5で廃止されました";
  outline: 2px solid red;
  animation: blink-red 1s infinite
}

a[href="javascript:void(0)"] {
  content: "<a>タグは移動するためだけに使用するべきです";
  outline: 2px solid gold;
  animation: blink-gold 1s infinite
}

a[target=_blank]:not([rel="noreferrer noopener"]) {
  content: 'target="_blank"の場合は悪用を防ぐためにもrel="noreferrer noopener"の使用を推奨します';
  outline: 2px solid gold;
  animation: blink-gold 1s infinite
}

img:not([alt]), img[alt=""] {
  display: block;
  outline: 2px solid gold;
  animation: blink-gold 1s infinite
}

img:not([width]), img[width=""], img:not([height]), img[height=""] {
  display: block;
  outline: 2px solid gold;
  animation: blink-gold 1s infinite
}

:root iframe:nth-of-type(4) {
  content: "連続して4つ以上のiframeが設置されています。iframeが複数あるとパフォーマンスに影響を与えます";
  outline: 2px solid gold;
  animation: blink-gold 1s infinite
}

time:not([datetime]), time[datetime=""] {
  content: "datetime属性がない場合、タグ内に妥当な値が入力されていますか？";
  outline: 2px solid gold;
  animation: blink-gold 1s infinite
}

time:not([datetime]) *, time[datetime=""] * {
  content: "datetime属性がない場合、タグ内に子孫要素をもってはいけません";
  outline: 2px solid red;
  animation: blink-red 1s infinite
}

font, center, frame, blink, marquee, *[align], *[color], *[bgcolor], *[border], *[background] {
  content: "古いタグや属性が使用されています。古いタグの使用はやめ、装飾はCSSで行うようにしましょう";
  outline: 2px solid red;
  animation: blink-red 1s infinite
}

hgroup>:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  content: "hgroupタグ内で許可されているのはh1～h6タグです";
  outline: 2px solid red;
  animation: blink-red 1s infinite
}

table>*~caption {
  content: "capptionタグはtableタグの最初の子要素として配置しなくてはなりません";
  outline: 2px solid red;
  animation: blink-red 1s infinite
}

br+br {
  display: none
}

*, *::before, *::after {
  box-sizing: border-box
}

ul, ol {
  padding: 0;
  list-style: none
}

body, h1, h2, h3, h4, p, ul, ol, li, figure, figcaption, blockquote, dl, dd {
  margin: 0
}

body {
  line-height: 1.5;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed
}

a:not([class]) {
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto
}

img {
  display: block;
  max-width: 100%
}

article>*+* {
  margin-top: 1em
}

input, button, textarea, select {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: none;
  background-color: transparent;
  border: none;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none
}

@media(prefers-reduced-motion: reduce) {
  * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important
  }
}

html, body {
  background: #fff;
  background: #fff
}

body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 100%;
  color: #333;
  text-rendering: optimizeLegibility
}

button {
  cursor: pointer
}

a {
  color: inherit;
  text-decoration: none
}

main {
  display: block;
  min-width: 375px;
  height: 200vh
}

[data-whatinput=mouse] *:focus, [data-whatinput=touch] *:focus {
  outline: none
}

.barba-leave-active, .barba-enter-active {
  transition: opacity .4s ease
}

.barba-leave {
  opacity: 1
}

.barba-enter {
  opacity: 0
}

.barba-leave-to {
  opacity: 0
}

.barba-enter-to {
  opacity: 1
}

small {
  color: #ddd
}

.l-header {
  width: calc(100% - 40px);
  margin: 0 auto
}

.l-header__Title {
  color: #333
}

.c-text {
  font-size: 0.9375rem;
  line-height: 1.6666
}

.p-top {
  z-index: 6;
  display: flex;
  width: 66.6666666667%;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  font-size: 0.875rem;
  line-height: 2.8571428571
}

@media screen and (max-width: 1023px) {
  .p-top {
    width: calc(100% - 40px)
  }
}

@media screen and (max-width: 1000px) {
  .p-top {
    font-size: 20px
  }
}

.img-back {
  width: 237px;
  height: 153px;
  background: url("/assets/img/sample.png");
  background-size: cover
}

@media screen and (max-width: 1023px) {
  .u-is-pc {
    display: none !important
  }
}

@media screen and (min-width: 1023px) {
  .u-is-sp {
    display: none !important
  }
}

変更前(@useなどの記載にした時の結果)

@keyframes blink-red {
  0% {
    outline-color: red
  }
  49.9% {
    outline-color: red
  }
  50% {
    outline-color: transparent
  }
  100% {
    outline-color: transparent
  }
}

@keyframes blink-gold {
  0% {
    outline-color: gold
  }
  49.9% {
    outline-color: gold
  }
  50% {
    outline-color: transparent
  }
  100% {
    outline-color: transparent
  }
}

ul>:not(li), ol>:not(li) {
  content: "<ul>タグ、<ol>タグの直下に入れられるのは<li>タグだけです";
  outline: 2px solid red;
  animation: blink-red 1s infinite
}

dl>:not(dt):not(dd):not(div) {
  content: "<dl>タグ、タグの直下に入れられるのは<dt>,<dd>,および<div>タグだけです";
  outline: 2px solid red;
  animation: blink-red 1s infinite
}

a[name] {
  content: "name属性はHTML5で廃止されました";
  outline: 2px solid red;
  animation: blink-red 1s infinite
}

a[href="javascript:void(0)"] {
  content: "<a>タグは移動するためだけに使用するべきです";
  outline: 2px solid gold;
  animation: blink-gold 1s infinite
}

a[target=_blank]:not([rel="noreferrer noopener"]) {
  content: 'target="_blank"の場合は悪用を防ぐためにもrel="noreferrer noopener"の使用を推奨します';
  outline: 2px solid gold;
  animation: blink-gold 1s infinite
}

img:not([alt]), img[alt=""] {
  display: block;
  outline: 2px solid gold;
  animation: blink-gold 1s infinite
}

img:not([width]), img[width=""], img:not([height]), img[height=""] {
  display: block;
  outline: 2px solid gold;
  animation: blink-gold 1s infinite
}

:root iframe:nth-of-type(4) {
  content: "連続して4つ以上のiframeが設置されています。iframeが複数あるとパフォーマンスに影響を与えます";
  outline: 2px solid gold;
  animation: blink-gold 1s infinite
}

time:not([datetime]), time[datetime=""] {
  content: "datetime属性がない場合、タグ内に妥当な値が入力されていますか？";
  outline: 2px solid gold;
  animation: blink-gold 1s infinite
}

time:not([datetime]) *, time[datetime=""] * {
  content: "datetime属性がない場合、タグ内に子孫要素をもってはいけません";
  outline: 2px solid red;
  animation: blink-red 1s infinite
}

font, center, frame, blink, marquee, *[align], *[color], *[bgcolor], *[border], *[background] {
  content: "古いタグや属性が使用されています。古いタグの使用はやめ、装飾はCSSで行うようにしましょう";
  outline: 2px solid red;
  animation: blink-red 1s infinite
}

hgroup>:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  content: "hgroupタグ内で許可されているのはh1～h6タグです";
  outline: 2px solid red;
  animation: blink-red 1s infinite
}

table>*~caption {
  content: "capptionタグはtableタグの最初の子要素として配置しなくてはなりません";
  outline: 2px solid red;
  animation: blink-red 1s infinite
}

br+br {
  display: none
}

*, *::before, *::after {
  box-sizing: border-box
}

ul, ol {
  padding: 0;
  list-style: none
}

body, h1, h2, h3, h4, p, ul, ol, li, figure, figcaption, blockquote, dl, dd {
  margin: 0
}

body {
  line-height: 1.5;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed
}

a:not([class]) {
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto
}

img {
  display: block;
  max-width: 100%
}

article>*+* {
  margin-top: 1em
}

input, button, textarea, select {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: none;
  background-color: transparent;
  border: none;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none
}

@media(prefers-reduced-motion: reduce) {
  * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important
  }
}

html, body {
  background: #fff
}

body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 100%;
  color: #333;
  text-rendering: optimizeLegibility
}

button {
  cursor: pointer
}

a {
  color: inherit;
  text-decoration: none
}

main {
  display: block;
  min-width: 375px;
  height: 200vh
}

[data-whatinput=mouse] *:focus, [data-whatinput=touch] *:focus {
  outline: none
}

.barba-leave-active, .barba-enter-active {
  transition: opacity .4s ease
}

.barba-leave {
  opacity: 1
}

.barba-enter {
  opacity: 0
}

.barba-leave-to {
  opacity: 0
}

.barba-enter-to {
  opacity: 1
}

.l-header {
  width: calc(100% - 40px);
  margin: 0 auto
}

.l-header__Title {
  color: #333
}

small {
  color: #ddd
}

.c-text {
  font-size: 0.9375rem;
  line-height: 1.6666
}

.p-top {
  z-index: 6;
  display: flex;
  width: 66.6666666667%;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  font-size: 0.875rem;
  line-height: 2.8571428571
}

@media screen and (max-width: 1023px) {
  .p-top {
    width: calc(100% - 40px)
  }
}

@media screen and (max-width: 1000px) {
  .p-top {
    font-size: 20px
  }
}

.img-back {
  width: 237px;
  height: 153px;
  background: url("/assets/img/sample.png");
  background-size: cover
}

@media screen and (max-width: 1023px) {
  .u-is-pc {
    display: none !important
  }
}

@media screen and (min-width: 1023px) {
  .u-is-sp {
    display: none !important
  }
}

miwashutaro0611 added 4 commits December 22, 2021 13:27

fix: buildエラーの修正

31d675e

refactor: @importの記載から@useに変更

fff0769

fix: mediaqueryの変数が変換されていなかったため、修正

17c2185

style: debugのscssをコメントアウト

9b67e8c

miwashutaro0611 merged commit 69b26a1 into master Dec 22, 2021

miwashutaro0611 deleted the feature/fix-dart-sass branch December 24, 2021 15:19

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

dart-sassの@importの記載を@useなどに置き換え #61

dart-sassの@importの記載を@useなどに置き換え #61

miwashutaro0611 commented Dec 22, 2021 •

edited

dart-sassの@importの記載を@useなどに置き換え #61

dart-sassの@importの記載を@useなどに置き換え #61

Conversation

miwashutaro0611 commented Dec 22, 2021 • edited

closeするissues

行ったこと

変更結果について

変更前(@importの記載していた時の結果)

変更前(@useなどの記載にした時の結果)

miwashutaro0611 commented Dec 22, 2021 •

edited