Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <nav id="navbar">
  <header>Sass Basics</header>
  <input type="checkbox" id="nav-toggle" class="nav-toggle" checked>
  <ul class="nav">
    <a href="#introduction" class="nav-link"><li>introduction</li></a>
    <a href="#preprocessing" class="nav-link"><li>preprocessing</li></a>
    <a href="#variables" class="nav-link"><li>variables</li></a>
    <a href="#nesting" class="nav-link"><li>nesting</li></a>
    <a href="#partials" class="nav-link"><li>partials</li></a>
    <a href="#import" class="nav-link"><li>import</li></a>
    <a href="#mixins" class="nav-link"><li>mixins</li></a>
    <a href="#entend/inheritance" class="nav-link"><li>entend/inheritance</li></a>
    <a href="#operators" class="nav-link"><li>operators</li></a>
    <a href="#reference" class="nav-link"><li>reference</li></a>
  </ul>
  <label for="nav-toggle" class="hamburger"><i class="fas fa-bars" class="burger"></i></label>
</nav>

<main id="main-doc">
  <section class="main-section" id="introduction">
    <header>introduction</header>
    <atricle>
      <p>
        Sass is the most mature, stable, and powerful professional grade CSS extension language in the world with features that don't exist in CSS yet like: 
      </p>
      <ul>
        <li>variables</li>
        <li>nesting</li>
        <li>mixins</li>
        <li>inheritance</li>
      </ul>
      <p>
        and other nifty goodies that make writing CSS fun again.
      </p>
    </atricle>
  </section><!--introduction-->
  <section class="main-section" id="preprocessing">
    <header>preprocessing</header>
    <atricle>
      <p>
        Sass will take your preprocessed Sass file and save it as a normal CSS file that you can use in your website.
      </p>
      <p>
        The most direct way to make this happen is in your terminal. Once Sass is installed, you can compile your Sass to CSS using the <code>sass</code> command. You'll need to tell Sass which file to build from, and where to output CSS to. For example, running <code>sass input.scss output.css</code> from your terminal would take a single Sass file, <code>input.scss</code>, and compile that file to <code>output.css</code>.
      </p>
      <p>
        You can also watch individual files or directories with the <code>--watch</code> flag. The watch flag tells Sass to watch your source files for changes, and re-compile CSS each time you save your Sass. If you wanted to watch (instead of manually build) your <code>input.scss</code> file, you'd just add the watch flag to your command, like so:
        <code class="code-block">sass --watch input.scss output.css</code>
        You can watch and output to directories by using folder paths as your input and output, and separating them with a colon. In this example:
        <code class="code-block">sass --watch app/sass:public/stylesheets</code>
        Sass would watch all files in the <code>app/sass</code> folder for changes, and compile CSS to the <code>public/stylesheets</code> folder.
      </p>
    </atricle>
  </section><!--preprocession-->
  <section class="main-section" id="variables">
    <header>variables</header>
    <article>
      <p>
        Think of variables as a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you'll want to reuse. Sass uses the <code>$</code> symbol to make something a variable. Here's an example:
      </p>
      <code class="code-block">
        SCSS:
        <xmp>
          $font-stack:    Helvetica, sans-serif;
          $primary-color: #333;

          body {
          font: 100% $font-stack;
          color: $primary-color;
          }
        </xmp>
        Sass:
        <xmp>
          $font-stack:    Helvetica, sans-serif
          $primary-color: #333

          body
          font: 100% $font-stack
          color: $primary-color
        </xmp>
        output CSS:
        <xmp>
          body {
          font: 100% Helvetica, sans-serif;
          color: #333;
          }
        </xmp>
      </code>
      <p>
        When the Sass is processed, it takes the variables we define for the <code>$font-stack</code> and <code>$primary-color</code> and outputs normal CSS with our variable values placed in the CSS. This can be extremely powerful when working with brand colors and keeping them consistent throughout the site.
      </p>
    </article>
  </section><!--variables-->
  <section class="main-section" id="nesting">
    <header>nesting</header>
    <article>
      <p>
        When writing HTML you've probably noticed that it has a clear nested and visual hierarchy. CSS, on the other hand, doesn't.
      </p>
      <p>
        Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. Be aware that overly nested rules will result in over-qualified CSS that could prove hard to maintain and is generally considered bad practice.
      </p>
      <p>
        With that in mind, here's an example of some typical styles for a site's navigation:
      </p>
      <code class="code-block">
        SCSS
        <xmp>
          nav {
          ul {
          margin: 0;
          padding: 0;
          list-style: none;
          }

          li { display: inline-block; }

          a {
          display: block;
          padding: 6px 12px;
          text-decoration: none;
          }
          }
        </xmp>
        Sass
        <xmp>
          nav
          ul
          margin: 0
          padding: 0
          list-style: none

          li
          display: inline-block

          a
          display: block
          padding: 6px 12px
          text-decoration: none

        </xmp>
        CSS
        <xmp>
          nav ul {
          margin: 0;
          padding: 0;
          list-style: none;
          }
          nav li {
          display: inline-block;
          }
          nav a {
          display: block;
          padding: 6px 12px;
          text-decoration: none;
          }
        </xmp>
        <p>
          You'll notice that the <code>ul</code>, <code>li</code>, and <code>a</code> selectors are nested inside the nav selector. This is a great way to organize your CSS and make it more readable.
      </code>
      </p>
    </article>
  </section><!--nesting-->
<section class="main-section" id="partials">
  <header>partials</header>
  <article>
    <p>
      You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is simply a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @import directive.
    </p>
  </article>
</section><!--partials-->
<section class="main-section" id="import">
  <header>import</header>
  <article>
    <p>
      CSS has an import option that lets you split your CSS into smaller, more maintainable portions. The only drawback is that each time you use @import in CSS it creates another HTTP request. Sass builds on top of the current CSS @import but instead of requiring an HTTP request, Sass will take the file that you want to import and combine it with the file you're importing into so you can serve a single CSS file to the web browser.
    </p>
    <p>
      Let's say you have a couple of Sass files, <code>_reset.scss</code> and <code>base.scss</code>. We want to import <code>_reset.scss</code> into <code>base.scss</code>.
    </p>
    <code class="code-block">
      SCSS
      <xmp>
        // _reset.scss
        html,
        body,
        ul,
        ol {
        margin:  0;
        padding: 0;
        }
      </xmp>
      <xmp>
        // base.scss
        @import 'reset';
        body {
        font: 100% Helvetica, sans-serif;
        background-color: #efefef;
        }
      </xmp>
      Sass
      <xmp>
        // _reset.sass
        html,
        body,
        ul,
        ol
        margin:  0
        padding: 0
      </xmp>
      <xmp>
        // base.sass
        @import reset
        body
        font: 100% Helvetica, sans-serif
        background-color: #efefef
      </xmp>
      CSS
      <xmp>
        html,
        body,
        ul,
        ol {
        margin:  0;
        padding: 0;
        }
        body {
        font: 100% Helvetica, sans-serif;
        background-color: #efefef;
        }
      </xmp>
    </code>
    <p>
      Notice we're using <code>@import 'reset';</code> in the <code>base.scss</code> file. When you import a file you don't need to include the file extension <code>.scss</code>. Sass is smart and will figure it out for you.
    </p>
  </article>
</section><!--import-->
<section class="main-section" id="mixins">
  <header>mixins</header>
  <article>
    <p>
      Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. A good use of a mixin is for vendor prefixes. Here's an example for transform.
    </p>
    <code class="code-block">
      SCSS
      <xmp>
        @mixin transform($property) {
        -webkit-transform: $property;
        -ms-transform: $property;
        transform: $property;
        }
        .box { @include transform(rotate(30deg)); }
      </xmp>
      Sass
      <xmp>
        =transform($property)
        -webkit-transform: $property
        -ms-transform: $property
        transform: $property
        .box
        +transform(rotate(30deg))
      </xmp>
      CSS
      <xmp>
        .box {
        -webkit-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
        transform: rotate(30deg);
        }
      </xmp>
      <p>
        To create a mixin you use the <code>@mixin</code> directive and give it a name. We've named our mixin transform. We're also using the variable <code>$property</code> inside the parentheses so we can pass in a transform of whatever we want. After you create your mixin, you can then use it as a CSS declaration starting with @include followed by the name of the mixin.
    </code>
    </p>
  </article>
</section><!--mixins-->
<section class="main-section" id="entend/inheritance">
  <header>entend/inheritance</header>
  <article>
    <p>
      This is one of the most useful features of Sass. Using <code>@extend</code> lets you share a set of CSS properties from one selector to another. It helps keep your Sass very DRY. In our example we're going to create a simple series of messaging for errors, warnings and successes using another feature which goes hand in hand with extend, placeholder classes. A placeholder class is a special type of class that only prints when it is extended, and can help keep your compiled CSS neat and clean.
    </p>
    <code class="code-block">
      SCSS
      <xmp>
        /* This CSS will print because %message-shared is extended. */
        %message-shared {
        border: 1px solid #ccc;
        padding: 10px;
        color: #333;
        }

        // This CSS won't print because %equal-heights is never extended.
        %equal-heights {
        display: flex;
        flex-wrap: wrap;
        }

        .message {
        @extend %message-shared;
        }

        .success {
        @extend %message-shared;
        border-color: green;
        }

        .error {
        @extend %message-shared;
        border-color: red;
        }

        .warning {
        @extend %message-shared;
        border-color: yellow;
        }
      </xmp>
      Sass
      <xmp>
        /* This CSS will print because %message-shared is extended. */
        %message-shared
        border: 1px solid #ccc
        padding: 10px
        color: #333


        // This CSS won't print because %equal-heights is never extended.
        %equal-heights
        display: flex
        flex-wrap: wrap


        .message
        @extend %message-shared


        .success
        @extend %message-shared
        border-color: green


        .error
        @extend %message-shared
        border-color: red


        .warning
        @extend %message-shared
        border-color: yellow
      </xmp>
      CSS
      <xmp>
        /* This CSS will print because %message-shared is extended. */
        .message, .success, .error, .warning {
        border: 1px solid #ccc;
        padding: 10px;
        color: #333;
        }

        .success {
        border-color: green;
        }

        .error {
        border-color: red;
        }

        .warning {
        border-color: yellow;
        }
      </xmp>
    </code>
    <p>
      What the above code does is tells <code>.message</code>, <code>.success</code>, <code>.error</code>, and <code>.warning</code> to behave just like <code>%message-shared</code>. That means anywhere that <code>%message-shared</code> shows up, <code>.message</code>, <code>.success</code>, <code>.error</code>, & <code>.warning</code> will too. The magic happens in the generated CSS, where each of these classes will get the same CSS properties as <code>%message-shared</code>. This helps you avoid having to write multiple class names on HTML elements.
    </p>
    <p>
      You can extend most simple CSS selectors in addition to placeholder classes in Sass, but using placeholders is the easiest way to make sure you aren't extending a class that's nested elsewhere in your styles, which can result in unintended selectors in your CSS.
    </p>
    <p>
      Note that the CSS in <code>%equal-heights</code> isn't generated, because <code>%equal-heights</code> is never extended.
    </p>
  </article>
</section><!--entend/inheritance-->
<section class="main-section" id="operators">
  <header>operators</header>
  <p>
    Doing math in your CSS is very helpful. Sass has a handful of standard math operators like +, -, *, /, and %. In our example we're going to do some simple math to calculate widths for an <code>aside</code> & <code>article</code>.
  </p>
  <code class="code-block">
    SCSS
    <xmp>
      .container {
      width: 100%;
      }

      article[role="main"] {
      float: left;
      width: 600px / 960px * 100%;
      }

      aside[role="complementary"] {
      float: right;
      width: 300px / 960px * 100%;
      }
    </xmp>
    Sass
    <xmp>
      .container
      width: 100%


      article[role="main"]
      float: left
      width: 600px / 960px * 100%


      aside[role="complementary"]
      float: right
      width: 300px / 960px * 100%

    </xmp>
    CSS
    <xmp>
      .container {
      width: 100%;
      }

      article[role="main"] {
      float: left;
      width: 62.5%;
      }

      aside[role="complementary"] {
      float: right;
      width: 31.25%;
      }  
    </xmp>
  </code>
  <p>
    We've created a very simple fluid grid, based on 960px. Operations in Sass let us do something like take pixel values and convert them to percentages without much hassle.
  </p>
</section><!--operators-->
<section class="main-section" id="reference">
  <header>reference</header>
  <article>
    <ul>
      <li>All the documentation in this page is taken from <a href="https://sass-lang.com/guide" target="_blank">Sass</a></li>
    </ul>
  </article>
</section><!--reference-->
</main>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto&display=swap');
/*variables*/
$clr-primary:white;
$clr-secondary:#333;
$ff-primary:'Roboto', sans-serif;
$ff-secondary:'Open Sans', sans-serif;
$fs:1rem;
$fs-sm:$fs+0.25rem;
$fs-m:$fs+0.65rem;
$fs-b:$fs+1rem;
$space-sm:0.5rem;
$space-m:$space-sm+$fs-m;
$space-b:$space-sm+$fs-b;

/*mixins*/
@mixin flex($direction,$justify,$align) {
  display:flex;
  flex-direction:$direction;
  justify-content:$justify;
  align-items:$align;
}

@mixin hamburger-transform($property,$effect){
  /*for the nav area*/
  transform-origin:top;
  transform:$property;
  transition:transform $effect;
}

@mixin hamburger-opacity($value, $effect){
  /*for the word inside nav area*/
  opacity:$value;
  transition:opacity $effect;
}

*{
  padding:0;
  margin:0;
  box-sizing:border-box;
}

body{
  max-width:100vw;
}

nav{
  background:$clr-primary;
  /*for the hamburger location*/
  position:fixed;
  top:0;
  left:0;
  width:100%;
  min-width:300px;
  /*layout*/
  display:grid;
  grid-template-columns: 10% 5% 85%;
  grid-template-rows:4rem auto;
  header{
    grid-area:1/3/2/4;
    width:100%;
    @include flex(row,center,center);
    font-family:$ff-primary;
    font-size:$fs-b;
  }
  .nav{
    grid-area:2/1/3/4;
    position:absolute;
    top:100%;
    left:0;
    background:$clr-primary;
    width:100%;
    /*hamburger-menu when open*/
    @include hamburger-transform(scale(1,1),250ms ease-in-out);
    .nav-link{
      @include flex(row,flex-start,center);  
      margin-left:1rem;
      text-decoration:none;
      list-style:none;
      text-transform:uppercase;
      color:$clr-secondary;
      font-family:$ff-secondary;
      font-size:$fs;
      padding:0.75rem 1rem;
      /*hamburger-menu when open*/
      @include hamburger-opacity(1,250ms ease-in-out);
    }
    .nav-link:hover,
    .nav-link:focus{
      color:$clr-primary;
      background:rgba($clr-secondary,0.8);
    }
    .nav-link:active{
      color:$clr-primary;
      background:$clr-secondary;
    }
  }
  /*hamburger menu*/
  .nav-toggle{
    display:none;
  }

  .hamburger{
    grid-area:1/1/2/2;
    @include flex(row,center,center);
    position:absolute;
    top:0;
    left:0;
    font-size:$fs-b;
    padding:0.5rem;
    margin:0.5rem 1.5rem;

  }
  .hamburger:hover,
  .hamburger:focus{
    border:1px solid $clr-secondary;
  }
  .hamburger:active{
    background:$clr-secondary;
    color:$clr-primary;
  }

  .nav-toggle:checked~.nav{
    /*hamburger-menu when close*/
    @include hamburger-transform(scale(1,0),250ms ease-in-out);
  }
  .nav-toggle:checked~ul a{
    /*hamburger-menu when close*/
    @include hamburger-opacity(0,150ms ease-in-out);
  }
}

main{
  margin-top:4rem+$space-b;
  margin-bottom:$space-b;
  font-family:$ff-primary;
  text-align:left;
  width:100%;
  
  section{
    
    padding:1.5rem;
    header{
      font-size:$fs-m;
      text-transform:uppercase;
      margin-bottom:$space-sm;
    }
    /*font-size and spacing*/
    p,ul,code{
      font-size:$fs-sm;
      margin-bottom:$space-sm;
    }
    code.code-block {
      display:block;
      background:rgba($clr-secondary,0.1);
      border-radius:4px;
      padding:1rem;
      xmp{
        font-size:$fs;
      }
    }
    ul{
      margin-left:2rem;
    }
  }

  section:first-child, section+section{
    margin-bottom:$space-m;
  }
}

@media screen and (min-width:1020px){
  body{
    padding:0;
    margin:0;
    nav{
      width:30%;
      .nav{
        height:100%;
      }
    }
    .nav-toggle:checked~.nav{
      /*hamburger-menu when close*/
      @include hamburger-transform(scale(1,1),250ms ease-in-out);
    }
    .nav-toggle:checked~ul a{
      /*hamburger-menu when close*/
      @include hamburger-opacity(1,150ms ease-in-out);
    }
    .hamburger{
      display:none;
    }
    main{
      margin:0;
      float:right;
      width:70%;
    }
  }




}


              
            
!

JS

              
                //fcc test runner: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
              
            
!
999px

Console