CodePen Embed - CSS Variables

<div class="container">
 <h1 class="heading text-center">CSS Variables</h1>

 <div class="content">
  <h1>Heading level 1</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis eum, distinctio vero dignissimos eveniet accusamus, sit accusantium amet at ipsa ab culpa adipisci doloribus possimus officiis ea voluptatem debitis! Repellendus.</p>

  <h2>Heading level 2</h2>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis eum, distinctio vero dignissimos eveniet accusamus, sit accusantium amet at ipsa ab culpa adipisci doloribus possimus officiis ea voluptatem debitis! Repellendus.</p>


  <h3>Heading level 3</h3>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis eum, distinctio vero dignissimos eveniet accusamus, sit accusantium amet at ipsa ab culpa adipisci doloribus possimus officiis ea voluptatem debitis! Repellendus.</p>


  <h4>Heading level 4</h4>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis eum, distinctio vero dignissimos eveniet accusamus, sit accusantium amet at ipsa ab culpa adipisci doloribus possimus officiis ea voluptatem debitis! Repellendus.</p>


  <h5>Heading level 5</h5>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis eum, distinctio vero dignissimos eveniet accusamus, sit accusantium amet at ipsa ab culpa adipisci doloribus possimus officiis ea voluptatem debitis! Repellendus.</p>

 </div>

 <h2 class="text-center">Seperate Logic from design</h2>

 <div class="content">
  <pre>
				.this-is-a-variable-declaration {
					--my-var: red;
				}

				.this-is-a-property-declaration {
					background: var(--my-var)
				}
		</pre>
 </div>

 <h2 class="text-center">Example</h2>
 <div class="content">
	 <pre>
	 	/* Default values */
		:root {
			--font-size: 1.2rem;
			--background-color: #fff;
			--text-color: #222;
		}
		/* Values in aside */
		aside {
			--font-size: 1rem;
			--background-color: #222;
			--text-color: #FAFAFA;
		}

		/* Same property declarations */
		main,
		aside {
			font-size: var(--font-size);
			color: var(--text-color);
			background-color: var(--background-color);
		}
	 </pre>

  <div class="flex">
   <aside>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut inventore fugiat vel harum rerum quia a delectus aliquid quod facere, incidunt ad. Magni vero a ullam magnam dolores odit perspiciatis!
   </aside>
   <main>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, tempore, perspiciatis. Sapiente nostrum veniam labore adipisci repellat corporis. Provident ipsa, iste repellendus deleniti maiores itaque voluptates repudiandae vel, et a!</main>
  </div>
 </div>
	
	<h2 class="text-center">Responsive Design with CSS Variables</h2>
	<div class="content">
		<section class="card-container">
			<div class="card card-a">
				<img class="card-figure" src="http://lorempixel.com/100/100/" alt="">
				<div class="card-body">
					<h4 class="card-title">Lorem ipsum dolor</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed ex illum assumenda laboriosam, nam aliquid, vero esse dolores perspiciatis facere nemo tempora id voluptatum reiciendis tenetur eaque quidem quos similique!</p></div>
			</div>
			<div class="card card-b">
				<img class="card-figure" src="http://lorempixel.com/100/100/" alt="">
				<div class="card-body">
					<h4 class="card-title">Lorem ipsum dolor</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed ex illum assumenda laboriosam, nam aliquid, vero esse dolores perspiciatis facere nemo tempora id voluptatum reiciendis tenetur eaque quidem quos similique!</p></div>
			</div>
		</section>
		<section class="card-container">
			<div class="card card-c">
				<img class="card-figure" src="http://lorempixel.com/100/100/" alt="">
				<div class="card-body">
					<h4 class="card-title">Lorem ipsum dolor</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed ex illum assumenda laboriosam, nam aliquid, vero esse dolores perspiciatis facere nemo tempora id voluptatum reiciendis tenetur eaque quidem quos similique!</p></div>
			</div>
			<div class="card card-d">
				<img class="card-figure" src="http://lorempixel.com/100/100/" alt="">
				<div class="card-body">
					<h4 class="card-title">Lorem ipsum dolor</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed ex illum assumenda laboriosam, nam aliquid, vero esse dolores perspiciatis facere nemo tempora id voluptatum reiciendis tenetur eaque quidem quos similique!</p></div>
			</div>
		</section>
	</div>
	
	<h2 class="text-center"> Fallback </h2>
	<div class="content">
		<p class="fallback">If your browser supports CSS variables, this text will be white, otherwise it will be red.
		<br> Just inspect the code for more information</p>
	</div>
</div>

* {
	box-sizing: border-box;
}

html, body {
	font-family: "Lato", sans-serif;
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
}

body {
	background: #f8f8f8;
	color: #4a4a4a;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 20px;
}

.heading {
	padding: 0 10px;
}

.text-center {
	text-align: center;
}

.container {
	padding: 20px;
}

.content {
	max-width: 960px;
	margin: 0 auto;
	background: #657b83;
	padding: 20px;
	color: #fff;
	border-radius: 4px;
	margin-bottom: 80px;
}

.flex {
	display: flex;
}

aside {
	width: 180px;
	flex-shrink: 0;
	padding: 10px;
}

main {
	padding: 10px;
}

/* CSS-Variable */

:root {
  /*Typography*/
	--font-size-1: 16px;
	--font-size-2: 20px;
	--font-size-3: 24px;
	--font-size-4: 28px;
	--font-size-5: 33px;
	--font-size-6: 40px;
	
   /*Custom styles*/
	--font-size: 16px;
  --background-color: #fff;
  --text-color: #222;
	
  /*Custom Card layout*/
	--container-display: block;
	--card-figure-display: none;
	--card-background: #fedd31;
	--card-text-color: #4a4a4a;
	
}

/* Typography */
h1 {
	font-size: var(--font-size-6);
}
h2 {
	font-size: var(--font-size-5);
}
h3 {
	font-size: var(--font-size-4);
}
h4 {
	font-size: var(--font-size-3);
}
h5 {
	font-size: var(--font-size-2);
}
h6 {
	font-size: var(--font-size-1);
}

/* Custom layouts */
/* Values in aside */
aside {
  --font-size: 14px;
  --background-color: #222;
  --text-color: #FAFAFA;
}
 
/* Same property declarations */
main,
aside {
  font-size: var(--font-size);
  color: var(--text-color);
  background-color: var(--background-color);
}

/* End of variable declarations, now we start applying property declarations */
/* No media queries needed beyond this point. */
/* This is the 'logic fold' */

.card-container {
	display: var(--container-display);
}

.card {
  display: flex;
	line-height: 1.15;
  align-items: flex-start;
	background: var(--card-background);
	color: var(--card-text-color);
	padding: 20px;
	margin: 15px;
	border-radius: 4px;
}

.card-a, .card-c {
	--card-background: #fff;
	--card-text-color: #4a4a4a;
} 

.card-figure {
  margin-right: 15px;
	display: var(--card-figure-display);
}

.card-body {
  flex: 1;
}

.card-title {
	font-weight: bold;
	margin: 0 0 10px 0;
}

/* Responsive */
@media screen and (min-width: 450px) {
	:root {
		--card-figure-display: inline-block;
		--title-font-size: 1.75rem; 
	}
}

@media screen and (min-width: 800px) {
	:root {
	--font-size-1: 16px;
	--font-size-2: 18px;
	--font-size-3: 24px;
	--font-size-4: 32px;
	--font-size-5: 40px;
	--font-size-6: 52px;
	}
}

@media screen and (min-width: 900px) {
	:root {
		--container-display: flex;
		--title-font-size: 2rem; 
	}
	
	.card-c {
		--card-background: inherit;
		--card-text-color: inherit;
	}
	.card-a, .card-d {
		--card-background: #222;
		--card-text-color: #FAFAFA;
	} 

}

.fallback {
  color: red;
}

@supports(--css: variables) {
  .fallback {
    --my-color: #fff;
    color: var(--my-color, '#fff');
  }
}

h1 {
  text-align: center;
  max-width: 600px;
  margin: 50px auto;
}

This Pen is owned by Nirajan Basnet on CodePen.

See more by @nirazanbasnet on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.