teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

不足しているSCSS追加

2021/07/20 10:42

投稿

pecchan
pecchan

スコア592

title CHANGED
File without changes
body CHANGED
@@ -433,4 +433,73 @@
433
433
  /*_top.scss end*/
434
434
 
435
435
 
436
+ ```
437
+
438
+
439
+ #### 不足しているscss追記
440
+ _mixin.scss
441
+ ```css
442
+ @mixin screen($breakpoint: tablet){
443
+ @media #{map-get($breakpoints, $breakpoint)}{
444
+ @content;
445
+ }
446
+ }
447
+
448
+ @mixin space {
449
+ margin: auto;
450
+ max-width: $container-max-width;
451
+
452
+ }
453
+
454
+ ```
455
+
456
+ _config.scss
457
+
458
+ ```css
459
+ $main-max-width: 1024px;
460
+ $container-max-width: 1020px;
461
+
462
+
463
+ $breakpoints: (
464
+ 'sp': 'screen and (max-width: 767px)', /* 0〜767 スマフォ */
465
+ 'tablet': 'screen and (min-width: 768px) and (max-width: 959px)', /* 768以上に適用(タブレットサイズ) */
466
+ 'pc': 'screen and (min-width: 960px)', /* 960以上に適用(PCサイズ以上) */
467
+ ) !default;
468
+
469
+ $baseFontSize: 62.5%;
470
+ $fontSize12: 1.2rem;
471
+ $fontSize14: 1.4rem;
472
+ $fontSize16: 1.6rem;
473
+ $fontSize18: 1.8rem;
474
+ $fontSize20: 2.0rem;
475
+ $fontSize22: 2.2rem;
476
+ $fontSize24: 2.4rem;
477
+ $fontSize26: 2.6rem;
478
+ $fontSize28: 2.8rem;
479
+ $fontSize30: 3.0rem;
480
+ $fontSize32: 3.2rem;
481
+ $fontSize34: 3.4rem;
482
+ $fontSize36: 3.6rem;
483
+ $baseFont: Source Sans Pro, Helvetica, Arial, 游ゴシック体, YuGothic, メイリオ, Meiryo, sans-serif;
484
+ $enFont: "Open Sans", sans-serif;
485
+ $baseLineHeight: 2.0;
486
+
487
+ $mainColor1: #f47b20;
488
+ $mainColor2: #f48620;
489
+ $mainColor3: #f49420;
490
+ $mainColor4: #e25c00;
491
+ $baseColor1: #a7a7a8;
492
+ $baseColor2: #b9b9ba;
493
+ $baseColor3: #e7e7e7;
494
+ $accentColor1: #03be2c;
495
+ $accentColor2: #03cf2c;
496
+ $accentColor3: #03ea2c;
497
+ $accentColor4: #00BB00;
498
+ $primaryColor: #205df4;
499
+ $secondaryColor: #33bbff;
500
+ $successColor: #f457d4;
501
+ $dangerColor: red;
502
+ $warningColor: #cc8800;
503
+ $infoColor: skyblue;
504
+
436
505
  ```