1

Sassにプレースホルダーセレクターがあるとします。そのセレクター内で、Modernizrを使用して機能をチェックする必要があることが明らかになるいくつかのスタイルを記述します。

問題は、modernizrによって提供される.no-generatedcontentまたは.generatedcontentクラスを使用しようとしているように見えますが、プレースホルダーセレクターが機能すると、誤った階層位置にあるため、使用できません。

これを解決するために私が見ることができる唯一の方法は、それらをプレースホルダーセレクターの外に置くことですが、これは私のスタイルを台無しにします。Sassは私のスタイルをより整理するのに役立ちます。

これを回避する方法について何かアイデアはありますか？

これが私が意味することの例です：

<html>modernizrが作業を完了すると、ページの上部にあるタグは次のようになります。

<html class="js flexbox flexboxlegacy canvas canvastext webgl touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths wf-allumistd-n1-active wf-freightsanspro-n3-active wf-automate-n4-active wf-automate-n7-active wf-active">

さて、私がというプレースホルダーセレクターを持っているとしましょう%styles

%styles {
li {
this: this;
}
.no-generatedcontent li {
this: that;
}
}

次に、このプレースホルダーをコードのどこかで次のように使用します。

.main {
section {
.box-area {
color: red;
@extend %styles;
}
}
}

modernizrクラスが効果を発揮するには間違った場所にあることは私には明らかなようです。これは一種の階層性問題です。プレースホルダーの外に置くことで解決できますが、個別に@extendする必要があり、sassコードが混乱するため、sassを使用してスタイルを整理し始めました。

何か案は？

4

1 に答える 1

1

サス：

%styles {
    li {
        border: 1px solid red;

        .no-generatedcontent & { // note the location of the & here
            border: 1px solid red;
        }
    }
}

.main {
    section {
        .box-area {
            color: red;
            @extend %styles;
        }
    }
}

CSS：

.main section .box-area li {
  border: 1px solid red; }

.no-generatedcontent .main section .box-area li, .main section .no-generatedcontent .box-area li {
  border: 1px solid red;
  background: #CCC; }

.main section .box-area {
  color: red; }

使用時にバグがあるようです@extend（ライン上で2つのセレクターを生成する方法を参照してください.no-generatedcontent？Sass 3.2.3）。代わりにミックスインを使用した場合、これは発生しません。

.main section .box-area {
  color: red; }

  .main section .box-area li {
    border: 1px solid red; }

  .no-generatedcontent .main section .box-area li {
    border: 1px solid red;
    background: #CCC; }
于 2012-11-20T13:03:52.347 に答える