”Invalid CSS after〜”というエラーが出てしまい、scssが適用されないです。

railsアプリを作っているのですが、アニメーションが反映されません。
プレビューをみてみると次のようなエラーが出てしまいます。

Invalid CSS after " $containerWidth ": expected ":", was "= 740px"

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>

scss
1$containerWidth = 740px
2$containerHeight = 435px
3$buttonWidth = 60px
4$footerHeight = 30px
5@import url(https://fonts.googleapis.com/css?family=Roboto:500,500italic,400,400italic,300,300italic);
6@keyframes search-open {
7  50% {
8    transform translate3d(-350px, 187px,0) rotate(180deg)
9  }
10  100% {
11    transform translate3d(-225px, 187px,0) rotate(360deg)
12  }
13}
14@keyframes search-close {
15  0%{
16    transform translate3d(-225px, 187px,0) rotate(0deg)
17  }
18  100%{
19    transform translate3d(0px,0px,0) rotate(360deg)
20  }
21}
22*
23  box-sizing border-box
24html
25body
26  height 100%
27body
28  margin 0
29  padding 0
30  background #FFD34E
31  font-family 'Roboto', serif
32#root
33  display flex
34  height inherit
35.container
36  width $containerWidth
37  height $containerHeight
38  background #FFD34E
39  margin auto
40  box-shadow 0 0 20px 5px rgba(0,0,0,.2)
41  display flex
42  flex-direction column
43  justify-content space-between
44  position relative
45  .curve-background
46    overflow hidden
47    position absolute
48    width $containerWidth
49    left 0
50    height $containerHeight - $footerHeight
51    /.search-open & .curve-close
52      opacity 0
53    /.search-close & .curve-close
54      opacity 1
55  .header
56    display flex
57    justify-content space-between
58    .menu
59    .search
60      width $buttonWidth
61      height $buttonWidth
62      background #313131
63      transition background .5s ease-out 0s
64      z-index 50
65      position relative
66      cursor pointer
67      /.search-open &
68        background #FFD34E
69      /.search-close &
70        background #313131
71      .close
72        opacity 0
73        font-size 2.5rem
74        color white
75        position absolute
76        left 15px
77        top 0
78        /.search-open &
79          opacity 1
80        /.search-close &
81          opacity 0
82    .menu
83      border-bottom-right-radius 50%
84      text-align center
85      line-height 70px
86      .hamb
87        display inline-block
88        width 30px
89        height 18px
90        line-height 0
91        .row
92          display inherit
93          background #fff
94          height 4px
95          margin-bottom 3px
96          width 100%
97    .search
98      border-bottom-left-radius 50%
99      text-align center
100      padding 13px 0
101      circle
102      .search-line
103        stroke white
104        transition stroke .4s ease-out
105      /.search-open & .search-icon
106        animation search-open 1s forwards
107        circle
108        .search-line
109          stroke #313131
110      /.search-close & .search-icon
111          animation search-close .5s forwards
112          circle
113          .search-line
114            stroke white
115  .text
116    text-align center
117    color white
118    z-index 10
119    font-size 1.3rem
120    margin-top -90px
121    transition opacity .5s ease-in
122    .search-input
123      height 40px
124      border none
125      border-radius 3px
126      width 0
127      transition all .5s ease-out .4s
128      padding 0
129      /.search-open &
130        width 270px
131      /.search-close &
132        transition all 0s
133        width 0
134    .search-text
135      transform translate(0, 40px)
136      margin 0
137      transition all .5s ease-out .4s
138      opacity 0
139      margin-bottom 10px
140      /.search-open &
141        opacity 1
142        transform translate(0,0)
143      /.search-close &
144        transition all 0s
145        transform translate(0, 40px)
146        opacity 0
147  .intro
148    color white
149    text-align center
150    position absolute
151    top 165px
152    width 100%
153    transition opacity .3s ease-in
154    /.search-open &
155      opacity 0
156    /.search-close &
157      opacity 1
158  .footer
159    background white
160    height $footerHeight
161    text-align center
162    line-height @height
163    .list
164      margin 0
165      padding 0
166      display inline-block
167      list-style none
168      .list-item
169        display inline-block
170        width 7px
171        height 7px
172        border-radius 7px
173        margin-right 15px
174        background silver
175
176
177
178

js
1window.requestAnimFrame = (function() {
2    return window.requestAnimationFrame ||
3        window.webkitRequestAnimationFrame ||
4        window.mozRequestAnimationFrame ||
5        window.oRequestAnimationFrame ||
6        window.msRequestAnimationFrame ||
7        function(callback) {
8            window.setTimeout(callback, 1000 / 60);
9        };
10})();
11window.onload = ()=>{
12    let $search = document.querySelector('.search');
13    let $root = document.querySelector('.root');
14    let $curveOpen = document.querySelector('.curve-open');
15    let $curveClose = document.querySelector('.curve-close');
16    let stateOpen = {topPointX:680,
17        bottomPointY:60,
18        curvePointX:690,
19        curvePointY:50};
20    let propsOpen = {topPointX:-150,
21        bottomPointY:500,
22        curvePointX:-150,
23        curvePointY:450};
24    let stateClose = {
25        leftPointY:405,
26        rightPointY:405,
27        curvePointY:500
28    };
29    let propsClose = {
30        leftPointY:0,
31        rightPointY:0,
32        curvePointY:0
33    };
34    let drawClose = ({leftPointY,rightPointY,curvePointY}) =>{
35        $curveClose.setAttribute('d',`M0,${leftPointY} L0,405 740,405 740,${rightPointY} C370,${curvePointY} 370,${curvePointY} 0,${leftPointY}`)
36    };
37    let drawOpen = ({topPointX, bottomPointY, curvePointX, curvePointY})=>{
38        $curveOpen.setAttribute('d',`M740,${bottomPointY} L740,0 ${topPointX},0 C${curvePointX},${curvePointY} ${curvePointX},${curvePointY} 740,${bottomPointY}`)
39    };
40    $search.addEventListener('click',()=>{
41        let classes = $root.classList;
42        if(classes.contains('search-open') && classes.contains('search-close')){
43            classes.remove('search-close');
44            animate(300, drawOpen, stateOpen, propsOpen);
45        }else if(classes.contains('search-open')){
46            classes.add('search-close');
47            animate(300, drawClose, stateClose, propsClose);
48        }else{
49            classes.add('search-open');
50            animate(300, drawOpen, stateOpen, propsOpen);
51        }
52    });
53    let animate = (time, draw, state, props) =>{
54        let fCount = 1;
55        let start = performance.now();
56        let framesCount = time/(1000 / 60);
57        let keys = Object.keys(props);
58        let deltaState = {};
59        let stepState = {};
60        keys.map((i)=>{
61            (state[i] < props[i])?
62                deltaState[i] = (props[i] - state[i])
63                :deltaState[i] = -(state[i] - props[i])
64        });
65        let _animate = (timestamp) =>{
66            if((timestamp - start) < time){
67                keys.map((j)=>{
68                    stepState[j] = state[j] + (deltaState[j]*(fCount/framesCount))
69                });
70                draw(stepState);
71                fCount++;
72                requestAnimFrame(_animate)
73            }else{
74                if(fCount <= framesCount){
75                    draw(props);
76                }
77            }
78        };
79        requestAnimFrame(_animate);
80    }
81};
82

試してみたこと

エラーが出ている文章をコメントアウトしてみた
bundle updateをしてみた

自分なりの考察

単純に今では使われていない書き方なのかな？
ググってみたのですが、答えが得られなかったので質問させていただきました。ご教授いただけたら幸いです????‍♂️

足りない情報などありましたらおっしゃってください！

行動規範の内容に同意します

回答1件

ベストアンサー

SCSSでの変数の設定は=ではなく:です。

scss
1$containerWidth: 740px;
2$containerHeight: 435px;
3$buttonWidth: 60px;
4$footerHeight: 30px;

エラーを意訳すると" $containerWidth "の後ろに無効なCSSがある、":"が来るべきところに"= 740px"が来ているです。
英語がんばってください！

投稿2019/06/02 02:51

HAC

総合スコア118

ueda_kesuke

2019/06/02 03:27

おおお！！ありがとうございます！語訳もありがたいです。英語ですね..頑張ります！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！