色彩Sassがデフォルトで用意している関数や、それを応用して設定できる小技やMixinをまとめてみました。紹介しているほとんどの小技が、色を一色してすれば他の色も自動生成してくれる...という便利なものです。いう具合で、RGB値に続いて透明度(0〜1の値)を記述します。カラーコードで書き慣れていると、カラーコードからRGB値に生成して指定する...というのが少し面倒だったりしますよね。Sassならカラーコードのまま透明度の指定も可能です。色の明度を調整するまずはベースとなるカラーを設定しておき、そのベースカラーから何%か暗く、または明るくするための設定ができます。便利で、Sassで色の指定をする際は度々使うかと思うので、漏れずに覚えておきましょう。#006577;}このように指定しておいた色から自動的に20%ほど暗い色に変換してくれます。色の彩度を調整する同様に色の鮮やかさの度合いである彩度も自動的に変換して記述してくれます。鮮やかさの度合いのパーセント値)。#3795a6;}ベースカラーより少しくすんだ色を生成してくれました。使って自動で色を生成してくれます。GeneratorというWebサイトで簡単に調べられます。どれくらいの割合で変化させればいいかと悩んだ時は、こちらのサイトで試してみてください!目次へ。CodePen.思ったような色がなかなか思いつかない、グラデーションを作る時の色の組み合わせ。こちらも使いたい色を一色のみ指定すると、自動的にもう一つの色を生成してグラデーションにしてくれるmixinを作っておくと便利です。いう色相を調整するための関数を使っています。このデモの初期値は、縦の方向で(180deg)、水色(#0bd)から、少し青より(20%)のグラデーションになるよう設定されています。呼び出せばその値でグラデーションが表示されます。続いて括弧内に各値を入れてあげるとOK!下のデモでは横の方向で(90deg)、薄いピンク(#fbb)から、大きく異なる色味(100%)のグラデーションにしてみました。補色でも明度や彩度次第でうまく調和します。100%);}目次へ。CodePen.ここまでで背景をグラデーションにする方法を紹介しましたが、それを更に応用させて文字色として扱ってみましょう。理屈としては背景を指定する所まで同じ方法で行い、そこから文字の部分をくり抜いて表示するわけです。グラデーションテキストに対応していないブラウザーには、指定した文字色で表示されるようにします。inline-block;}目次へ。等)と色を指定すると、自動的に背景に並べるよっていう設定です。呼び出す時に、半角スペースを開けてカラーコードを記述すると好きな数だけ並べられます。2017を使えば、コマンドライン等を使わなくても簡単にSassからCSSを生成できます。CSS-Tricks目次へ。シェアするTwitterFacebookはてブPocketニュースレターWeb制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。中の人ってこんな人Webデザイナー+WebデベロッパーのManaです。日本で2年間グラフィックデザイナーとして働いた後、カナダ・バンクーバーにあるWeb制作の学校を卒業。カナダやオーストラリア、イギリスの企業でWebデザイナーとして働きました。詳しく知りたいという方は詳細ページへ。@chibimanaでつぶやいてます。Webクリエイターボックス。