Styleguide

引数	初期値	値	備考
`$style`	なし	`reset`	必要であれば `normalize` `sanitize` など拡張する

ブラウザ間の差異を初期化する記述を返す。
各プロジェクトの _application/foundation/_base.scss でのみ使用可能。
※プロジェクト作成時に初期設定で使用するくらいで、通常使用することはない。

@mixin pe-base($style) {
  ...
}

@include pe-base(reset);

（長いので）省略

引数	初期値	値	備考
なし	-	-	-

@mixin pe-clearfix {
  ...
}

.class-name {
  @include pe-clearfix;
}

.class-name:before,
.class-name:after {
  display: block;
  overflow: hidden;
  content: "";
}
.class-name:after {
  clear: both;
}

@mixin pe-glyph($webfont-id, $glyph-name) {
  ...
}

.class-name:before {
  @include pe-glyph(home);
}

.class-name:before {
  font-family: "Awesome Glyph";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  -webkit-font-smoothing: antialiased;
  text-transform: none;
  speak: none;
  content: "\f600";
}

引数	初期値	値	`半角空白` 区切りで `幅` と`高さ` が指定可能（後者は省略可能。省略時は `幅` の `1/2`）
`$color`	なし	`border-color` プロパティに指定可能な値

二等辺三角形を生成するコードを返す。
実用では、要素ではなく擬似要素（:before :after）に指定して使用するケースが多いと想定される。

@mixin pe-triangle($size, $color, $direction) {
  ...
}

<span class="pepagis-ex-triangle-up"></span>
<span class="pepagis-ex-triangle-right"></span>
<span class="pepagis-ex-triangle-down"></span>
<span class="pepagis-ex-triangle-left"></span>

<span class="pepagis-ex-triangle-up-left"></span>
<span class="pepagis-ex-triangle-up-right"></span>
<span class="pepagis-ex-triangle-down-left"></span>
<span class="pepagis-ex-triangle-down-right"></span>

<span class="pepagis-ex-triangle-up-arg"></span>
<span class="pepagis-ex-triangle-right-arg"></span>
<span class="pepagis-ex-triangle-down-arg"></span>
<span class="pepagis-ex-triangle-left-arg"></span>

.pepagis-ex-triangle-up {
  @include triangle(10px, #0c9dc2, up);
}
.pepagis-ex-triangle-right {
  @include triangle(10px, #0c9dc2, right);
}
.pepagis-ex-triangle-down {
  @include triangle(10px, #0c9dc2, down);
}
.pepagis-ex-triangle-left {
  @include triangle(10px, #0c9dc2, left);
}
.pepagis-ex-triangle-up-left {
  @include triangle(10px, #ec387b, up-left);
}
.pepagis-ex-triangle-up-right {
  @include triangle(10px, #ec387b, up-right);
}
.pepagis-ex-triangle-down-left {
  @include triangle(10px, #ec387b, down-left);
}
.pepagis-ex-triangle-down-right {
  @include triangle(10px, #ec387b, down-right);
}
// $size に高さ、$color に背景色を指定
.pepagis-ex-triangle-up-arg {
  @include triangle(12px 10px, #899e00 #e6ebca, up);
}
.pepagis-ex-triangle-right-arg {
  @include triangle(12px 10px, #899e00 #e6ebca, right);
}
.pepagis-ex-triangle-down-arg {
  @include triangle(12px 10px, #899e00 #e6ebca, down);
}
.pepagis-ex-triangle-left-arg {
  @include triangle(12px 10px, #899e00 #e6ebca, left);
}

.pepagis-ex-triangle-up {
  display: inline-block;
  height: 0;
  width: 0;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #0c9dc2;
  border-left: 5px solid transparent;
}
.pepagis-ex-triangle-right {
  display: inline-block;
  height: 0;
  width: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #0c9dc2;
}
.pepagis-ex-triangle-down {
  display: inline-block;
  height: 0;
  width: 0;
  border-top: 5px solid #0c9dc2;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}
.pepagis-ex-triangle-left {
  display: inline-block;
  height: 0;
  width: 0;
  border-top: 5px solid transparent;
  border-right: 5px solid #0c9dc2;
  border-bottom: 5px solid transparent;
}
.pepagis-ex-triangle-up-left {
  display: inline-block;
  height: 0;
  width: 0;
  border-top: 10px solid #ec387b;
  border-right: 10px solid transparent;
}
.pepagis-ex-triangle-up-right {
  display: inline-block;
  height: 0;
  width: 0;
  border-top: 10px solid #ec387b;
  border-left: 10px solid transparent;
}
.pepagis-ex-triangle-down-left {
  display: inline-block;
  height: 0;
  width: 0;
  border-bottom: 10px solid #ec387b;
  border-right: 10px solid transparent;
}
.pepagis-ex-triangle-down-right {
  display: inline-block;
  height: 0;
  width: 0;
  border-bottom: 10px solid #ec387b;
  border-left: 10px solid transparent;
}
.pepagis-ex-triangle-up-arg {
  display: inline-block;
  height: 0;
  width: 0;
  border-right: 6px solid #e6ebca;
  border-bottom: 10px solid #899e00;
  border-left: 6px solid #e6ebca;
}
.pepagis-ex-triangle-right-arg {
  display: inline-block;
  height: 0;
  width: 0;
  border-top: 6px solid #e6ebca;
  border-bottom: 6px solid #e6ebca;
  border-left: 10px solid #899e00;
}
.pepagis-ex-triangle-down-arg {
  display: inline-block;
  height: 0;
  width: 0;
  border-top: 10px solid #899e00;
  border-right: 6px solid #e6ebca;
  border-left: 6px solid #e6ebca;
}
.pepagis-ex-triangle-left-arg {
  display: inline-block;
  height: 0;
  width: 0;
  border-top: 6px solid #e6ebca;
  border-right: 10px solid #899e00;
  border-bottom: 6px solid #e6ebca;
}

pe-triangle() の使用例

擬似要素 :before に指定する場合。

表示サンプル

<span class="pepagis-ex-triangle-up2"></span>

使用例

.pepagis-ex-triangle-up2:before {
  content: "";
  @include triangle(10px, #0c9dc2, up);
}

コンパイル結果

.pepagis-ex-triangle-up2:before {
  content: "";
  display: inline-block;
  height: 0;
  width: 0;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #0c9dc2;
  border-left: 5px solid transparent;
}

@mixin pe-webfont($webfont-id) {
  ...
}

@include pe-webfont(awesome);

@font-face {
  font-family: "Awesome Glyphs";
  font-style: normal;
  font-weight: normal;
  src: url
  （長いので）省略
}

Add-ons

pe-base()

pe-clearfix()

pe-glyph()

pe-triangle()

pe-triangle() の使用例

pe-webfont()

Styleguide