2017-12-05 9 views
-1

いくつかのミックスインを作成して、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ようnumbernumber with unitと連携し、REM、EMなど

と私は開発者モードで見たときに、それはこのようになります

enter image description here

は私のコードをより明確にしてコンパイルされたCSSで多くのジャンクをしないためのより良い方法はありますか?

私は私が代わりにand

,を使用したことを忘れてしまったUPDATE

はあなたがmixin as a functionを使用することができますありがとう、そして私の英語のため申し訳ありません

+1

ベストプラクティスは、SASSを使用することです:P – GGO

+0

は母...申し訳ありませんが、私は – Ampersanda

答えて

0

to-remは、remに変換するために最大4つのパラメータを取ることができます。 @base-fontは追加パラメータです。このミックスインは、呼び出されたスコープ内の4つの変数(@ var1、@ var2、@ var3、@ var4)を返します。しかし、あなたはできませんこのmixin を2回と同じスコープで呼び出すことができます。マージンやパディングの場合など。

.to-rem(@v1: 0, @v2: 0, @v3: 0, @v4: 0, @base-font: 14px) { 
    @var1: unit(@v1)/@base-font * 1rem; 
    @var2: unit(@v2)/@base-font * 1rem; 
    @var3: unit(@v3)/@base-font * 1rem; 
    @var4: unit(@v4)/@base-font * 1rem; 
} 

使用法:

a { 
    .to-rem(12px, 20px, 24px, 20px); 

    margin: @var1 @var2 @var3 @var4; 
} 

a { 
    .to-rem(12px); 

    margin-top: @var1; 
} 

生成されたCSS:

a { 
    margin: 0.85714286rem 1.42857143rem 1.71428571rem 1.42857143rem; 
} 
a { 
    margin-top: 0.85714286rem; 
} 

それとも、一つだけのマージンミックスインを持っているあなたのミックスインを書き換えることができます。

@base-font: 14px; 

.margin(@top: null, @right: null, @bottom: null, @left: null) { 
    & when not (@top = null) { 
    & when (ispixel(@top)) { 
     margin-top: unit(@top)/@base-font * 1rem; 
    } 
    & when not (ispixel(@top)) { 
     margin-top: @top; 
    } 
    } 
    & when not (@right = null) { 
    & when (ispixel(@right)) { 
     margin-right: unit(@right)/@base-font * 1rem; 
    } 
    & when not (ispixel(@right)) { 
     margin-right: @right; 
    } 
    } 
    & when not (@bottom = null) { 
    & when (ispixel(@bottom)) { 
     margin-bottom: unit(@bottom)/@base-font * 1rem; 
    } 
    & when not (ispixel(@bottom)) { 
     margin-bottom: @bottom; 
    } 
    } 
    & when not (@left = null) { 
    & when (ispixel(@left)) { 
     margin-left: unit(@left)/@base-font * 1rem; 
    } 
    & when not (ispixel(@left)) { 
     margin-left: @left; 
    } 
    } 
} 

使用法:

a { 
    .margin(12px, 20px, 10px, 20px); 
} 
a { 
    .margin(@top: auto); // You can pass only those params you need 
} 

生成されたCSS:

a { 
    // Don't know how to combine this properties 
    margin-top: 0.85714286rem; 
    margin-right: 1.42857143rem; 
    margin-bottom: 0.71428571rem; 
    margin-left: 1.42857143rem; 
} 
a { 
    margin-top: auto; 
} 
+0

が答えてくれてありがとう:)くぼみが好きではありません。私はあなたの長い答えを感謝します:Dしかし、私は代わりにマージンを組み合わせる必要があります。私はupvoted。 :) – Ampersanda