LESS / Sassの色とそれらの違い

2つの色の違いを理解する方法は？ 1つの配色から360を作成する方法は？ あるスキームの色を、1つの基本色に依存する変数に変換し、CSSプリプロセッサで使用する方法は？ これについては後で詳しく説明します：なぜこれが必要なのか、LESS（Sass）の色とスキームでどのような種類のジュセカが可能なのか、2つの色を1つに変えて最初の機能より上に機能させるのに役立つサービス この記事は、CSSプリプロセッサー、その変数、および関数/不純物を使用する人にとって興味深いものになります。

やる気

既製の色から、基本色に基づいて動的なスキームを作成する

原理から始めましょう-なぜこれが必要なのですか？ そのため、私たちはレイアウトデザイナーの役割を担っており、デザイナーがサイト/システム/要素/ブロックの色のセットを投げて、それをカラースキームとして定義しています。 レイアウトでは、色が互いに著しく相互依存していることがわかります。 デザイナーが私たちに5色を投げたとしましょう。そしておそらくHEX形式で：＃FF0000、＃E82C0C、＃FF530D、＃E80C7A、＃FF0DFF。 これらの文字と数字は何を教えてくれますか？ 何もありません-モニターは人間よりも理解しやすいです。



何ができますか？



最も簡単なオプションは、LESSに5つの変数を作成し（ 簡単にするために、CSSプリプロセッサの代表の1つとして使用します ）、これらの値をそれらに設定し、忘れます：

@clr-base: #FF0000; @clr-header: #E82C0C; @clr-button: #FF530D; @clr-link: #E80C7A; @clr-hover: #FF0DFF;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2番目のオプションは、HSLの各色（色相、彩度、明度）を表すことです。これらはより人間指向の値であり、変数の値のままにします。 Chromeでは、「カラー形式」/「HSL」設定を使用してこれを行うことができます。

 @clr-base: hsl( 0, 100%, 50%); @clr-header: hsl( 9, 90%, 48%); @clr-button: hsl( 17, 100%, 53%); @clr-link: hsl(330, 90%, 48%); @clr-hover: hsl(300, 100%, 53%);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すでに見栄えは良いですが、もっと良くできますか？ たとえば、基本色のみに値を残し、色関数を使用して他の値を計算します！

 @clr-base: hsl( 0, 100%, 50%); @clr-header: spin(desaturate(darken(@clr-base, 2%), 10%), 8); @clr-button: spin(lighten(@clr-base, 3%), 17); @clr-link: spin(desaturate(darken(@clr-base, 2%), 10%), -30); @clr-hover: spin(lighten(@clr-base, 3%), -60);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これにより何が得られますか？ まず、変数は1つだけです。ベースカラーを変更すると、サイトのカラースキーム全体が変更されます。 第二に、可能な限り人間的に表現される色の相互依存性の可視性の向上。 たとえば、ボタンの色がカラーホイール上で17度回転し、基本色がわずかに明るくなっていることがすぐにわかります。

自分の配色デザイナーとAdobe Kuler

別のユースケースは、基本的なカラースキームを個別に、またはサービスを使用して作成することです：類似、単色（固定トーン）、トライアド、補色、合成、単色（固定トーンおよび彩度）。 基本色に依存する一連の変数として表示します。 そして、サービスを使用する必要なく、それをより暖かく/より寒く、より明るく/より暗く、より豊かに/その逆にします。 そして、これらすべて、1つの変数のみを変更します。



それはどこで本当に役立つのでしょうか？ たとえば、Webサイトをフローにし、ある種のデザインテンプレートを使用します。 その中で、同様のスキームを導入することができ、すでに次の顧客は文字通り数秒でその基本色を使用してプロトタイプを展開します。



これにより、回路を1回作成し、そこから360回路を「注入」することができます。

色の違いを明確に見る

そのように物事を複雑にする必要はありませんが、グラデーションの始まりと終わりなど、2つの色の違いを理解したくない場合は、色をHSLとして表現できるという知識が役立ちます。 しかし、人々がコンピューターを発明したのに、なぜ計算が頭にあるのでしょうか？

違いを知る方法は？

上記のように、手動治療法を使用して、HEX RGBからHSLへの色変換を行い、コンポーネント間の差を計算します。 これはすぐに私を退屈させ始め、node.jsで遊んだ後、これを自動的に行うのに役立つ小さなユーティリティ/サービスを作成しました ： garex.github.io/nodejs-colors-to-less-operations



最初の列には基本色を入力し、2番目の列には従属色を入力します。 「進む」ボタンを押すと、ある色を別の色に変えるために必要な一連のカラーLESS機能があります。 Sassの場合、カラーホイールを回転させる機能を除いて、関数の名前は同じです。LESSにはspin



があり、Sassにはより明示的にadjust-hue



と呼ばれるものがあります。

おわりに

最後に、CSSプリプロセッサで配色をアニメーション化する方法と、そのための可能な方法/サービス/ユーティリティを学びました。 コメントでは、誰がLESS / SASS / YourCSSHereプロジェクトで変数と変数間の依存関係を整理しているのかを共有することをお勧めします。 この記事が「フクロウの描き方」のスタイルでうまくいかなかったことを願っています。



問題とプルリクエストは大歓迎です。 ご清聴ありがとうございました。