_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のシンプルなアイコンが作れる。だけ。KDNMEDIAIcoMoon等のソーシャル・メディアのアイコンが含まれている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;
}

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