-
-
Save elMestre/f1b64a7910d7e6ab5c93 to your computer and use it in GitHub Desktop.
Flat UI Colors ( http://flatuicolors.com/ ) using SASS, with lists, @for loops and nth list position
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .aturquoise { background-color: #1abc9c; } | |
| .emerald { background-color: #2ecc71; } | |
| .peter-river { background-color: #3498db; } | |
| .amethyst { background-color: #9b59b6; } | |
| .wet-asphalt { background-color: #34495e; } | |
| .green-sea { background-color: #16a085; } | |
| .nephritis { background-color: #27ae60; } | |
| .belize-hole { background-color: #2980b9; } | |
| .wisteria { background-color: #8e44ad; } | |
| .midnight-blue { background-color: #2c3e50; } | |
| .sun-flower { background-color: #16a085; } | |
| .carrot { background-color: #27ae60; } | |
| .alizarin { background-color: #2980b9; } | |
| .clouds { background-color: #8e44ad; } | |
| .concrete { background-color: #2c3e50; } | |
| .oorange { background-color: #16a085; } | |
| .pumpkin { background-color: #27ae60; } | |
| .pomegranate { background-color: #2980b9; } | |
| .asbestos { background-color: #2c3e50; } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //Not use color names as class names | |
| $schema1: aturquoise #1ABC9C emerald #2ECC71 peter-river #3498DB amethyst #9B59B6 wet-asphalt #34495E | |
| $schema2: green-sea #16A085 nephritis #27AE60 belize-hole #2980B9 wisteria #8E44AD midnight-blue #2C3E50 | |
| $schema3: sun-flower #16A085 carrot #27AE60 alizarin #2980B9 clouds #8E44AD concrete #2C3E50 | |
| $schema4: oorange #16A085 pumpkin #27AE60 pomegranate #2980B9 silver #8E44AD asbestos #2C3E50 | |
| $schemas: $schema1 $schema2 $schema3 $schema4 | |
| @for $i from 1 through length($schemas) | |
| @for $ii from 1 through length( nth($schemas, $i) ) | |
| @if type_of( nth( nth($schemas, $i), $ii) ) == "string" | |
| .#{ nth( nth($schemas, $i), $ii) } | |
| background-color: nth( nth($schemas, $i), $ii+1) | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment