cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <html>  
<head>    
<title>SCSS Demonstration</title>    
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href='https://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<!-- Bootstrap -->
</head>
<body>
<div id="wrapper">
	<header>
		<h1>Programming Your Styles with Some Sass (SCSS)!</h1>
		<nav>
			<ul>
				<li><a href="http://sass-lang.com/">The Sass Homepage</a></li>
				<li><a href="http://sass-lang.com/guide">Learn Sass Basics</a></li>
        <li><a href="http://sass.codeschool.com/levels/1">Take a  Codeschool Lesson</a></li>
				<li><a href="http://sassmeister.com/">See How Sass is Compiled</a></li>
			</ul>
		</nav>
	</header>

		<article class="content span6">
			<h2>What's this Sass and SCSS All About?</h2>
			<p>Sass is an extension to CSS. It is a pre-processing tool that compiles SCSS code into usable CSS for any website. It allows you to do the following:</p>
      <ul>
        <li><strong>Create reusable variables</strong>, like base-color, background-color, font-stack. Basically anything that gets repeated a lot can be turned into a variable</li>
        <li><strong>Create nested selectors using nesting</strong> for when you want to target selectors inside of other selectors (like a navbar where you code the nav, ul, li, and a elements)</li>
        <li><strong>Nest Your Pseudo-selectors</strong> group all your anchor hover states together with <code>&:link</code>, <code>&:hover</code>, <code>&:visited</code>...</li>
        <li><strong>Compile multiple stylesheets into one</strong> and reduce the http requests</li>
      </ul>
      <h2>How Can I Get Started?</h2>
			<p>How can you get started you ask? This is my recommendation:</p>
        <ol>
          <li><a href="http://sass.codeschool.com/levels/1">Watch a good tutorial from CodeSchool</a></li>
          <li>Test out your ideas using one of the following tools:
          <ul>
            <li><a href="http://sass.codeschool.com/levels/1">CodeSchool</a></li>
            <li><a href="https://codepen.io/">CodePen</a>: that's what I did</li>
            <li><a href="http://sassmeister.com/">Sassmeister</a>: I also tested this tool out as well</li>
            </ul>
          </li>
          <li>Review concepts on the Sass: <a href="http://sass-lang.com/guide">Sass Basics Page</a></li>
          <li>If you want to further develop your Sass skills, take Sass's advice and <a href="http://sass-lang.com/install">start using Sass</a></li>
        </ol>
		</article>
	</section>
</div>
</body>
</html>
            
          
!
            
              // SCSS Variables:
$body-font-stack: Lato, sans-serif;
$header-font-stack: 'Courgette', cursive;
$bg-color: #e9e9e9;

// Nesting 
body {
  background: {
    color: $bg-color;
  }
  font: {
    size: 1.1em;
    family: $body-font-stack;
  }
}
h1, h2, h3, h4 {
  font: {
    family: $header-font-stack;
  }
}

// Nesting pseudo-classes
a {
  font: {
    weight: bold;
  }
 &:link {
   color: #336699;
 }
 &:visited {
    color: #0033ff;
  }
 &:hover {
   color: #6699cc;
 } 
 &:active {
   color: #333333;
 }
}
// Coding the navbar (this is where it gets good)
nav {
  ul {
    background-color: #111111;
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
  li {
    display: inline-block;
  }
  a {
    display: block;
    padding: .5em 1em;
    text-decoration: none;
    // Set a hover glow
    &:hover {
      text-shadow: 0 0 15px rgba(244,244,244,.4);
    } 
    &:link {
   color: #336699;
   }
   &:visited {
      color: #ff00ff;
    }
   &:hover {
     color: #33ff33;
   } 
   &:active {
     color: #333333;
   }
  }
 }
code {
  background-color: rgba(255,255,255,.7);
  padding: .3em;
}

            
          
!
999px
Loading ..................

Console