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

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

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

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Sass

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

CSS

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

Q&A

解決済

1回答

1584閲覧

Sass×BEM記法において、BlockにtoggleClass処理で.activeを追加した際のElementの記述について

退会済みユーザー

退会済みユーザー

総合スコア0

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Sass

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

CSS

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

0グッド

0クリップ

投稿2019/08/13 16:49

タイトルがわかりづらくなってしまい申し訳ございません。
言葉で表現するよりも実際にコードを見ていただいたほうが分かりやすいと思いますので、お手すきの際にご確認いただけないでしょうか。

Sassでコメントアウトしている「// 以下の処理も上の「.hamburger-icon {}」の中に収めてしまいたいのですが…。」という文章の下部分をなんとか.hamburger-icon{}の中に収めたいのですが…。

よろしくお願いいたします。

html

1<div class="hamburger-icon"> 2 <span class="hamburger-icon__bar"></span> 3 <span class="hamburger-icon__bar"></span> 4 <span class="hamburger-icon__bar"></span> 5</div>

javascript

1$(function(){ 2 $('.hamburger-icon').click(function(){ 3 $(this).toggleClass('active'); 4 }); 5});

scss

1.hamburger-icon { 2 height: 100%; 3 width: 100px; 4 position: relative; 5 display: block; 6 &__bar { 7 height: 2px; 8 width: 50px; 9 margin-left: -25px; // 中央揃え用ネガティブマージン 10 background: $text_color_2; 11 position: absolute; 12 top: 50%; 13 left: 50%; 14 display: block; 15 transition: all 0.3s; 16 &:nth-of-type(1) { 17 transform: translateY(-17px); 18 } 19 &:nth-of-type(2) { 20 transform: translateX(0px); 21 } 22 &:nth-of-type(3) { 23 transform: translateY(17px); 24 } 25 } 26} 27// 以下の処理も上の「.hamburger-icon {}」の中に収めてしまいたいのですが…。 28.hamburger-icon.active { 29 .hamburger-icon__bar { 30 &:nth-of-type(1) { 31 transform: rotate(-45deg) translateY(0px); 32 } 33 &:nth-of-type(2) { 34 transform: translateX(100px); 35 background: rgba(255, 255, 255, 0); 36 } 37 &:nth-of-type(3) { 38 transform: rotate(45deg) translateY(0px); 39 } 40 } 41}

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

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

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

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

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

guest

回答1

0

ベストアンサー

.hamburger-icon.active&.activeに変更してカッコ内に移動してみてはいかがでしょうか

投稿2019/08/14 05:33

編集2019/08/14 05:49
okne

総合スコア217

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

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

退会済みユーザー

退会済みユーザー

2019/08/14 07:01

回答ありがとうございます。わかりづらい質問で申し訳ございません。 実際に.hamburger-icon{}の中に&.activeとして移動してしまうのが手っ取り早いですね。 そうしますとやはり直下の.hamburger-icon__bar{}は&を使わず、現在のように直接指定しなければならないのでしょうか?
退会済みユーザー

退会済みユーザー

2019/08/14 09:20

参考になる記事までご提示いただきありがたい限りです。 大変助かりました、ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問