compassのvertical-alignmentを利用する

作成日: 2019年06月10日

CSS・SCSS・Compass

vertical-alignment

縦方向の余白に統一性をもたせる考え方、手法。

利用方法

利用したいscssファイルの冒頭に以下を記述する。

@import "compass/typography";

$base-font-size: 16px;
$base-line-height: 24px;
@include establish-baseline;

body{
  @include debug-vertical-alignment;
}

h1,h2,h3,h4,h5,h6{@include rhythm-margins(0,1);}
h1{@include adjust-font-size-to(48px,2)}
h2{@include adjust-font-size-to(36px,2)}
h3{@include adjust-font-size-to(24px,1)}
h4{@include adjust-font-size-to(20px,1)}
h5{@include adjust-font-size-to(18px,1)}
hgroup h2,h4,h5,h6{@include adjust-font-size-to(16px);}
p{margin: 0;}

@import "compass/typography";

$base-font-size: 16px;

$base-line-height: 24px;

@include establish-baseline;

body{

@include debug-vertical-alignment;

}

h1,h2,h3,h4,h5,h6{@include rhythm-margins(0,1);}

h1{@include adjust-font-size-to(48px,2)}

h2{@include adjust-font-size-to(36px,2)}

h3{@include adjust-font-size-to(24px,1)}

h4{@include adjust-font-size-to(20px,1)}

h5{@include adjust-font-size-to(18px,1)}

hgroup h2,h4,h5,h6{@include adjust-font-size-to(16px);}

p{margin: 0;}

余白の調整には、

// margin-top
@include leader();

// margin-bottom
@include trailer();

// padding-top
@include padding-leader();

// padding-bottom
@include padding-trailer();

// margin-top

@include leader();

// margin-bottom

@include trailer();

// padding-top

@include padding-leader();

// padding-bottom

@include padding-trailer();

コメントをするコメントをキャンセル

コメントはありません。