質問編集履歴
1
不足しているSCSS追加
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
|
```
|