Experiments with Sass Color Functions

Developer
KatieK
Size
4,076 Kb
Views
6,072
  1. Experiments with Sass Color Functions Previews
  2. Experiments with Sass Color Functions HTML Codes
  3. Experiments with Sass Color Functions CSS Codes

How do I make an experiments with sass color functions?

Experiments with Sass Color Functions. Demos, examples and links to darken, complement, saturate, invert, mix and many other functions from Sass.. What is a experiments with sass color functions? How do you make a experiments with sass color functions? This script and codes were developed by KatieK on 12 January 2023, Thursday.

Experiments with Sass Color Functions Previews
IQ Test

Experiments with Sass Color Functions - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Experiments with Sass Color Functions</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/abcei.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Experiments with Sass Color Functions</h1>
<p>Top and bottom border to all divs are generated with <code>grayscale($color)</code> and <code>desaturate($color, 20)</code>, respectively.</p>
<h2>Sass Native:</h2>
<div class="darken"> <pre>darken($color, 20);</pre> <p>Darken base color by 20%.</p> <p class="docs"><a href="http://sass-lang.com/documentation/Sass/Script/Functions.html#darken-instance_method">Documentation.</a> Related: <a href="http://sass-lang.com/documentation/Sass/Script/Functions.html#lighten-instance_method">lighten</a></p>
</div>
<div class="complement"> <pre>complement($color);</pre> <p class="docs"><a href="http://sass-lang.com/documentation/Sass/Script/Functions.html#complement-instance_method">Documentation.</a></p>
</div>
<div class="saturate"> <pre>saturate($color, 20);</pre> <p>Increase saturation of base color by 20%.</p> <p class="docs"><a href="http://sass-lang.com/documentation/Sass/Script/Functions.html#saturate-instance_method">Documentation</a>. Related: <a href="http://sass-lang.com/documentation/Sass/Script/Functions.html#desaturate-instance_method">desaturate</a></p>
</div>
<div class="invert"> <pre>invert($color);</pre> <p class="docs"><a href="http://sass-lang.com/documentation/Sass/Script/Functions.html#invert-instance_method">Documentation.</a></p>
</div>
<div class="mix"> <pre>mix($color, #00F, 75%);</pre> <p>Mix blue into the base color by 75%.</p> <p class="docs"><a href="http://sass-lang.com/documentation/Sass/Script/Functions.html#mix-instance_method">Documentation.</a></p>
</div>
<div class="hue"> <pre>adjust_hue($color, 110);</pre> <p>Rotate base color by 110 degrees around the color wheel.</p> <p class="docs"><a href="http://sass-lang.com/documentation/Sass/Script/Functions.html#adjust_hue-instance_method">Documentation</a></p>
</div>
<div class="adjust-single"> <pre>adjust-color($color, $green: 128);</pre> <p>Add a hue to a color, by value. Use a negative number to subtract a color.</p> <p class="docs"><a href="http://sass-lang.com/documentation/Sass/Script/Functions.html#adjust_color-instance_method">Documentation.</a> Related: <a href="http://sass-lang.com/documentation/Sass/Script/Functions.html#scale_color-instance_method">scale-color</a>, <a href="http://sass-lang.com/documentation/Sass/Script/Functions.html#change_color-instance_method">change-color</a></p>
</div>
<div class="adjust-multiple"> <pre>adjust-color($color, $green: -64, $blue: -64)</pre> <p>Remove multiple hues from a color, by value. Use a positve number to add a hue.</p> <p class="docs"><a href="http://sass-lang.com/documentation/Sass/Script/Functions.html#adjust_color-instance_method">Documentation.</a></p>
</div>
<div class="transparentize"> <pre>transparentize(gray, .5);</pre> <p>Adjust the transparency (alpha) of a color.</p> <p class="docs"><a href="http://sass-lang.com/documentation/Sass/Script/Functions.html#transparentize-instance_method">Documentation.</a> Related: <a href="http://sass-lang.com/documentation/Sass/Script/Functions.html#fade_out-instance_method">fade-out</a>, <a href="http://sass-lang.com/documentation/Sass/Script/Functions.html#opacify-instance_method">opacify</a>, <a href="http://sass-lang.com/documentation/Sass/Script/Functions.html#transparentize-instance_method">transparentize</a></p>
</div>
<div class="red"> <pre>rgb(red($color), 0, 0)</pre> <p>Use only the amount of red in the base color.</p> <p class="docs"><a href="http://sass-lang.com/documentation/Sass/Script/Functions.html#red-instance_method">Documentation.</a></p>
</div>
<div class="green"> <pre>rgb(0, green($color), 0);</pre> <p>Use only the amount of green in the base color.</p> <p class="docs"><a href="http://sass-lang.com/documentation/Sass/Script/Functions.html#green-instance_method">Documentation.</a></p>
</div>
<div class="blue"> <pre>rgb(0, 0, blue($color));</pre> <p>Use only the amount of blue in the base color.</p> <p class="docs"><a href="http://sass-lang.com/documentation/Sass/Script/Functions.html#blue-instance_method">Documentation.</a></p>
</div>
<p>Also see color "getter" functions:</p>
<ul> <li><a href="http://sass-lang.com/documentation/Sass/Script/Functions.html#hue-instance_method">hue($color)</a></li> <li><a href="http://sass-lang.com/documentation/Sass/Script/Functions.html#saturation-instance_method">saturation($color)</a></li> <li><a href="http://sass-lang.com/documentation/Sass/Script/Functions.html#lightness-instance_method">lightness($color)</a></li> <li><a href="http://sass-lang.com/documentation/Sass/Script/Functions.html#alpha-instance_method">alpha($color)</a></li>
</ul>
<h2>Compass:</h2>
<div class="shade"> <pre>shade($color, 50%);</pre> <p>Mix <code>$color</code> with black, by %.</p> <p class="docs"><a href="http://compass-style.org/reference/compass/helpers/colors/#shade">Documentation.</a> Related: <a href="http://compass-style.org/reference/compass/helpers/colors/#tint">tint</a></p>
</div>
</body>
</html>

Experiments with Sass Color Functions - Script Codes CSS Codes

/* Other interesting / enlightening color values
$color: #C6538C; // Sass Pink
$color: #bada55;
$color: #cab1e5;
$color: #c0ffee;
$color: blueviolet;
$color: goldenrod;
$color: darkturquoise;
*/
body { background-color: #C6538C;
}
.darken { background-color: #862d59;
}
.complement { background-color: #53c68d;
}
.saturate { background-color: #dd3c8c;
}
.invert { background-color: #39ac73;
}
.mix { background-color: #953ea9;
}
.hue { background-color: #9fc653;
}
.adjust-single { background-color: #c6d38c;
}
.adjust-multiple { background-color: #c6134c;
}
.transparentize { background-color: rgba(128, 128, 128, 0.5);
}
.red { background-color: #c60000;
}
.green { background-color: #005300;
}
.blue { background-color: #00008c;
}
.shade { background-color: #632a46;
}
div { color: white; border-top: solid #8d8d8d 5px; border-bottom: solid #af6a8c 5px; font-weight: bold; width: 46%; padding: 1%; margin: 1%; float: left;
}
div:nth-child(2n) { clear: left;
}
div pre { font-size: large; margin: .5rem;
}
div p { margin: .5rem;
}
div p.docs { font-weight: normal;
}
p { clear: both;
}
Experiments with Sass Color Functions - Script Codes
Experiments with Sass Color Functions - Script Codes
Home Page Home
Developer KatieK
Username KatieK2
Uploaded January 12, 2023
Rating 3
Size 4,076 Kb
Views 6,072
Do you need developer help for Experiments with Sass Color Functions?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

KatieK (KatieK2) Script Codes
Name
CSS Content Generation Demos
Quick z-index proof
Image Caption
Vertical Centering - Ghost Element
SVG - 2 Colors in CSS
Reverse the String
Text Blocks Over Image, Updated
Dadgumit, Blowouts
Mathematically Pefect Hexagon
Pure CSS Image Text with Fallbacks
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!