Color Swatches SASS

A-Pen-by-Airen.markdown

A Pen by Airen

A Pen by Airen on CodePen.

License.

index.html

<ul class="swatches red">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>            
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
         <ul class="swatches orange">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>            
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
         <ul class="swatches yellow">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>                    
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
         <ul class="swatches green">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>                    
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul class="swatches blue">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul class="swatches purple">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul class="swatches black">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

style.scss

@import "compass";
body {
	font-family: verdana;
	font-size: 8px;
	background-color: #000;
}

$redBase: #DC143C;
$orangeBase: saturate(lighten(adjust_hue($redBase, 39), 5), 7);
$yellowBase: saturate(lighten(adjust_hue($redBase, 64), 6), 13);
$greenBase: desaturate(darken(adjust_hue($redBase, 102), 2), 11);
$blueBase: saturate(darken(adjust_hue($redBase, 201), 2), 1);
$purpleBase: saturate(darken(adjust_hue($redBase, 296), 2), 1);
$blackBase: #777;
$bgc: #fff;

@mixin swatchesDarken($color) {
    @for $i from 1 through 10 {
    	$x:$i+11;
        li:nth-child(#{$x}) {
    		$n:$i*5;
    		$bgc:darken($color,$n);
    		background-color: $bgc;
	    	&:hover:before {
	    		content: "#{$bgc}";
	    		color: lighten($bgc,40);
	    		font-family: verdana;
	    		font-size: 8px;
	    		padding: 2px;
	    	}
    	}
    }
}
@mixin swatchesLighten($color) {
    @for $i from 1 through 10 {
    	$x:11-$i;
        li:nth-child(#{$x}) {
    		$n:$i*5;
    		$bgc:lighten($color,$n);
    		background-color: $bgc;
	    	&:hover:before {
	    		content: "#{$bgc}";
	    		color: darken($bgc,40);
	    		font-family: verdana;
	    		font-size: 8px;
	    		padding: 2px;
		    }
    	}
    }
}



.swatches li {    
	width: 4.7619047619%;
	float: left;
	height: 60px;
  list-style: none outside none;
}


ul.red { 
	@include swatchesLighten($redBase);
	@include swatchesDarken($redBase);
	li:nth-child(11) {
		background-color: $redBase;
	}
}

ul.orange { 
	@include swatchesLighten($orangeBase);
	@include swatchesDarken($orangeBase);
	li:nth-child(11) {
		background-color: $orangeBase;
	}
}


ul.yellow { 
	@include swatchesLighten($yellowBase);
	@include swatchesDarken($yellowBase);
	li:nth-child(11) {
		background-color: $yellowBase;
	}
}

ul.green { 
	@include swatchesLighten($greenBase);
	@include swatchesDarken($greenBase);
	li:nth-child(11) {
		background-color: $greenBase;
	}
}

ul.blue { 
	@include swatchesLighten($blueBase);
	@include swatchesDarken($blueBase);
	li:nth-child(11) {
		background-color: $blueBase;
	}
}

ul.purple { 
	@include swatchesLighten($purpleBase);
	@include swatchesDarken($purpleBase);
	li:nth-child(11) {
		background-color: $purpleBase;
	}
}

ul.black { 
	@include swatchesLighten($blackBase);
	@include swatchesDarken($blackBase);
	li:nth-child(11) {
		background-color: $blackBase;
	}
}