Q&A
ベストアンサー
ありがとうございます。勉強します。エラー個所もしれてありがたいです????♂️
Invalid CSS after "... rotate(180deg)": expected "{", was "}"
というエラーが出てしまいます。
html
1<div id="root" class="root"> 2 <div class="container"> 3 <div class="header"> 4 <div class="menu"> 5 <span class="hamb"> 6 <span class="row"></span> 7 <span class="row"></span> 8 <span class="row"></span> 9 </span> 10 </div> 11 <svg class="curve-background"> 12 <path class="curve-open" 13 fill="#313131" 14 d="M740,60 L740,0 680,0 C690,50, 690,50 740,60"/> 15 <path class="curve-close" 16 fill="#FFD34E" 17 d="M0,405 L0,405 740,405 740,405 C370,440 370,440 740,405"/> 18 </svg> 19 <div class="search"> 20 <svg class="search-icon" enable-background="new 0 0 50 50" height="34px" 21 viewBox="0 0 50 50" width="34px"> 22 <rect fill="none" height="50" width="50"/> 23 <circle cx="21" cy="20" fill="none" r="15" stroke="#fff" stroke-width="5"/> 24 <line class="search-line" fill="none" stroke="#fff" stroke-width="5" x1="32.229" x2="49.9" y1="32.229" y2="49.9"/> 25 </svg> 26 <span class="close">✖</span> 27 </div> 28 29 </div> 30 <div class="text"> 31 <h1 class="search-text">search</h1> 32 <input type="text" class="search-input"/> 33 </div> 34 <div class="intro"> 35 <h1>Click Search Button</h1> 36 </div> 37 <div class="footer"> 38 <ul class="list"> 39 <li class="list-item"></li> 40 <li class="list-item"></li> 41 <li class="list-item"></li> 42 <li class="list-item"></li> 43 <li class="list-item"></li> 44 <li class="list-item"></li> 45 <li class="list-item"></li> 46 </ul> 47 </div> 48 </div> 49</div>
CSS
1/* 2 * This is a manifest file that'll be compiled into application.css, which will include all the files 3 * listed below. 4 * 5 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, 6 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path. 7 * 8 * You're free to add application-wide styles to this file and they'll appear at the bottom of the 9 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS 10 * files in this directory. Styles in this file should be added after the last require_* statement. 11 * It is generally better to create a new file per style scope. 12 * 13 *= require_tree . 14 *= require_self 15 */ 16 17$containerWidth : 740px; 18$containerHeight : 435px; 19$buttonWidth : 60px; 20$footerHeight : 30px; 21@import url(https://fonts.googleapis.com/css?family=Roboto:500,500italic,400,400italic,300,300italic); 22@keyframes search-open { 23 50% { 24 transform translate3d(-350px, 187px,0) rotate(180deg) 25 } 26 100% { 27 transform translate3d(-225px, 187px,0) rotate(360deg) 28 } 29} 30@keyframes search-close { 31 0%{ 32 transform translate3d(-225px, 187px,0) rotate(0deg) 33 } 34 100%{ 35 transform translate3d(0px,0px,0) rotate(360deg) 36 } 37} 38* 39 box-sizing border-box 40html 41body 42 height 100% 43body 44 margin 0 45 padding 0 46 background #FFD34E 47 font-family 'Roboto', serif 48#root 49 display flex 50 height inherit 51.container 52 width $containerWidth 53 height $containerHeight 54 background #FFD34E 55 margin auto 56 box-shadow 0 0 20px 5px rgba(0,0,0,.2) 57 display flex 58 flex-direction column 59 justify-content space-between 60 position relative 61 .curve-background 62 overflow hidden 63 position absolute 64 width $containerWidth 65 left 0 66 height $containerHeight - $footerHeight 67 /.search-open & .curve-close 68 opacity 0 69 /.search-close & .curve-close 70 opacity 1 71 .header 72 display flex 73 justify-content space-between 74 .menu 75 .search 76 width $buttonWidth 77 height $buttonWidth 78 background #313131 79 transition background .5s ease-out 0s 80 z-index 50 81 position relative 82 cursor pointer 83 /.search-open & 84 background #FFD34E 85 /.search-close & 86 background #313131 87 .close 88 opacity 0 89 font-size 2.5rem 90 color white 91 position absolute 92 left 15px 93 top 0 94 /.search-open & 95 opacity 1 96 /.search-close & 97 opacity 0 98 .menu 99 border-bottom-right-radius 50% 100 text-align center 101 line-height 70px 102 .hamb 103 display inline-block 104 width 30px 105 height 18px 106 line-height 0 107 .row 108 display inherit 109 background #fff 110 height 4px 111 margin-bottom 3px 112 width 100% 113 .search 114 border-bottom-left-radius 50% 115 text-align center 116 padding 13px 0 117 circle 118 .search-line 119 stroke white 120 transition stroke .4s ease-out 121 /.search-open & .search-icon 122 animation search-open 1s forwards 123 circle 124 .search-line 125 stroke #313131 126 /.search-close & .search-icon 127 animation search-close .5s forwards 128 circle 129 .search-line 130 stroke white 131 .text 132 text-align center 133 color white 134 z-index 10 135 font-size 1.3rem 136 margin-top -90px 137 transition opacity .5s ease-in 138 .search-input 139 height 40px 140 border none 141 border-radius 3px 142 width 0 143 transition all .5s ease-out .4s 144 padding 0 145 /.search-open & 146 width 270px 147 /.search-close & 148 transition all 0s 149 width 0 150 .search-text 151 transform translate(0, 40px) 152 margin 0 153 transition all .5s ease-out .4s 154 opacity 0 155 margin-bottom 10px 156 /.search-open & 157 opacity 1 158 transform translate(0,0) 159 /.search-close & 160 transition all 0s 161 transform translate(0, 40px) 162 opacity 0 163 .intro 164 color white 165 text-align center 166 position absolute 167 top 165px 168 width 100% 169 transition opacity .3s ease-in 170 /.search-open & 171 opacity 0 172 /.search-close & 173 opacity 1 174 .footer 175 background white 176 height $footerHeight 177 text-align center 178 line-height @height 179 .list 180 margin 0 181 padding 0 182 display inline-block 183 list-style none 184 .list-item 185 display inline-block 186 width 7px 187 height 7px 188 border-radius 7px 189 margin-right 15px 190 background silver 191 192 193 194
試してみたこと
エラー文にそって、一つずつ"{"を"}"にしたりと入力していきましたが、キリがなくなってしまいました。
エラー文の部分はあっていると思うのですが、、そうなった場合どこをチェックすれば良いのかご教授いただきたいです????♂️
足りてない情報があったらおっしゃてください！
回答2件
0
あなたが記述しているコードはSCSSではなくstylusです。
(stylusとして見ても記述がおかしいですが)
http://stylus-lang.com/
SCSSの学習をオススメします。
https://dev.classmethod.jp/slide/scss-tutorial/
投稿2019/06/02 13:34
総合スコア2937
キーフレームにも間違いがありました。。。ので、下記どちらかの方法で確認すると期待する答えに早くたどりつくかもしれません。
①利用しているエディタのSCSS拡張機能を利用する
→都度、チェックしてくれるので便利です。
②SCSSなどのコンパイルサービスを利用する
→調べると下記のようなサービスがありました。
http://sass.prinum.net/
キーフレームの修正版です。
規則に従って :（コロン）や ;（セミコロン）が追加されています。
@keyframes search-open {
50% {
transform: translate3d(-350px, 187px,0), rotate(180deg);
}
100% {
transform: translate3d(-225px, 187px,0) rotate(360deg);
}
}
@keyframes search-close {
0%{
transform: translate3d(-225px, 187px,0) rotate(0deg);
}
100%{
transform: translate3d(0px,0px,0) rotate(360deg);
}
}
これ以降もそれぞれ修正をお願いします。
助かりました！！ありがとうございます！とてもわかりやすかったです
それは良かったです！
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/06/03 00:11