pleeease

前にpleeeaseを見たときは、postCSS, autorefixer, CSS writing, css mqpacker, 独自filterの寄せ集めで、中途半端なイメージがあった。

昨日久しぶりに見たら、CSS Pre-processorを使用せずに、CSS Post-processorのみで効率的なCSSを出力しよう感がある。

具体的には、CSSで将来的に多くのブラウザで利用できるであろう方法で記述し、pleeeaseに通すことで、現在のブラウザでCSSを認識できるように、フォールバックと最適化を行う方針だ。

はてなブックマークのホットエントリーを狙うなら
「CSSメタ言語なんて古い! これからはCSSの仕様に沿った書き方」 とか?

このようなタイトルの付け方は、完全に釣りなので真に受けないで欲しいが、このようなCSS Post-processorとCSS Pre-processorが共存すると、また面白いことになるのではないかなと思う。

4gifs:


1 wow please

4gifs:

1 wow please

(出典: 4GIFs.com)

Sass, Less, Stylusを使う理由

CSS Pre-processorについて、最近お話を頂くことが多くなってきたけど、CSS Pre-processorなんてCSSを生成するための単なる「箱」でしかないと思う。

  • 変数が使える
  • 入れ子できる
  • extendが使える

そんなことはどうでもよくて、CSS Pre-processorよりも先にあるCSSを意識してほしいと思う。

では、なぜ自分はCSS Pre-processorを使っているかというと、CSSそのものが、めんどうくさいから。

  • { } や ; を書くのがめんどい(Sass記法、Stylus使えば、省略)
  • 何かの順序や数値を計算するのがめんどい
  • 微妙に違うだけの処理を何度も書くのがめんどい

CSSそのものはめんどいけど、CSS Pre-processorを利用することで、めんどい手間を省いて、限られた時間をCSSそのものを考えられる時間にあてられることが利点だと思う。

CSS Pre-processorそのものは、どうでもよくなってきた。

line-heightによるスペースを埋める

異なるline-heightを指定していると、同じmarginやpaddingの高さでも、差が出てしまう。

body {
  font-size: 14px;
}
.a {
  float: left;
  padding-top: 20px;
  line-height: 1.8;
}
.b {
  float: left;
  padding-top: 20px;
  line-height: 1;
}

line-heightによる差を計算して埋めるのが面倒なので、mixinを作った。

stylus

FONT_SIZE = 14px
LINE_HEIGHT = 1.8

adjustSpacer(AS_SPACING, AS_FONT_SIZE = FONT_SIZE, AS_LINE_HEIGHT = LINE_HEIGHT)
  INLINE_HEIGHT = AS_FONT_SIZE * AS_LINE_HEIGHT - AS_FONT_SIZE
  INLINE_HEIGHT = round( INLINE_HEIGHT / 2 )
  AS_SPACING - INLINE_HEIGHT

body
  font-size FONT_SIZE
.a
  float left
  padding-top adjustSpacer(20)
  line-height LINE_HEIGHT
.b
  float left
  padding-top 20px
  line-height 1

mixinの吐き出したCSS

body {
  font-size: 14px;
}
.a {
  float: left;
  padding-top: 14px; 
  line-height: 1.8;
}
.b {
  float: left;
  padding-top: 20px;
  line-height: 1;
}

今は、pxしか対応していないけど、単位によって計算を分岐すればいいと思う。
ただ問題なのは、Stylusが単位を取得できたか、ということ。
Sassならできたと思うけど、Stylusで単位取得できなければ、新しいmixnを作るかな?

CSSで球体

CSSのみで球体を作ろうと思うと、CSS 3D Transforms を駆使してやらないといけない。

もしCSS 3D Transforms に押し出しや回転体が実装されるのあれば、CSSのみでモデリングもできるようになるんじゃないか、と妄想した。

ただそこまでいくと、スタイルシートの枠組みを超えるような気がしているし、使い道があまりないような気がしている。

# CSSのみでフィギュアを作るにはどうしたらいいか、考えながら

beesandbombs:


fast squares

beesandbombs:

fast squares

theevildead-:


Sacred Geometry

The Platonic Solids
These five Platonic solids are ideal, primal models of crystal patterns that occur throughout the world of minerals in countless variations. These are the only five regular polyhedra, that is, the only five solids made from the same equilateral, equiangular polygons. They are geometrical forms which are said to act as a template from which all life springs. The aesthetic beauty and symmetry of the Platonic solids have made them a favorite subject of geometers for thousands of years. They are named after the ancient Greek philosopher Plato who theorized that the classical elements were constructed from the regular solids. To the Greeks, these solids symbolized fire, earth, air, spirit (or ether) and water.
The Platonic solids are also called “cosmic figures” and are the basic modules for Sacred Geometry. There will be more about Sacred Geometry soon.

theevildead-:

Sacred Geometry

The Platonic Solids

These five Platonic solids are ideal, primal models of crystal patterns that occur throughout the world of minerals in countless variations. These are the only five regular polyhedra, that is, the only five solids made from the same equilateral, equiangular polygons. They are geometrical forms which are said to act as a template from which all life springs. The aesthetic beauty and symmetry of the Platonic solids have made them a favorite subject of geometers for thousands of years. They are named after the ancient Greek philosopher Plato who theorized that the classical elements were constructed from the regular solids. To the Greeks, these solids symbolized fire, earth, air, spirit (or ether) and water.

The Platonic solids are also called “cosmic figures” and are the basic modules for Sacred Geometry. There will be more about Sacred Geometry soon.