エスエムティ スタッフブログ『エスエムティの愉快な仲間たち』

pay-per-click

Staff blog

エスエムティの愉快な仲間たち

記事担当
ぴのこ

Sass使ってますか?Part2

先日「Sass」の導入について記事を書きましたが、
自分のメモついでに便利な書き方を紹介していこうかと思います。

前回は「変数」でした。

——————-
$Color: #000;

p{color:$Color;}
——————-

「$Color」にサイトカラーを指定し、
後は変数名で呼び出す方法でしたね。

今回はサイトカラーを基準に、色を変更する関数の紹介です。

——————-
lighten($Color, ●%);
darken($Color, ●%);
saturate($Color, ●%);
desaturate($Color, ●%);
——————-

ベースカラーを基準に、

「lighten」は明度を上げ、「darken」は明度を下げます。
「saturate」は彩度を上げ、「desaturate」は彩度を下げます。

——————-
$Color: #000;

p{color: lighten($Color, 50%);}
——————-

↑こんな使い方ですね。

CVエリアに、サイトカラーより鮮やかな色を設定したい!
なんて時に一発で設定が出来ますし、
万が一サイトカラーが変わることがあったとしても
変更後のカラーをベースにコンパイルしなおしてくれますので
メンテナンス性もばっちりですね。

——————-
adjust-hue($Color, 30deg);
——————-

↑こんな関数もあり、
色相環を基準に30度回転させた色。
なんて設定も可能です。

組み上げるには手間もかかりますが、
色々な設定が可能ですので、試してみるのも面白いですよ。

ぴの子

クリックしていただけると幸いです

エスエムティ メンバー紹介

●ひらりん

またの名をりんこ。エスエムティの陰のデザイナーとして君臨。素性がイマイチわからない。

●しータケ

声と足がデカい弊社のドン。人当たりはイイが、黙ってるとオッカナイのはDNAのせいらしい。

●さくサック

「はい、エスエムティのさくサックでございます」と弊社史上初、電話は自ら名乗る 妖怪 妖精系男子。

●ざわシス

社内一、目ヂカラが半端ないエスエムティの営業のホープ。よく忘れ物をして会社に戻ってくる。

●ウラカスミン

ポケモンのヌオーとウパーを足して2で割ったような、見ているだけでホンワカする癒し系女子。

●部長

縦横無尽、天下無敵にみえるキレキャラだが歯が弱く部分入れ歯がトレードマーク。

●ぴのこ

制作部のエース。何年経ってもエスエムティでは永遠の21歳である。

●ばさっち

エスエムティきってのアーティスティックなデザイナー。顔が濃いのでテルマエとも呼ばれている。

●まりりん

アニメ声がカワイイ秋田小町女子。最近エスエムティの女帝と化してきた。

●トサコーン

会社の独特な雰囲気の中でも常にクールでマイペースな草食系?プログラマー。常時サックに憑依されている。

月曜から金曜まで順番に更新します!

http://www.smt-net.co.jp/

旧ブログはこちら


ページの先頭へ戻る

ページの先頭へ戻る

お問合せ・ご相談

スタッフブログ

pay-per-click