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

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

ただいまの
回答率

88.78%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 3,650

ueda_kesuke

score 31

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

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

<div id="root" class="root">
    <div class="container">
        <div class="header">
            <div class="menu">
                        <span class="hamb">
                            <span class="row"></span>
                            <span class="row"></span>
                            <span class="row"></span>
                        </span>
            </div>
            <svg class="curve-background">
                <path class="curve-open"
                      fill="#313131"
                      d="M740,60 L740,0 680,0 C690,50, 690,50 740,60"/>
                <path class="curve-close"
                      fill="#FFD34E"
                      d="M0,405 L0,405 740,405 740,405 C370,440 370,440 740,405"/>
            </svg>
            <div class="search">
                <svg class="search-icon" enable-background="new 0 0 50 50" height="34px"
                     viewBox="0 0 50 50" width="34px">
                    <rect fill="none" height="50" width="50"/>
                    <circle cx="21" cy="20" fill="none" r="15" stroke="#fff" stroke-width="5"/>
                    <line class="search-line" fill="none" stroke="#fff" stroke-width="5" x1="32.229" x2="49.9" y1="32.229" y2="49.9"/>
                </svg>
                <span class="close"></span>
            </div>

        </div>
        <div class="text">
            <h1 class="search-text">search</h1>
            <input type="text" class="search-input"/>
        </div>
        <div class="intro">
            <h1>Click Search Button</h1>
        </div>
        <div class="footer">
            <ul class="list">
                <li class="list-item"></li>
                <li class="list-item"></li>
                <li class="list-item"></li>
                <li class="list-item"></li>
                <li class="list-item"></li>
                <li class="list-item"></li>
                <li class="list-item"></li>
            </ul>
        </div>
    </div>
</div>
$containerWidth = 740px
$containerHeight = 435px
$buttonWidth = 60px
$footerHeight = 30px
@import url(https://fonts.googleapis.com/css?family=Roboto:500,500italic,400,400italic,300,300italic);
@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)
  }
}
*
  box-sizing border-box
html
body
  height 100%
body
  margin 0
  padding 0
  background #FFD34E
  font-family 'Roboto', serif
#root
  display flex
  height inherit
.container
  width $containerWidth
  height $containerHeight
  background #FFD34E
  margin auto
  box-shadow 0 0 20px 5px rgba(0,0,0,.2)
  display flex
  flex-direction column
  justify-content space-between
  position relative
  .curve-background
    overflow hidden
    position absolute
    width $containerWidth
    left 0
    height $containerHeight - $footerHeight
    /.search-open & .curve-close
      opacity 0
    /.search-close & .curve-close
      opacity 1
  .header
    display flex
    justify-content space-between
    .menu
    .search
      width $buttonWidth
      height $buttonWidth
      background #313131
      transition background .5s ease-out 0s
      z-index 50
      position relative
      cursor pointer
      /.search-open &
        background #FFD34E
      /.search-close &
        background #313131
      .close
        opacity 0
        font-size 2.5rem
        color white
        position absolute
        left 15px
        top 0
        /.search-open &
          opacity 1
        /.search-close &
          opacity 0
    .menu
      border-bottom-right-radius 50%
      text-align center
      line-height 70px
      .hamb
        display inline-block
        width 30px
        height 18px
        line-height 0
        .row
          display inherit
          background #fff
          height 4px
          margin-bottom 3px
          width 100%
    .search
      border-bottom-left-radius 50%
      text-align center
      padding 13px 0
      circle
      .search-line
        stroke white
        transition stroke .4s ease-out
      /.search-open & .search-icon
        animation search-open 1s forwards
        circle
        .search-line
          stroke #313131
      /.search-close & .search-icon
          animation search-close .5s forwards
          circle
          .search-line
            stroke white
  .text
    text-align center
    color white
    z-index 10
    font-size 1.3rem
    margin-top -90px
    transition opacity .5s ease-in
    .search-input
      height 40px
      border none
      border-radius 3px
      width 0
      transition all .5s ease-out .4s
      padding 0
      /.search-open &
        width 270px
      /.search-close &
        transition all 0s
        width 0
    .search-text
      transform translate(0, 40px)
      margin 0
      transition all .5s ease-out .4s
      opacity 0
      margin-bottom 10px
      /.search-open &
        opacity 1
        transform translate(0,0)
      /.search-close &
        transition all 0s
        transform translate(0, 40px)
        opacity 0
  .intro
    color white
    text-align center
    position absolute
    top 165px
    width 100%
    transition opacity .3s ease-in
    /.search-open &
      opacity 0
    /.search-close &
      opacity 1
  .footer
    background white
    height $footerHeight
    text-align center
    line-height @height
    .list
      margin 0
      padding 0
      display inline-block
      list-style none
      .list-item
        display inline-block
        width 7px
        height 7px
        border-radius 7px
        margin-right 15px
        background silver
window.requestAnimFrame = (function() {
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function(callback) {
            window.setTimeout(callback, 1000 / 60);
        };
})();
window.onload = ()=>{
    let $search = document.querySelector('.search');
    let $root = document.querySelector('.root');
    let $curveOpen = document.querySelector('.curve-open');
    let $curveClose = document.querySelector('.curve-close');
    let stateOpen = {topPointX:680,
        bottomPointY:60,
        curvePointX:690,
        curvePointY:50};
    let propsOpen = {topPointX:-150,
        bottomPointY:500,
        curvePointX:-150,
        curvePointY:450};
    let stateClose = {
        leftPointY:405,
        rightPointY:405,
        curvePointY:500
    };
    let propsClose = {
        leftPointY:0,
        rightPointY:0,
        curvePointY:0
    };
    let drawClose = ({leftPointY,rightPointY,curvePointY}) =>{
        $curveClose.setAttribute('d',`M0,${leftPointY} L0,405 740,405 740,${rightPointY} C370,${curvePointY} 370,${curvePointY} 0,${leftPointY}`)
    };
    let drawOpen = ({topPointX, bottomPointY, curvePointX, curvePointY})=>{
        $curveOpen.setAttribute('d',`M740,${bottomPointY} L740,0 ${topPointX},0 C${curvePointX},${curvePointY} ${curvePointX},${curvePointY} 740,${bottomPointY}`)
    };
    $search.addEventListener('click',()=>{
        let classes = $root.classList;
        if(classes.contains('search-open') && classes.contains('search-close')){
            classes.remove('search-close');
            animate(300, drawOpen, stateOpen, propsOpen);
        }else if(classes.contains('search-open')){
            classes.add('search-close');
            animate(300, drawClose, stateClose, propsClose);
        }else{
            classes.add('search-open');
            animate(300, drawOpen, stateOpen, propsOpen);
        }
    });
    let animate = (time, draw, state, props) =>{
        let fCount = 1;
        let start = performance.now();
        let framesCount = time/(1000 / 60);
        let keys = Object.keys(props);
        let deltaState = {};
        let stepState = {};
        keys.map((i)=>{
            (state[i] < props[i])?
                deltaState[i] = (props[i] - state[i])
                :deltaState[i] = -(state[i] - props[i])
        });
        let _animate = (timestamp) =>{
            if((timestamp - start) < time){
                keys.map((j)=>{
                    stepState[j] = state[j] + (deltaState[j]*(fCount/framesCount))
                });
                draw(stepState);
                fCount++;
                requestAnimFrame(_animate)
            }else{
                if(fCount <= framesCount){
                    draw(props);
                }
            }
        };
        requestAnimFrame(_animate);
    }
};

試してみたこと

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

自分なりの考察

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

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

$containerWidth: 740px;
$containerHeight: 435px;
$buttonWidth: 60px;
$footerHeight: 30px;

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/06/02 12:27

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

    キャンセル

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

  • ただいまの回答率 88.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る