Skip to content

Instantly share code, notes, and snippets.

@LayZeeDK

LayZeeDK/input.scss

Created April 10, 2023 23:54
Show Gist options
  • Save LayZeeDK/618f667b8003d774f6ccba7ef9c606e1 to your computer and use it in GitHub Desktop.
Save LayZeeDK/618f667b8003d774f6ccba7ef9c606e1 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
input.scss
// Copyright © 2011-2020 ZURB, Inc.
// MIT License
// Permission is hereby granted, free of charge, to any person obtaining
// a copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
$black: black;
$white: white;
$global-color-pick-contrast-tolerance: 0;
$contrast-warnings: true;
@function nth-root($num, $n: 2, $prec: 12) {
// From: http://rosettacode.org/wiki/Nth_root#JavaScript
$x: 1;
@for $i from 0 through $prec {
$x: divide(1, $n) * (($n - 1) * $x + divide($num, pow($x, $n - 1)));
}
@return $x;
}
/// Finds the greatest common divisor of two integers.
///
/// @param {Number} $a - First number to compare.
/// @param {Number} $b - Second number to compare.
///
/// @returns {Number} The greatest common divisor.
@function gcd($a, $b) {
// From: http://rosettacode.org/wiki/Greatest_common_divisor#JavaScript
@if ($b != 0) {
@return gcd($b, $a % $b);
}
@else {
@return abs($a);
}
}
/// Handles decimal exponents by trying to convert them into a fraction and then use a nth-root-algorithm for parts of the calculation
///
/// @param {Number} $base - The base number.
/// @param {Number} $exponent - The exponent.
///
/// @returns {Number} The product of the exponentiation.
@function pow($base, $exponent, $prec: 16) {
@if (floor($exponent) != $exponent) {
$prec2: pow(10, $prec);
$exponent: round($exponent * $prec2);
$denominator: gcd($exponent, $prec2);
@return nth-root(pow($base, divide($exponent, $denominator)), divide($prec2, $denominator), $prec);
}
$value: $base;
@if $exponent > 1 {
@for $i from 2 through $exponent {
$value: $value * $base;
}
}
@else if $exponent < 1 {
@for $i from 0 through -$exponent {
$value: divide($value, $base);
}
}
@return $value;
}
/// Divide the given `$divident` by the given `$divisor`.
///
/// @param {Number} $divident - The divident.
/// @param {Number} $divisor - The divisor.
/// @param {Number} $precision - The precision decimals for the division.
///
/// @return {Number} The product of the division.
@function divide($dividend, $divisor, $precision: 12) {
$sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
$dividend: abs($dividend);
$divisor: abs($divisor);
@if $dividend == 0 {
@return 0;
}
@if $divisor == 0 {
@error 'Cannot divide by 0';
}
$remainder: $dividend;
$result: 0;
$factor: 10;
@while ($remainder > 0 and $precision >= 0) {
$quotient: 0;
@while ($remainder >= $divisor) {
$remainder: $remainder - $divisor;
$quotient: $quotient + 1;
}
$result: $result * 10 + $quotient;
$factor: $factor * 0.1;
$remainder: $remainder * 10;
$precision: $precision - 1;
@if ($precision < 0 and $remainder >= $divisor * 5) {
$result: $result + 1;
}
}
$result: $result * $factor * $sign;
$dividend-unit: unit($dividend);
$divisor-unit: unit($divisor);
$unit-map: (
'px': 1px,
'rem': 1rem,
'em': 1em,
'%': 1%
);
@if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
$result: $result * map-get($unit-map, $dividend-unit);
}
@return $result;
}
/// Checks the luminance of `$color`.
///
/// @param {Color} $color - Color to check the luminance of.
///
/// @returns {Number} The luminance of `$color`.
@function color-luminance($color) {
// Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js
// Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
$rgba: red($color), green($color), blue($color);
$rgba2: ();
@for $i from 1 through 3 {
$rgb: nth($rgba, $i);
$rgb: divide($rgb, 255);
$rgb: if($rgb < 0.03928, divide($rgb, 12.92), pow(divide($rgb + 0.055, 1.055), 2.4));
$rgba2: append($rgba2, $rgb);
}
@return 0.2126 * nth($rgba2, 1) + 0.7152 * nth($rgba2, 2) + 0.0722 * nth($rgba2, 3);
}
/// Checks the contrast ratio of two colors.
///
/// @param {Color} $color1 - First color to compare.
/// @param {Color} $color2 - Second color to compare.
///
/// @returns {Number} The contrast ratio of the compared colors.
@function color-contrast($color1, $color2) {
// Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js
// Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
$luminance1: color-luminance($color1) + 0.05;
$luminance2: color-luminance($color2) + 0.05;
$ratio: divide($luminance1, $luminance2);
@if $luminance2 > $luminance1 {
$ratio: divide(1, $ratio);
}
$ratio: round($ratio * 10) * 0.1;
@return $ratio;
}
/// Checks the luminance of `$base`, and returns the color from `$colors` (list of colors) that has the most contrast.
///
/// @param {Color} $base - Color to check luminance.
/// @param {List} $colors [($white, $black)] - Colors to compare.
/// @param {Number} $tolerance [$global-color-pick-contrast-tolerance] - Contrast tolerance.
///
/// @returns {Color} the color from `$colors` (list of colors) that has the most contrast.
@function color-pick-contrast(
$base,
$colors: ($white, $black),
$tolerance: $global-color-pick-contrast-tolerance
) {
$contrast: color-contrast($base, nth($colors, 1));
$best: nth($colors, 1);
@for $i from 2 through length($colors) {
$current-contrast: color-contrast($base, nth($colors, $i));
@if ($current-contrast - $contrast > $tolerance) {
$contrast: color-contrast($base, nth($colors, $i));
$best: nth($colors, $i);
}
}
@if ($contrast-warnings and $contrast < 3) {
@warn 'Contrast ratio of #{$best} on #{$base} is pretty bad, just #{$contrast}';
}
@return $best;
}
$primary-color: #1779ba;
p {
color: color-pick-contrast($primary-color);
}
Raw
output.css
p {
color: white;
}
Raw
settings.json
{
"sass": {
"compiler": "dart-sass/1.32.12",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment