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.

ume75:

(via タバコ屋ではたらく犬が超可愛い - NAVER まとめ)

kaheigohei:

0wenhart:

Favourite Director/Actor Collaborations: Kurosawa/Mifune

Between 1948 and 1965, Akira Kurosawa directed 17 films. Of those 17, Toshiro Mifune starred in all but one. While the two had a falling out after the filming of their last collaboration, Red Beard, their mutual respect for one another remained intact until the end. 

Kurosawa has this quality, this ability to bring things out of you that you never knew were there. It is enormously difficult work, but each picture with him is a revelation. When you see his films, you find them full realizations of ideas, of emotions, of a philosophy which surprises with its strength, even shocks with its power. You had not expected to be so moved, to find within your own self this depth of understanding.
        — Toshiro Mifune

I am a person who is rarely impressed by actors, but in the case of Mifune, I was completely overwhelmed.
        — Akira Kurosawa

http://0wenhart.tumblr.com/post/56765609410/favourite-director-actor-collaborations

(出典: owenhartofficial)