Sassやってみた

はじめに

こんばんはー。

低空飛行のモチベーションが続いてる僕です。

比較的頭使わず、かつ、あまり触ったことないやつを勉強中です。

今回はSassやってみました。

自分はフロントエンドの知識はすごく薄いし、CSSもあんま得意じゃないのでSassとかもあんまり興味なかったんですが、食わず嫌いというか触らないのに興味ないというのも失礼なので、一旦触ってみようと思ってやってみました。

まぁ自分みたいなSass初学者が説明しても大した説明できないんで、Sassとはなにかっていうのは割愛します。

今回勉強して面白いなーと思ったところをかいてきます。

覚えるために。

面白かった

アンパサンド

親のセレクタを参照できるってことみたい

example.scss

a {
  &:hover {
    cursor: pointer;
  }
}

example.css

a:hover {
  cursor: pointer; }

でもそもそもネストで書けるから、以下の書き方もできる。

example.scss

a {
  :hover {
    cursor: pointer;
  }
}

example.css

a :hover {
  cursor: pointer; }

使い分けの違いが今のところ思いつかないけど、もっと大掛かりなスタイルを記述する際に差が出てくるのかな？

if文

変数使えるってのは知ってたから多分できるんだろうと思ってたけど、やっぱりできてしかもめちゃ簡単だった。

example.scss

$width: 500;
$background_color: 'red';

@if $width >= 500 {
    $background_color: 'blue';
}

body {
  background-color: $background_color;
}

example.css

body {
  background-color: "blue"; }

mixin

メソッド的に定義できて、@include で簡単に使いまわせる。

example.scss

@mixin image-style($border-color: #ddd) {
  border: 1px solid $border-color;
  border-radius: 5px;
  padding: 5px;
}

.list-image {
  width: 150px;
  @include image-style();
}

.detail-image {
  width: 500px;
  @include image-style(#000);
}

example.css

.list-image {
  width: 150px;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 5px; }

.detail-image {
  width: 500px;
  border: 1px solid #000;
  border-radius: 5px;
  padding: 5px; }

extend

スタイルの継承ってのが面白かった。

example.scss

.submit-text-style {
  font-weight: bold;
  font-size:   16px;
}

.user-register-button {
  @extend .submit-text-style;
  color: green;
}

.purchase-button {
  @extend .submit-text-style;
  color: red;
}

example.css

.submit-text-style, .user-register-button, .purchase-button {
  font-weight: bold;
  font-size: 16px; }

.user-register-button {
  color: green; }

.purchase-button {
  color: red; }

でもmixinでも同じことできるから、使い分けが結構難しそう。

終わりに

プログラムチックに触れるのはいいなーと思いました。

こんな感じで書けるならば食わず嫌いはやめてCSS勉強してみたいと思いました。

ただ、自分はデザインセンスがないんで、知り合いのデザイナさんに教わりながらもうちょいSassつまみ食いしてみようと思います。