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

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

新規登録して質問してみよう
ただいま回答率
85.35%
Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

647閲覧

#1CSSをSassに置き換えたい

pay_561

総合スコア26

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/11/08 05:51

編集2021/11/08 08:53

困っていること

.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); }

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2021/11/08 06:14

そのままではダメなのですか?
pay_561

2021/11/08 07:44 編集

コメントありがとうございます。 そののままではダメでした。
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); } のように書いていませんか?
guest

回答2

0

ベストアンサー

ネストの外に書くか、

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

総合スコア36960

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pay_561

2021/11/08 08:51

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

2021/11/08 08:55

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

0

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

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}

ただし、これは、Sass以前にCSSの基本記法を理解していれば、
すぐに導ける部分なので、
.right-to-left.activeと、.で繋げることによって、複数クラスがついている時というセレクタにできる)
まず、CSSの基本や、応用を、もっと勉強されるとよいかと。

質問の追記に際しまして、実装したい内容が明確になりましたので、追記です。

Sassにおいては、&参照により、親が○○の時の実装が可能になります。
そのようにソースコードを修正しましたので、ご確認ください。

投稿2021/11/08 06:52

編集2021/11/08 08:16
miyabi_takatsuk

総合スコア9555

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pay_561

2021/11/08 07:51

コメントありがとうございます。 投稿者さん示してくださったように記述しましたがうまく活きませんでした。 修正しましたのでご教授いただけましたら幸いです。
miyabi_takatsuk

2021/11/08 08:16

質問修正で、実装したい内容が明確になりましたので、 回答の修正をしました。
pay_561

2021/11/08 08:51

miyabi_takatsukさんもご教授いただきありがとうございました。 もう少しCSSの基礎から勉強し直したいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問