いくつかのミックスインを作成して、pxを4つのパラメータが上、右、下、左の余白にあるrem値に簡単に変換できるようにしています。私のコードでは、パラメータがピクセルであるかどうかをチェックしている16個のミックスインを作成します。px-rem mixinsのベストプラクティス
// TODO --> margin
// T T T T
.margin(@top,@right,@bottom,@left) when (ispixel(@top)), (ispixel(@right)), (ispixel(@bottom)), (ispixel(@left)){
margin: @top @right @bottom @left;
margin: unit(@top)/@base-font*1rem unit(@right)/@base-font*1rem unit(@bottom)/@base-font*1rem unit(@left)/@base-font*1rem;
}
// T F T T
//noinspection CssOverwrittenProperties
.margin(@top,@right,@bottom,@left) when (ispixel(@top)), (ispixel(@right) = false), (ispixel(@bottom)), (ispixel(@left)){
margin: @top @right @bottom @left;
margin: unit(@top)/@base-font*1rem @right unit(@bottom)/@base-font*1rem unit(@left)/@base-font*1rem;
}
// T T F T
//noinspection CssOverwrittenProperties
.margin(@top,@right,@bottom,@left) when (ispixel(@top)), (ispixel(@right)), (ispixel(@bottom) = false), (ispixel(@left)){
margin: @top @right @bottom @left;
margin: unit(@top)/@base-font*1rem unit(@right)/@base-font*1rem @bottom unit(@left)/@base-font*1rem;
}
// T F F T
//noinspection CssOverwrittenProperties
.margin(@top,@right,@bottom,@left) when (ispixel(@top)), (ispixel(@right) = false), (ispixel(@bottom) = false), (ispixel(@left)){
margin: @top @right @bottom @left;
margin: unit(@top)/@base-font*1rem @right @bottom unit(@left)/@base-font*1rem;
}
// T T T F
//noinspection CssOverwrittenProperties
.margin(@top,@right,@bottom,@left) when (ispixel(@top)), (ispixel(@right)), (ispixel(@bottom)), (ispixel(@left) = false){
margin: @top @right @bottom @left;
margin: unit(@top)/@base-font*1rem unit(@right)/@base-font*1rem unit(@bottom)/@base-font*1rem @left;
}
// T F T F
//noinspection CssOverwrittenProperties
.margin(@top,@right,@bottom,@left) when (ispixel(@top)), (ispixel(@right) = false), (ispixel(@bottom)), (ispixel(@left) = false){
margin: @top @right @bottom @left;
margin: unit(@top)/@base-font*1rem @right unit(@bottom)/@base-font*1rem @left;
}
// T T F F
//noinspection CssOverwrittenProperties
.margin(@top,@right,@bottom,@left) when (ispixel(@top)), (ispixel(@right)), (ispixel(@bottom) = false), (ispixel(@left) = false){
margin: @top @right @bottom @left;
margin: unit(@top)/@base-font*1rem unit(@right)/@base-font*1rem @bottom @left;
}
// T F F F
//noinspection CssOverwrittenProperties
.margin(@top,@right,@bottom,@left) when (ispixel(@top)), (ispixel(@right) = false), (ispixel(@bottom) = false), (ispixel(@left) = false){
margin: @top @right @bottom @left;
margin: unit(@top)/@base-font*1rem @right @bottom @left;
}
// F T T T
//noinspection CssOverwrittenProperties
.margin(@top,@right,@bottom,@left) when (ispixel(@top) = false), (ispixel(@right)), (ispixel(@bottom)), (ispixel(@left)){
margin: @top @right @bottom @left;
margin: @top unit(@right)/@base-font*1rem unit(@bottom)/@base-font*1rem unit(@left)/@base-font*1rem;
}
// F F T T
//noinspection CssOverwrittenProperties
.margin(@top,@right,@bottom,@left) when (ispixel(@top) = false), (ispixel(@right) = false), (ispixel(@bottom)), (ispixel(@left)){
margin: @top @right @bottom @left;
margin: @top @right unit(@bottom)/@base-font*1rem unit(@left)/@base-font*1rem;
}
// F T F T
//noinspection CssOverwrittenProperties
.margin(@top,@right,@bottom,@left) when (ispixel(@top) = false), (ispixel(@right)), (ispixel(@bottom) = false), (ispixel(@left)){
margin: @top @right @bottom @left;
margin: @top unit(@right)/@base-font*1rem @bottom unit(@left)/@base-font*1rem;
}
// F F F T
//noinspection CssOverwrittenProperties
.margin(@top,@right,@bottom,@left) when (ispixel(@top) = false), (ispixel(@right) = false), (ispixel(@bottom) = false), (ispixel(@left)){
margin: @top @right @bottom @left;
margin: @top @right @bottom unit(@left)/@base-font*1rem;
}
// F T T F
//noinspection CssOverwrittenProperties
.margin(@top,@right,@bottom,@left) when (ispixel(@top) = false), (ispixel(@right)), (ispixel(@bottom)), (ispixel(@left) = false){
margin: @top @right @bottom @left;
margin: @top unit(@right)/@base-font*1rem unit(@bottom)/@base-font*1rem @left;
}
// F F T F
//noinspection CssOverwrittenProperties
.margin(@top,@right,@bottom,@left) when (ispixel(@top) = false), (ispixel(@right) = false), (ispixel(@bottom)), (ispixel(@left) = false){
margin: @top @right @bottom @left;
margin: @top @right unit(@bottom)/@base-font*1rem @left;
}
// F T F F
//noinspection CssOverwrittenProperties
.margin(@top,@right,@bottom,@left) when (ispixel(@top) = false), (ispixel(@right)), (ispixel(@bottom) = false), (ispixel(@left) = false){
margin: @top @right @bottom @left;
margin: @top unit(@right)/@base-font*1rem @bottom @left;
}
// F F F F
.margin(@top,@right,@bottom,@left) when (ispixel(@top) = false), (ispixel(@right) = false), (ispixel(@bottom) = false), (ispixel(@left) = false){
margin: @top @right @bottom @left;
}
変数のauto
またはnot-a-number
タイプを渡すとき、私は問題を抱えているが、それはPXようnumber
とnumber with unit
と連携し、REM、EMなど
と私は開発者モードで見たときに、それはこのようになります
は私のコードをより明確にしてコンパイルされたCSSで多くのジャンクをしないためのより良い方法はありますか?私は私が代わりにand
の,
を使用したことを忘れてしまったUPDATE
はあなたがmixin as a functionを使用することができますありがとう、そして私の英語のため申し訳ありません
ベストプラクティスは、SASSを使用することです:P – GGO
は母...申し訳ありませんが、私は – Ampersanda