2012-01-09

_corporate-colors.scss

色々なウェブサービスのコーポレートカラーをSassで手軽に扱えるようにするライブラリを洒落で作った。なんとなくこのあたりの色かなとロゴとかメディア向けキットの画像とかからカラーピッカーで拾って勝手にコーポレートカラーと決めてたりするので正確じゃない。

@import "corporate-colors";

.facebook {
  background-color: $cc-facebook;
  color: white;
  display: inline-block;
  font-family: "Helvetica Neue", "Arial", sans-serif;
  font-size: 20px;
  font-weight: bold;
  height: 32px;
  line-height: 32px;
  overflow: hidden;
  text-align: center;
  text-decoration: none;
  width: 32px;

  &:before {
    content: "f";
    display: block;
    height: 100%;
    width: 100%;
  }
}

でFacebookのシンプルなアイコンが作れる。だけ。KDNMEDIAやIcoMoon等のソーシャル・メディアのアイコンが含まれているDingbatなWebフォントと組み合わせたりとか。だけ。

Sassなのでグラデーションも簡単なんじゃないかと思う。

@import "corporate-colors";
@mixin top-down-gradient($color) {
  @each $prefix in -moz-l, -webkit-l, -o-l, -ms-l, l {
    background-image: #{$prefix}inear-gradient(top, lighten($color, 10%), darken($color, 10%));
  }
}

.facebook {
  @include top-down-gradient($cc-facebook);
  background-color: $cc-facebook;
}

簡単というより直観的に操作できるとかそんな感じか。