困っていること

.right-to-left {
  transition: 1s;
  transform: translateX(100%);
}

.active .right-to-left {
  transform: translateX(0);
}

上記のコードをSassに書き換えたいのですがわかりません

詳細

ボタンを押下した時にdivタグにactiveというクラス名を付けるのをJavaScriptで実装しました。

ボタンを押下され.activeが付いた際に.right-to-leftのtransform: translateX(100%);を
transform: translateX(0);に変更したいのですがやりかたがわかりません

ご教授いただけたら幸いです。

コード

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="index.css" />
    <title>Sports Shoes</title>
  </head>
  <body>
    <!-- MAIN -->
    <div id="slider" class="slider">

      <!-- SLIDE 1 -->
      <div class="row fullheight slide">
        <div class="col-6 fullheight left">
          <!-- PRODUCT INFO -->
          <div class="product-info">
            <div class="info-wrapper">
              <div class="product-price left-to-right">
                2,600<span>円</span>
              </div>
              <div class="product-name left-to-right">
                <h2>Nike ZoomX</h2>
              </div>
              <div class="product-size left-to-right">
                <h3>サイズ</h3>
                <div class="size-wrapper">
                  <div>35</div>
                  <div>36</div>
                  <div class="active">37</div>
                  <div>38</div>
                  <div>39</div>
                  <div>40</div>
                </div>
              </div>
              <div class="product-color left-to-right">
                <h3>カラー</h3>
                <div class="color-wrapper">
                  <div class="color-pallet active">
                    <div class="color bg-red"></div>
                  </div>
                  <div class="color-pallet">
                    <div class="color bg-blue"></div>
                  </div>
                  <div class="color-pallet">
                    <div class="color bg-white"></div>
                  </div>
                </div>
              </div>
              <div class="product-description left-to-right">
                <p>
                  オフロードランで活躍するシューズ。ナイキ ペガサス トレイル
                  3は、先行モデルの快適な履き心地を継承。クラシックなペガサスのスタイルに敬意を表したデザインです。Nike
                  Reactフォームが優れた反発性とクッション性を発揮し、強力なトラクションがごつごつした地形での動きをサポートします。足中央部のサポート性を強化して、トレイルでも安定した履き心地を提供します。
                </p>
              </div>
              <div class="button left-to-right">
                <button>カートに追加</button>
              </div>
            </div>
          </div>
          <!-- END PRODUCT INFO -->
        </div>
        <!-- SLIDE 1 -->
        <div
          class="col-6 fullheight right img-col"
          style="
            background-image: linear-gradient(to top right, #822139, #c6a655);
          "
        >
          <!-- PRODUCT IMAGE -->
          <div class="product-img">
            <div class="img-wrapper right-to-left">
              <div class="bounce">
                <img src="assets/shoes_1.png" alt="" />
              </div>
            </div>
          </div>
          <!-- END PRODUCT IMAGE -->
          <!-- PRODUCT MORE IMAGES -->
          <div class="more-images">
            <div class="more-images-item bottom-up">
              <img src="assets/shoes-more-1_1.jpg" alt="" />
            </div>
            <div class="more-images-item bottom-up">
              省略
            </div>
          　　　　<div class="more-images-item bottom-up">
              省略
            </div>
         　　　　　　<div class="more-images-item bottom-up">
              省略
            </div>
          </div>
          <!-- END PRODUCT MORE IMAGES -->
        </div>
        <!-- END SLID -->
      </div>
      <!-- END SLIDE 1-->

      <!-- SLIDE 2-->
         省略
      <!-- END SLIDE 2-->

      <!-- SLIDE 3-->
         省略
      <!-- END SLIDE 3-->

      <!-- SLIDE 4 -->
         省略
      <!-- END SLIDE  -->


      <!-- SLIDE CONTROL -->
      <div id="slide-control" class="slide-control">
        <div class="slide-control-item">
          <img src="./assets/shoes_1.png" alt="" />
        </div>
        <div class="slide-control-item">
          <img src="./assets/shoes_2.png" alt="" />
        </div>
        <div class="slide-control-item">
          <img src="./assets/shoes_3.png" alt="" />
        </div>
        <div class="slide-control-item">
          <img src="./assets/shoes_4.png" alt="" />
        </div>
      </div>
      <!-- END SLIDE CONTROL -->
    </div>
    <!-- END MAIN -->

    <script type="text/javascript" src="index.js"></script>
  </body>
</html>

index.js

let slideIndex = 0;

let slider = document.getElementById("slider");

let slides = slider.getElementsByClassName("slide");

let slideControl = document.getElementById("slide-control");

let slideControlItems =
  slideControl.getElementsByClassName("slide-control-item");

slider.style.marginTop = "-" + slideIndex + "00vh";
setTimeout(() => {
  slideControlItems[slideIndex].classList.add("active");
  slides[slideIndex].classList.add("active");
}, 500);

chooseProduct = (index) => {
  if (index === slideIndex) return;

  slideIndex = index;

  let currSlideControl = slideControl.querySelector(
    ".slide-control-item.active"
  );
  currSlideControl.classList.remove("active");

  let currSlide = slider.querySelector(".slide.active");
  currSlide.classList.remove("active");

  slider.style.marginTop = "-" + slideIndex + "00vh";
  slideControlItems[slideIndex].classList.add("active");
  slides[slideIndex].classList.add("active");
};

Array.from(slideControlItems).forEach((e, index) => {
  e.onclick = function () {
    chooseProduct(index);
  };
});



# Cssで実装したときの状態
![イメージ説明](7e8c11750987b525052eb454f0b2063c.png)

#  コンパイル後のコード
```ここに言語を入力
          * html .slider .row .right .product-img .img-wrapper .active .right-to-left,
          * body .slider .row .right .product-img .img-wrapper .active .right-to-left {
            transform: translateX(0); }
          * html .slider .row .right .product-img .img-wrapper.right-to-left,
          * body .slider .row .right .product-img .img-wrapper.right-to-left {
            transition: 1s;
            transform: translateX(100%); }
          * html .slider .row .right .product-img .active .right-to-left,
          * body .slider .row .right .product-img .active .right-to-left {
            transform: translateX(0); }

Lhankor_Mhy

2021/11/08 06:14

そのままではダメなのですか？

pay_561

2021/11/08 07:44 編集

コメントありがとうございます。そののままではダメでした。

Lhankor_Mhy

2021/11/08 07:45

何がダメでしたか？

pay_561

2021/11/08 07:48

コメントありがとうございます。ごめんさい言葉が足りてませんでした。そのまま .active .right-to-left { transform: translateX(0); } としてもダメでした

Lhankor_Mhy

2021/11/08 07:49

こちらこそ言葉が足りなかったようです。 Sass にそのような記述をした時に、「ダメ」とは具体的には何が起きましたか？

pay_561

2021/11/08 08:02

なにも変化しませんでした。

Lhankor_Mhy

2021/11/08 08:04

ということは、コンパイルはできたということですね。コンパイル後のコードを該当する部分だけでいいのでご提示いただけますか？

Lhankor_Mhy

2021/11/08 08:08

ご提示のコードを試してみましたが、そのままでダメということはなさそうでした。

Lhankor_Mhy

2021/11/08 08:20

質問の編集を拝読。これは、 .product-img { .right-to-left { transition: 1s; transform: translateX(100%); } .active .right-to-left { transform: translateX(0); } のように書いていませんか？

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

回答2件

ベストアンサー

ネストの外に書くか、

css
1                    }
2                }
3            }
4        }
5    }
6}
7.right-to-left {
8    transition: 1s;
9    transform: translateX(100%);
10}
11
12.active .right-to-left {
13    transform: translateX(0);
14}

.row直下に書くか、

css
1            .row {
2                .right-to-left {
3                    transition: 1s;
4                    transform: translateX(100%);
5                }
6
7                &.active .right-to-left {
8                    transform: translateX(0);
9                }

@at-root を使うか、あたりでしょうか。

css
1                    .product-img {
2                        @at-root {
3                            .right-to-left {
4                                transition: 1s;
5                                transform: translateX(100%);
6                            }
7
8                            .active .right-to-left {
9                                transform: translateX(0);
10                            }
11                        }

投稿2021/11/08 08:29

Lhankor_Mhy

総合スコア36163

pay_561

2021/11/08 08:51

ありがとうございました!! 無事解決しました。

Lhankor_Mhy

2021/11/08 08:55

お役に立てたようで何よりです

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

&にて、親を参照することができますので、うまく使うとできます。

scss
1.right-to-left {
2  transition: 1s;
3  transform: translateX(100%);
4  .active & {
5    // 親に.activeが付いた時の自身（.right-to-left）に対するスタイル
6    transform: translateX(0);
7  }
8}