TechGekkaスマートフォン用の表示で見るTechGekkaこの広告は、90日以上更新していないブログに表示しています。プログラミング月花です。今日はSASSの備忘録的なTipsです。アンド)によって親セレクタを参照することができます。親にすることもできます。継承し、フォークしたくなったらどうすればよいでしょうか。}}こういうSASSがあります。class="article-text">xxxxxxxxx</div></div>こういうHTMLができました。}}という問題が発生しました。いうような書き方では、ネスト上では親でもコンパイル後には兄弟になってしまうのです。}}これと等価なので、一見子に見えても実は兄弟を指定しているためです。Tipsなのでさくさくいきましょう。書くことで、文字列として展開することができる。親を変数に収めて、あとは書き足すだけ。ちなみに、変数にドットを含めず、ドットを前に出すこともできる。プログラミング月花です。いろんなJavaScriptなりjQueryなりのライブラリを入れていると困るのが、ライブラリの動作にコールバックやフックがないことですよね。なにか要素が追加されるとき、その追加された要素にCSSを適用したいがクラスもなければIDもない、さらにコールバックも無ければお手上げになってしまいます。よるDOM変更の監視で解決しました。下記のように、DOMが追加や削除されるが、コールバックもなく追加されたものかどうか判断もできない場合です。下記の場合ですと自作関数での追加なのでそこを編集してやればいいのですが、ライブラリを利用する場合、これに対応するコードはミニマム化されているので読んだりいじったりは困難です。CodePen.このような場合に追加や削除されたことを掴み、追加された要素やその親要素、兄弟要素に対してなにか処理をしてやりたい場合、MutationObserverによってDOMを監視することが可能です。使わないようにするおわりにMutationObserver基本的には、下記のドキュメントにある。developer.mozilla.orgが、あまり深く書いてくれていないので、下記も併読してもう少し深いところに突っ込んでいく。Standard一旦、とりあえず最低限動くところまでを見ていこう。MutationObserverこの子は、ある指定されたオブジェクトに対してそれ自身やその子孫の監視をする処理の本体で、監視開始や監視終了の関数を持っている。コールバック関数に渡される変更を返し、そのキューを空にするMutationCallback変更が検知されたときに呼び出される関数。MutationObserverインスタンス自身MutationRecord検知後、コールバック関数に渡される、検知した変更に関するデータオブジェクト。変更された要素自身や変更箇所の隣人要素などが入っている。オプションとして渡す、監視対象の設定オブジェクト。最低限、下記のうち少なくとも1つを明示的に設定する必要がある。trueにすると、対象の文字データの変更を監視対象とするここで、ノードとは簡単に言うとDOM構造の一部のことで、子ノードとは対象の要素の中に入れ子となっているDOM要素を指す。trueにすると、ul・liの変更や、新たな子タグの追加を監視する。持っておらず直下にテキストは存在しないため、ノードは持っているがテキストデータは持っていないことになるので、テキストの追加を監視することになる(もちろん、追加した後に変更や削除があった場合、それらも検知される)。直下のテキストも検知することができる(そこにテキストを追加してはいけないが)。上記を踏まえて、一度動かしてみよう。追加と削除しかないため、その2パターンの変更を検知した際に、検知した回数をカウントするようにした。呼んでいないため監視しっぱなしである。どの種類の検知に引っかかったかを保持している。変更があったノードそのもの。追加されたノードのリスト。削除されたノードのリスト。追加/削除があった要素の、1つ前のお隣さんノード。追加/削除があった要素の、1つ後のお隣さんノード。変更の場合、変更前の値を保持している。利用して、追加された要素に対して、追加後にさらに要素を変更してみる。使って処理をしている。軽い処理なので、一瞬で動作が終わってしまうため、書き換え後のものが挿入されているように見えるが、実は挿入後に書き換えられている。監視に引っかかるような動作を追加し、分岐をしてみる。配列長を見ることで追加か削除が判別できる。使って変更後に取得することができる。監視を停止してみる何かの変更を検知して、一回だけ処理をすればいい場合は、コールバック関数の最後で監視を停止してやることができる。CodePen.少し前の、変更するたびカウントを増やしていく例で、最初の一回のみで止めるようにした。呼んでやることで、コールバック関数内で自分自身を止めることができる。インスタンスを持っている変数が使える場所である限り、任意の場所で止めることができる。MutationObserverInit前章までは、検知対象を絞り込むことに使っていたこのオプション配列だが、もう少し踏み込んだ設定もできる。監視対象要素の子ノードを見るかどうか。監視対象要素の子孫を見るかどうか。場合は、あくまでも子への追加や削除を見ており、孫世代の要素が変わったとしても検知されない。場合は元々監視対象そのものの値の変更しか見ていない。場合は子以降の属性の変更も見るようになる。