過去のブログのアーカイブ
この記事は前身のブログのアーカイブを引き継いだものです．
画像が正しく表示できないなど，コンテンツの表示に問題がある恐れがあります．CSSでレスポンシブデザインを作る時等、@mediaで既存のCSSを適応してやりたいことってよくあると思います。
既存のCSSを呼び出した上にちょこっと編集をする(継承みたいなの)ができるようにできるということで、早速試してみた。
まあというものの、既存の普通のCSSではこのような動作はサポートされていません。なので使うものは当然、CSSではないものになりますね。ここは妥協してください。
というわけで今回使うのはSCSSというもの、この界隈の方なら知名度も高いものだと思います。
というわけで…
継承みたいな動作をする方法 @include
includeを使うことで@mixinにて定義されているCSSを呼び出すことができます。また、パラメータを指定することも可能。
継承みたいにするには@includeのあとに上書きするCSSを書けばいいだけです。
@mixin test($param) {
margin: $param;
}
.box {
@include test(5px);
margin-botton: 10px;
}
そもそもSCSSとは
わかる方も多いと思いますが、そもそもSCSSはコンパイルを通してCSSにしているだけ。上で紹介した@includeのほかにも計算や変数も使うことができる万能なCSSのプログラミング言語(みたいなの)となっています。
そのため、静的なファイルということで使用したいという方は、このようなことは不可能ですね、諦めてください。
…というよりわかりやすい書き方はできませんが継承に近い動作はCSSでできるんですね。
それはclassの重ねあわせですね。marginを指定しているCSSを指定してから、margin-bottonが指定されているCSSを指定してあげれば実質継承みたいな動作の出来上がり。
もう少しCSSも手軽になってくれないかな
自分でこの記事読み返しててあわかりづらすぎてちょっと悲しくなった
