Nuclides
Table of content
What are Nuclides?

Nuclides are parts of the stylesheet source that are not directly useable on their own. This could be mixins, variables like colors and sizes, or settings.

To mark a variable or mixin as a nuclide, annotate it with the @nuclide tag, followed by the name of the nuclide.

Special forms are @color and @mixin.

Colors
Color
Color
Variable
Hex
RGBA
Aa
テキスト 黒色
$color-text
#454545
rgba(69, 69, 69, 1)
Aa
テキスト 灰色
$color-text-gray
#6E6E6E
rgba(110, 110, 110, 1)
Aa
背景色
$color-bg
#E9E9E9
rgba(233, 233, 233, 1)
Aa
アクセント色
$color-accent
#F44336
rgba(244, 67, 54, 1)
Aa
境界線 灰色
$color-border
#999999
rgba(153, 153, 153, 1)
Aa
$color-white
#FEFEFE
rgba(254, 254, 254, 1)
Aa
$color-primary
#16A085
rgba(22, 160, 133, 1)
Aa
灰色
$color-disabled
#ECF0F1
rgba(236, 240, 241, 1)
Config
device
$mobile
Copy variable
モバイル
Value
414px
$tablet
Copy variable
タブレット
Value
768px
$desktop
Copy variable
デスクトップ
Value
1100px
margin
$default-margin
Copy variable
基本的な余白
Value
20px
zindex
$zi-s
Copy variable
少し大きめ
Value
10
$zi-m
Copy variable
大きめ
Value
100
$zi-l
Copy variable
より大きめ
Value
1000
$zi-max
Copy variable
最大
Value
10000
Mixins
MediaQuery
sp()assets/scss/_tools.mixin.scss
Show example
SP用メディアクエリ(基本的に使わない)
@include sp() {…};
tab()assets/scss/_tools.mixin.scss
Show example
Tablet用メディアクエリ
@include sp() {…};
tab()assets/scss/_tools.mixin.scss
Show example
PC用メディアクエリ
@include sp() {…};
Clearing
clearfix($important: false)assets/scss/_tools.mixin.scss
Show example
SEE: http://cssmojo.com/the-very-latest-clearfix-reloaded/
Parameter
Optional
Description
$important
初期値false
@include clearfix(); @include clearfix(important);
Triangle
triangle($dir, $base, $height, $color)assets/scss/_tools.mixin.scss
Show example
triangle 三角つくる
Parameter
Optional
Description
$dir
方向up,down,left,right
$base
底辺
$height
高さ
$color
@include triangle(up, 20px, 50px, red); @include triangle(down, 40px, 20px, red); @include triangle(left, 50px, 20px, red); @include triangle(right, 100px, 20px, red);