0

スティッキー フッターの James Dean を使用しています。<html>、<body>およびにスタイルを適用する必要があります<footer>。現在、sass を使用して css を記述しています。このフッターを可能な限りモジュールとして実装したいと考えています。できれば、たとえば次のようにします。

footer {@extend %sticky-footer;}

ただし、それを行う場合でも、<html>および<body>タグのスタイルを設定する必要があります。Scssには、私が知る限り、使用できる親セレクターがありません。それで、できれば @extend を使って、モジュラーな方法で (scss の) sass でこれを行う方法はありますか? ( codepen に例があります)

明確にするために、親セレクターを求めているわけではありません。このフッターを scss で実装するモジュラーな方法を求めています。

4

1 に答える 1

0

これは不可能です。Sass は厳密に言えば CSS にコンパイルされる言語であり、DOM の知識がなく、マークアップに関する仮定を行いません。これが機能するためには、あなたが求めているのは CSS の機能でなければなりません。

CSS には親セレクターがありますが、現時点ではどのブラウザーでもサポートされていません。

あなたが得ることができる最も近いものは次のようなものです：

html%sticky-footer {
    position: relative;
}

body%sticky-footer {
    margin: 0 0 100px 0;
}

footer%sticky-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

html, body, footer {
    @extend %sticky-footer;
}
于 2013-10-10T12:01:49.790 に答える