2019-08-11

Sass(SCSS)の関数をstyled-componentsでも使いたい

まずは自力でなんとかしてみる

rgba lighten darkenなど色に関わる sass 関数を使いたい場面が出てきた為、以下のような関数を定義して一箇所にまとめておき、必要な場面で呼び出す、というような事をしていました。

rgba function

export const rgba = (hex, alpha = 1) => {
  let r = hex.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i)
  let c = null
  if (r) {
    c = r.slice(1, 4).map(x => parseInt(x, 16))
  }
  r = hex.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i)
  if (r) {
    c = r.slice(1, 4).map(x => 0x11 * parseInt(x, 16))
  }
  if (!c) {
    return null
  }
  return `rgba(${c[0]}, ${c[1]}, ${c[2]}, ${alpha})`
}

rgba function 呼び出し

const color = rgba("#999999", 0.5)

lighten function と darken function

// lighten //
export const lighten = (hex, amount = 1) => {
  const amt = amount * 100
  const temp = getColor(hex, amt)
  return temp
}
// darken //
export const darken = (hex, amount = 1) => {
  const amt = -(amount * 100)
  const temp = getColor(hex, amt)
  return temp
}
// 共通 //
const getColor = (hex, amt) => {
  let usePound = false
  if (hex[0] == "#") {
    hex = hex.slice(1)
    usePound = true
  }
  const num = parseInt(hex, 16)
  let r = (num >> 16) + amt
  if (r > 255) {
    r = 255
  } else if (r < 0) {
    r = 0
  }
  let b = ((num >> 8) & 0x00ff) + amt
  if (b > 255) {
    b = 255
  } else if (b < 0) {
    b = 0
  }
  let g = (num & 0x0000ff) + amt
  if (g > 255) {
    g = 255
  } else if (g < 0) {
    g = 0
  }
  return (usePound ? "#" : "") + (g | (b << 8) | (r << 16)).toString(16)
}

lighten & darken 呼び出し

const lightenColor = lighten("#999999", 0.5)
const darkenColor = darken("#999999", 0.5)

結論: そんなことしなくても polished を使えばよかった！

とりあえずは上記の方法で解決したんですが、よく考えたらそういうライブラリありそうだなと思って調べてみたらやっぱりありました！polishedというライブラリで、様々な Sass の便利な機能が styled-components で使えるようになります。　ドキュメントはこちらから！

styled-components のチームでメンテナンスしてるみたいです。もっと早くに知りたかった 😭

polished インストール

yarn or npm でインストール

yarn add polished --dev

polished を使ってみる

import { rgba, darken, lighten } from "polished"

const Style = styled.div`
  h1 {
    color: rgba("#000", 0.5);
  }
  h2 {
    color: lighten(0.5 "#000");
  }
  h3 {
    color: darken(0.5, "#000");
  }
`

rgba ではカラーコードが第一引数にきて、darken と lighten ではカラーコードが第二引数にくるみたいですね…！ちょっとややこしい…？

謎な部分もあるけど、色関連以外にもいろんな機能が網羅されててめっちゃ便利そうなので今後styled-componentsを使う時は絶対セットで入れると思います！おすすめ〜