Using Sass Maps to build a color palette

Developer
Stacy
Size
3,715 Kb
Views
24,288
  1. Using Sass Maps to build a color palette Previews
  2. Using Sass Maps to build a color palette HTML Codes
  3. Using Sass Maps to build a color palette CSS Codes

How do I make an using sass maps to build a color palette?

Generate a color palette with Sass using Maps. . What is a using sass maps to build a color palette? How do you make a using sass maps to build a color palette? This script and codes were developed by Stacy on 24 September 2022, Saturday.

Using Sass Maps to build a color palette Previews
IQ Test

Using Sass Maps to build a color palette - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Using Sass Maps to build a color palette</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Lato:300,700' rel='stylesheet' type='text/css'>
<section class="colors">
<h1>Using Sass Maps to build a color palette</h1>
<div class="bg-coral"></div>
<div class="bg-orange"></div>
<div class="bg-yellow"></div>
<div class="bg-green"></div>
<div class="bg-teal"></div>
<div class="bg-blue"></div>
<div class="bg-purple"></div>
<div class="bg-gray"></div>
<div class="bg-black"></div>
</section>
<section class="text colors">
<h1>We can also display text in that color</h1>
<h2 class="coral">This headline is</h2>
<h2 class="orange">This headline is</h2>
<h2 class="yellow">This headline is</h2>
<h2 class="green">This headline is</h2>
<h2 class="teal">This headline is</h2>
<h2 class="blue">This headline is</h2>
<h2 class="purple">This headline is</h2>
<h2 class="gray">This headline is</h2>
<h2 class="black">This headline is</h2>
</section>
</body>
</html>

Using Sass Maps to build a color palette - Script Codes CSS Codes

.bg-coral { background-color: #F45D4C;
}
.bg-coral:before { content: "$color-coral";
}
.bg-coral:after { content: "#F45D4C";
}
.coral { color: #F45D4C;
}
.coral:after { content: " $color-coral"; display: inline;
}
.bg-orange { background-color: #F7A541;
}
.bg-orange:before { content: "$color-orange";
}
.bg-orange:after { content: "#F7A541";
}
.orange { color: #F7A541;
}
.orange:after { content: " $color-orange"; display: inline;
}
.bg-yellow { background-color: #FACA66;
}
.bg-yellow:before { content: "$color-yellow";
}
.bg-yellow:after { content: "#FACA66";
}
.yellow { color: #FACA66;
}
.yellow:after { content: " $color-yellow"; display: inline;
}
.bg-green { background-color: #A1DBB2;
}
.bg-green:before { content: "$color-green";
}
.bg-green:after { content: "#A1DBB2";
}
.green { color: #A1DBB2;
}
.green:after { content: " $color-green"; display: inline;
}
.bg-teal { background-color: #60B99A;
}
.bg-teal:before { content: "$color-teal";
}
.bg-teal:after { content: "#60B99A";
}
.teal { color: #60B99A;
}
.teal:after { content: " $color-teal"; display: inline;
}
.bg-blue { background-color: #54787D;
}
.bg-blue:before { content: "$color-blue";
}
.bg-blue:after { content: "#54787D";
}
.blue { color: #54787D;
}
.blue:after { content: " $color-blue"; display: inline;
}
.bg-purple { background-color: #5B527F;
}
.bg-purple:before { content: "$color-purple";
}
.bg-purple:after { content: "#5B527F";
}
.purple { color: #5B527F;
}
.purple:after { content: " $color-purple"; display: inline;
}
.bg-gray { background-color: #555555;
}
.bg-gray:before { content: "$color-gray";
}
.bg-gray:after { content: "#555555";
}
.gray { color: #555555;
}
.gray:after { content: " $color-gray"; display: inline;
}
.bg-black { background-color: #000000;
}
.bg-black:before { content: "$color-black";
}
.bg-black:after { content: "#000000";
}
.black { color: #000000;
}
.black:after { content: " $color-black"; display: inline;
}
body, h1 { color: #fff; font-family: 'Lato', sans-serif; font-weight: 300;
}
body { background: #333; margin: 0 auto;
}
section { display: block; margin: 3rem auto; overflow: hidden; text-align: center;
}
h1 { font-size: 2.4rem; -webkit-font-smoothing: antialiased;
}
h2 { font-size: 1.2rem; font-weight: 700; -webkit-font-smoothing: antialiased;
}
.colors div[class^='bg'],
.colors div[class*=' bg'] { float: left; height: 200px; position: relative; width: 100%;
}
@media (min-width: 800px) { .colors div[class^='bg'], .colors div[class*=' bg'] { width: 33.33%; }
}
@media (min-width: 1000px) { .colors div[class^='bg'], .colors div[class*=' bg'] { width: 11.11%; }
}
.colors div[class^='bg']:before, .colors div[class^='bg']:after,
.colors div[class*=' bg']:before,
.colors div[class*=' bg']:after { background: rgba(0, 0, 0, 0.4); display: block; line-height: 1.75; position: absolute; width: 100%;
}
.colors div[class^='bg']:before,
.colors div[class*=' bg']:before { bottom: 28px;
}
.colors div[class^='bg']:after,
.colors div[class*=' bg']:after { bottom: 0;
}
h2 { float: left; width: 100%;
}
@media (min-width: 800px) { h2 { width: 33.33%; }
}
Using Sass Maps to build a color palette - Script Codes
Using Sass Maps to build a color palette - Script Codes
Home Page Home
Developer Stacy
Username stacy
Uploaded September 24, 2022
Rating 4.5
Size 3,715 Kb
Views 24,288
Do you need developer help for Using Sass Maps to build a color palette?

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!

Stacy (stacy) Script Codes
Name
CSS Grid Layout - Bring sample print inspiration to web
Knockout Text with CSS Blend Modes
CSS Grid Layout Demo
Function to use Sass Map variables without map-get
Breakpoint Sass Demo - Even better nested media queries
Color Palette sample in a simple style guide template
Shape-outside with clip-path
CSS Grid Layout with float and flexbox fallbacks
Super Moon - Shape Outside
Shape Outside - Polygon
Create amazing captions 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!