最初は行番号のみで考えていましたがついでに縞々もやってみました。
要件
プログラミングの学習においてProgate（プロゲート）を使っています。
HTMLやCSSの学習は有料部分含め全て終えたわけですが、最後に残っていたのがSass。
なんとなくのイメージはCSSの上位版というか効率的にCSSを書けるもの。具体的にどんな事ができるかはぼんやりしていたので何が出来て何が良いのかをまとめてみます。
プロゲートではSCSS記法で学習するみたいですがググって見たところそれぞれの特徴はこう。
{}などの括弧を使わずインデントのみで階層構造を書く記法。 セミコロンも無しなんて凄くスピーディーに書けそうですね！
div margin: 0 auto a color: red
こっちはCSSと同じっぽい？と思いきやdivの中にaがある！
階層構造になっているわけですね。
どちらかというとこっちのSCSSが主流らしいです。
div {
margin: 0 auto;
a {
color: red;
}
}
ふと気づいたけどはてなブログのシンタックスハイライトには「sass」はあるけど「scss」は無いんですねぇ。
前述部分でもう分かってしまいましたね。いちばん大事な部分。「入れ子構造で短く書ける」というところ。
そしてもう一つに「変数が使える」こと。要は一度書いたスタイルを名前で呼び出して再利用できるということですね。
.header { width: 100%; } .header ui { padding: 10px; } .header ui li { font-size: 15px; }
などと書いたあとに.headerのセレクタ名を変更したいという場合にCSSの場合は3箇所を編集する必要がある。
でもSCSSの書き方なら1箇所だけを編集すればOK。
.header {
width: 100%;
ui {
padding: 10px;
li {
font-size: 15px;
}
}
}
普通のCSSで文字の色を指定する場合
h1 { color: red; } p{ color: red; } a{ color: red; }
SCSSで変数を使って書く場合
$main-color: red;
h1 {
color: $main-color;
}
p{
color: $main-color;
}
a{
color: $main-color;
}
こうすることによってクラス名の修正の時同様に変数$main-colorの値を変えるだけで一挙に各要素の文字色を変更可能です。
ここまででも十分便利っぽいですが他にもいろいろあるみたい。
$main-colorの時の例ではプロパティの値のみを変数として格納して利用していましたが、mixinではプロパティをまるごと変数にできるイメージ。
@mixin 変数名 { ここにCSS }
のようなかんじです。
読み込みは@include 変数名;でOK。
以下の例ではカードっぽいデザインをmixin化して使いまわしています。
@mixin card {
background: #fff;
border-radius: 2px;
box-shadow: 0 2px 5px #ccc;
}
.main-card {
@include card;
width: 50%;
}
.sub-card {
@include card;
width: 25%;
}
前述のカードスタイルの例ではwidthをメインとサブで分けて記述していますが、このwidthの値を引数として渡すよう書き換えるとさらに短く簡潔に書くことができます。
@mixin card($wsize) {
background: #fff;
border-radius: 2px;
box-shadow: 0 2px 5px #ccc;
width: $wsize;
}
.main-card {
@include card(50%);
}
.sub-card {
@include card(25%);
}
@mixin card($wsize)とすることで引数として受け取った値を自動的に$wsizeという変数に格納します。
.main-cardでは50%が引数として渡される$wsizeに50%が代入されるwidth: $wsize;はwidth: 50%;となるのような流れでCSSが読み込まれます。 ここまでくるとかなりプログラミングって感じがしてきますね。
Sassには関数がある。引数を渡すと計算後の値が返ってくるというあれができる。
例として出てきたのは色の生成。色を暗くする関数darken、色を明るくするlighten、透明度を指定する関数rgbaの3つがでてきました。
//redを10%暗く
.dark-red {
color: darken(red, 10%)
}
//redを10%明るく
.light-red {
color: lighten(red, 10%)
}
//redを50%透明に
.skeleton-red {
color: rgba(red, 0.5)
}
これを使えば基準の色を元にhover色やactive色を生成できるのでメインカラーだけ指定すればそれらしいカラーセットが作れそうですね。
CSSでもimportはありますが、SCSSでは読み込まれる側のファイル名の先頭に「_」（アンダーバー）を付ける必要があるようです。
そして読み込む時は「」と「.scss」を省略してOKらしい。 「variables.scss」というファイルを作って読み込むとすると
@import "variables";
で読み込むことができる。 で、これができると何が良いのかというと読み込み元の変数をそのまま使えるようになること。 そして、_variables.scssファイルに変数を全てまとめて記述しておくと設定ファイルのような使い方ができる。
$main-color: #d00; $sub-color: lighten($main-color, 20%); $font-color: white;
@import "variables";
h1 {
background-color: $main-color;
.tag {
background-color: $sub-color;
color: $font-color;
}
}
このようにstyle.scssはテンプレートとして触らないようにして、_variables.scssさえ変更すればデザインが変わるようなことができます。
プロゲートでのお勉強部分はここらへんまででした。 その先は実践的な内容で目標物があって、それと同じにするにはどう書くでしょう的な問題。
最近は仕事でもマテリアライズフレームワークを使っているため、CSSをガシガシ書く時間が減っていたのですがSCSSで書きたくなってきました。
次にページ製作をやるときもしくはリファクタリングするときには使ってみようと思います。
去年（2016年）くらいまでは未だ使うのは早いかなというような状況だったFlexible Box Layout（フレキシブルボックスレイアウト）。通称flexbox。 そろそろ使っても良いんじゃないでしょうか。
参考: Can I use... Support tables for HTML5, CSS3, etc
See the Pen flexbox by maru (@maru0014) on CodePen.
キレイにdiv要素が横並びになってますね。6つの子要素が横並びになっていますが、width（幅）指定は100%です。
width:calc(100%/6);でもなく、width:16.666667%;でもありません。これもFlexboxのすごいところ。
display:flex;が指定された親要素を持つ子要素は6等分のサイズを指定しなくてもいいかんじに等分してくれます。
7つ目の子要素を足そうが、8つ目を足そうが、改行されることなく横並びに。
そしてfloat:left;と違ってclearfix不要です。素晴らしい。
.row { display: flex;/*これを入れるだけで横並び*/ background: #ccc; }
前述した実装例でもdisplay: flex;をCSSに追記してあります。
超絶楽です。
flexbox化した親要素の属性にflex-wrap:wrap;を追記すると回り込み（改行）が有効化されます。
.row { display: flex; flex-wrap:wrap;/*回り込み有効化*/ background: #ccc; }
そしてfloat:left;の時のように子要素のサイズを指定
.col { width: calc(100% / 3);/*3等分*/ }
See the Pen flexbox-wrap by maru (@maru0014) on CodePen.
いかがでしょうか。
今までfloat:left;で横並びにして、サイズ指定して、clearfixして、という作り方だったものが3つのプロパティだけで実装できてしまいました。
See the Pen flow-root by maru (@maru0014) on CodePen.
float:left;でdiv要素を横並びにしましたが、clearfixを行っていないため外枠の.rowが上の方でちっちゃくなってしまいました。
現状で最もスマートな、短いclearfixとしては以下のような書き方でしょうか。
.row:after { content: ""; display: table; clear: both; }
Googleが作り上げたフレームワーク「マテリアライズ（Documentation - Materialize）」においても上記のような記述となっていたため、これが現時点での最も正解に近い書き方なのかもしれません。
しかし、今後は新しい属性値flow-rootによって更に簡単に実装できそうです。
参考: CSS Display Module Level 3
See the Pen flow-root-on by maru (@maru0014) on CodePen.
変更点は一行のみ親要素div.rowにdisplay:flow-root;を追記しただけです。
これは超簡単！
参考: Can I use... Support tables for HTML5, CSS3, etc
Chrome、Firefox、operaは対応しているようですが、Edgeやsafariは未対応。 AndroidはOK、iPhoneは✕という状況です。（IEは知らん）
ゆくゆくはsafariも対応するでしょうが、それまでは前述したafter要素によるclearfixが最適かと思います。 対応するまではこれを使いましょう。
.row:after { content: ""; display: table; clear: both; }
他の手段としてはflexboxを使うという方法もありますね。
.hogehoge { pointer-events: none; }
例えば商品ページの商品画像にリンクが貼ってある状態で、 その商品が売り切れになり、商品画像の上に「売り切れ」などの文字が入ったの画像を
.soldout { position: relative; } .soldout:after { content: "" display: block; background: (soldout.png) no-repeat; background-size: cover; position: absolute; top:0; left:0; }
とかで表示した場合。 商品画像リンクの上に画像があるためリンクをクリックできませんよね。
こんなときに売り切れ画像をすり抜けてリンクをクリックできるようにするのが
pointer-events: none;
です。
このスタイルを指定すると目には見えているけどマウスのカーソルは透過するようになります。
※ブラウザの対応状況に注意
スマートフォン向けならば問題ないですが、IE10以下未対応のプロパティです。 まだまだIE10以下を使っている人は多いので、PC向けのページでの利用はオススメできません。
CSSのpointer-events: none;はIE10以下は機能しない。
ならばjQueryで実装する手もあります。
.soldout:afterの部分に透過させたい要素のクラス名を記述
<!--jQuery読込--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.2/jquery.min.js"></script> <!--クリック無効化--> <script> $(function(){ $('.soldout:after').click(function(){ return false; }) }); </script>
上記のタグを<head>内に記述すればOKです。
IE11～Edgeが主流になるまではjQueryでの実装がベストかと思います。
