質問編集履歴
1
不足しているSCSS追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -869,3 +869,141 @@
|
|
|
869
869
|
|
|
870
870
|
|
|
871
871
|
```
|
|
872
|
+
|
|
873
|
+
|
|
874
|
+
|
|
875
|
+
|
|
876
|
+
|
|
877
|
+
#### 不足しているscss追記
|
|
878
|
+
|
|
879
|
+
_mixin.scss
|
|
880
|
+
|
|
881
|
+
```css
|
|
882
|
+
|
|
883
|
+
@mixin screen($breakpoint: tablet){
|
|
884
|
+
|
|
885
|
+
@media #{map-get($breakpoints, $breakpoint)}{
|
|
886
|
+
|
|
887
|
+
@content;
|
|
888
|
+
|
|
889
|
+
}
|
|
890
|
+
|
|
891
|
+
}
|
|
892
|
+
|
|
893
|
+
|
|
894
|
+
|
|
895
|
+
@mixin space {
|
|
896
|
+
|
|
897
|
+
margin: auto;
|
|
898
|
+
|
|
899
|
+
max-width: $container-max-width;
|
|
900
|
+
|
|
901
|
+
|
|
902
|
+
|
|
903
|
+
}
|
|
904
|
+
|
|
905
|
+
|
|
906
|
+
|
|
907
|
+
```
|
|
908
|
+
|
|
909
|
+
|
|
910
|
+
|
|
911
|
+
_config.scss
|
|
912
|
+
|
|
913
|
+
|
|
914
|
+
|
|
915
|
+
```css
|
|
916
|
+
|
|
917
|
+
$main-max-width: 1024px;
|
|
918
|
+
|
|
919
|
+
$container-max-width: 1020px;
|
|
920
|
+
|
|
921
|
+
|
|
922
|
+
|
|
923
|
+
|
|
924
|
+
|
|
925
|
+
$breakpoints: (
|
|
926
|
+
|
|
927
|
+
'sp': 'screen and (max-width: 767px)', /* 0〜767 スマフォ */
|
|
928
|
+
|
|
929
|
+
'tablet': 'screen and (min-width: 768px) and (max-width: 959px)', /* 768以上に適用（タブレットサイズ） */
|
|
930
|
+
|
|
931
|
+
'pc': 'screen and (min-width: 960px)', /* 960以上に適用（PCサイズ以上） */
|
|
932
|
+
|
|
933
|
+
) !default;
|
|
934
|
+
|
|
935
|
+
|
|
936
|
+
|
|
937
|
+
$baseFontSize: 62.5%;
|
|
938
|
+
|
|
939
|
+
$fontSize12: 1.2rem;
|
|
940
|
+
|
|
941
|
+
$fontSize14: 1.4rem;
|
|
942
|
+
|
|
943
|
+
$fontSize16: 1.6rem;
|
|
944
|
+
|
|
945
|
+
$fontSize18: 1.8rem;
|
|
946
|
+
|
|
947
|
+
$fontSize20: 2.0rem;
|
|
948
|
+
|
|
949
|
+
$fontSize22: 2.2rem;
|
|
950
|
+
|
|
951
|
+
$fontSize24: 2.4rem;
|
|
952
|
+
|
|
953
|
+
$fontSize26: 2.6rem;
|
|
954
|
+
|
|
955
|
+
$fontSize28: 2.8rem;
|
|
956
|
+
|
|
957
|
+
$fontSize30: 3.0rem;
|
|
958
|
+
|
|
959
|
+
$fontSize32: 3.2rem;
|
|
960
|
+
|
|
961
|
+
$fontSize34: 3.4rem;
|
|
962
|
+
|
|
963
|
+
$fontSize36: 3.6rem;
|
|
964
|
+
|
|
965
|
+
$baseFont: Source Sans Pro, Helvetica, Arial, 游ゴシック体, YuGothic, メイリオ, Meiryo, sans-serif;
|
|
966
|
+
|
|
967
|
+
$enFont: "Open Sans", sans-serif;
|
|
968
|
+
|
|
969
|
+
$baseLineHeight: 2.0;
|
|
970
|
+
|
|
971
|
+
|
|
972
|
+
|
|
973
|
+
$mainColor1: #f47b20;
|
|
974
|
+
|
|
975
|
+
$mainColor2: #f48620;
|
|
976
|
+
|
|
977
|
+
$mainColor3: #f49420;
|
|
978
|
+
|
|
979
|
+
$mainColor4: #e25c00;
|
|
980
|
+
|
|
981
|
+
$baseColor1: #a7a7a8;
|
|
982
|
+
|
|
983
|
+
$baseColor2: #b9b9ba;
|
|
984
|
+
|
|
985
|
+
$baseColor3: #e7e7e7;
|
|
986
|
+
|
|
987
|
+
$accentColor1: #03be2c;
|
|
988
|
+
|
|
989
|
+
$accentColor2: #03cf2c;
|
|
990
|
+
|
|
991
|
+
$accentColor3: #03ea2c;
|
|
992
|
+
|
|
993
|
+
$accentColor4: #00BB00;
|
|
994
|
+
|
|
995
|
+
$primaryColor: #205df4;
|
|
996
|
+
|
|
997
|
+
$secondaryColor: #33bbff;
|
|
998
|
+
|
|
999
|
+
$successColor: #f457d4;
|
|
1000
|
+
|
|
1001
|
+
$dangerColor: red;
|
|
1002
|
+
|
|
1003
|
+
$warningColor: #cc8800;
|
|
1004
|
+
|
|
1005
|
+
$infoColor: skyblue;
|
|
1006
|
+
|
|
1007
|
+
|
|
1008
|
+
|
|
1009
|
+
```
|