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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

              
                <div class="container">
  <div class="nav-icon">
    <div class="line-1"></div>
    <div class="line-2"></div>
    <div class="line-3"></div>
  </div>
  <nav id="navbar">
    <header>
      <img src="http://lesscss.org/public/img/less_logo.png" alt="less logo">
      <p>It's CSS, with just a little more.</p>
    </header>
    <div class="navigation">
      <a href="#Overview" class="nav-link active">Overview</a>
      <a href="#Variables" class="nav-link">Variables</a>
      <a href="#Mixins" class="nav-link">Mixins</a>
      <a href="#Nesting" class="nav-link">Nesting</a>
      <a href="#Operations" class="nav-link">Operations</a>
      <a href="#Escaping" class="nav-link">Escaping</a>
      <a href="#Functions" class="nav-link">Functions</a>
      <a href="#Scope" class="nav-link">Scope</a>
      <a href="#Importing" class="nav-link">Importing</a>
      <a href="#Reference" class="nav-link">Reference</a>
    </div>
  </nav>
  <main id="main-doc">
    <section class="main-section" id="Overview">
      <header>Overview</header>
      <p>Less (which stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS. This is the official documentation for Less, the language and Less.js, the JavaScript tool that converts your Less styles to CSS styles.</p>
      <p>Because Less looks just like CSS, learning it is a breeze. Less only makes a few convenient additions to the CSS language, which is one of the reasons it can be learned so quickly.</p>
      <ul>
        <li>For detailed documentation on Less language features, see <a href="http://lesscss.org/features/" target="_blank">Features</a></li>
        <li>For a list of Less Built-in functions, see <a href="http://lesscss.org/functions/" target="_blank">Functions</a></li>
        <li>For detailed usage instructions, see <a href="http://lesscss.org/usage/" target="_blank"> Using Less.js</a></li>
        <li>For third-party tools for Less, see <a href="http://lesscss.org/tools/" target="_blank"> Tools</a></li>
      </ul>
      <p>What does Less add to CSS? Here's a quick overview of features.</p>
    </section>
    <section class="main-section" id="Variables">
      <header>Variables</header>
      <p>These are pretty self-explanatory:</p>
      <pre class="line-numbers">
<code class="language-less">
  @nice-blue: #5B83AD;
  @light-blue: @nice-blue + #111;
    
  #header {
    color: @light-blue;
  }    
</code>
</pre>
      <p>Outputs:</p>
      <pre class="line-numbers">
<code class="language-css">
  #header {
    color: #6c94be;
  }
</code>
</pre>
      <p><a href="http://lesscss.org/features/#variables-feature" target="_blank">Learn More About Variables</a></p>
    </section>
    <section class="main-section" id="Mixins">
      <header>Mixins</header>
      <p>Mixins are a way of including ("mixing in") a bunch of properties from one rule-set into another rule-set. So say we have the following class:</p>
      <pre class="line-numbers">
<code class="language-css">
  .bordered {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
  }  
</code>  
</pre>
      <p>And we want to use these properties inside other rule-sets. Well, we just have to drop in the name of the class where we want the properties, like so:</p>
      <pre class="line-numbers">
<code class="language-less">
  #menu a {
    color: #111;
    .bordered;
  }
    
  .post a {
    color: red;
    .bordered;
  }  
</code>
</pre>
      <p>The properties of the <code>.bordered</code> class will now appear in both <code>#menu a</code> and <code>.post a</code>. (Note that you can also use #ids as mixins.)</p>
    </section>
    <section class="main-section" id="Nesting">
      <header>Nesting</header>
      <ul class="submenu">
        <li><a href="#nesting_at_rules">Nested At-Rules and Bubbling</a></li>
      </ul>
      <p>Less gives you the ability to use nesting instead of, or in combination with cascading. Let's say we have the following CSS:</p>
      <pre class="line-numbers">
<code class="language-css">
  #header {
    color: black;
  }
  #header .navigation {
    font-size: 12px;
  }
  #header .logo {
    width: 300px;
  }  
</code>
</pre>
      <p>In Less, we can also write it this way:</p>
      <pre class="line-numbers">
<code class="language-less">
  #header {
    color: black;
    .navigation {
      font-size: 12px;
    }
    .logo {
      width: 300px;
    }
  }  
</code>
</pre>
      <p>The resulting code is more concise, and mimics the structure of your HTML.</p>
      <p>You can also bundle pseudo-selectors with your mixins using this method. Here's the classic clearfix hack, rewritten as a mixin (<code>&</code> represents the current selector parent):</p>
      <pre class="line-numbers">
<code class="language-less">
  .clearfix {
    display: block;
    zoom: 1;
    
    &:after {
      content: " ";
      display: block;
      font-size: 0;
      height: 0;
      clear: both;
      visibility: hidden;
    }
  }  
</code>  
</pre>
      <p><a href="http://lesscss.org/features/#parent-selectors-feature" target="_blank">Learn More About Parent Selectors</a></p>
      <h2 id="nesting_at_rules">Nested At-Rules and Bubbling</h2>
      <p>At-rules such as <code>@media</code> or <code>@supports</code> can be nested in the same way as selectors. The at-rule is placed on top and relative order against other elements inside the same ruleset remains unchanged. This is called bubbling.</p>
      <pre class="line-numbers">
<code class="language-less">
  .component {
    width: 300px;
    @media (min-width: 768px) {
      width: 600px;
      @media  (min-resolution: 192dpi) {
        background-image: url(/img/retina2x.png);
      }
    }
    @media (min-width: 1280px) {
      width: 800px;
    }
  }  
</code>
</pre>
      <p>outputs:</p>
      <pre class="line-numbers">
<code class="language-css">
  .component {
    width: 300px;
  }
  @media (min-width: 768px) {
    .component {
      width: 600px;
    }
  }
  @media (min-width: 768px) and (min-resolution: 192dpi) {
    .component {
      background-image: url(/img/retina2x.png);
    }
  }
  @media (min-width: 1280px) {
    .component {
      width: 800px;
    }
  }
</code>
</pre>
    </section>
    <section class="main-section" id="Operations">
      <header>Operations</header>
      <p>Arithmetical operations <code>+</code>, <code>-</code>, <code>*</code>, <code>/</code> can operate on any number, color or variable. If it is possible, mathematical operations take units into account and convert numbers before adding, subtracting
        or comparing them. The result has leftmost explicitly stated unit type. If the conversion is impossible or not meaningful, units are ignored. Example of impossible conversion: px to cm or rad to %.</p>
      <pre class="line-numbers">
<code class="language-less">
  // numbers are converted into the same units
  @conversion-1: 5cm + 10mm; // result is 6cm
  @conversion-2: 2 - 3cm - 5mm; // result is -1.5cm
    
  // conversion is impossible
  @incompatible-units: 2 + 5px - 3cm; // result is 4px
    
  // example with variables
  @base: 5%;
  @filler: @base * 2; // result is 10%
  @other: @base + @filler; // result is 15%
</code>
</pre>
      <p>Multiplication and division do not convert numbers. It would not be meaningful in most cases - a length multiplied by a length gives an area and css does not support specifying areas. Less will operate on numbers as they are and assign explicitly
        stated unit type to the result.</p>
      <pre class="line-numbers">
<code class="language-less">
  @base: 2cm * 3mm; // result is 6cm
</code>
</pre>
      <p>You can also do arithemtic on colors:</p>
      <pre class="line-numbers">
<code class="language-less">
  @color: #224488 / 2; //results in #112244
  background-color: #112244 + #111; // result is #223355
</code>
</pre>
      <p>However, you may find Less's <a href="http://lesscss.org/functions/#color-operations" target="_blank"> Color Functions</a> more useful.</p>
    </section>
    <section class="main-section" id="Escaping">
      <header>Escaping</header>
      <p>Escaping allows you to use any arbitrary string as property or variable value. Anything inside <code>~"anything"</code> or <code>~'anything'</code> is used as is with no changes except interpolation.</p>
      <pre class="line-numbers">
<code class="language-less">
  @min768: ~"(min-width: 768px)";
  .element {
    @media @min768 {
      font-size: 1.2rem;
    }
  }
</code>
</pre>
      <p>results in:</p>
      <pre class="line-numbers">
<code class="language-css">
  @media (min-width: 768px) {
    .element {
      font-size: 1.2rem;
    }
  }
</code>
</pre>
    </section>
    <section class="main-section" id="Functions">
      <header>Functions</header>
      <p>Less provides a variety of functions which transform colors, manipulate strings and do maths. They are documented fully in the function reference.</p>
      <p>Using them is pretty straightforward. The following example uses percentage to convert 0.5 to 50%, increases the saturation of a base color by 5% and then sets the background color to one that is lightened by 25% and spun by 8 degrees:</p>
      <pre class="line-numbers">
<code class="language-less">
  @base: #f04615;
  @width: 0.5;
    
  .class {
    width: percentage(@width); // returns `50%`
    color: saturate(@base, 5%);
    background-color: spin(lighten(@base, 25%), 8);
  }
</code>
</pre>
      <p><a href="http://lesscss.org/functions/">See: Function Reference</a></p>
    </section>
    <section class="main-section" id="Scope">
      <header>Scope</header>
      <p>Scope in Less is very similar to that of programming languages. Variables and mixins are first looked for locally, and if they aren't found, the compiler will look in the parent scope, and so on.</p>
      <pre class="line-numbers">
<code class="language-less">
  @var: red;

  #page {
    @var: white;
    #header {
      color: @var; // white
    }
  }
</code>
</pre>
      <p>Mixin and variable definitions do not have to be placed before a line where they are referenced. So the following Less code is identical to the previous example:</p>
      <pre class="line-numbers">
<code class="language-less">
  @var: red;

  #page {
    #header {
      color: @var; // white
    }
    @var: white;
  }
</code>
</pre>
    </section>
    <section class="main-section" id="Importing">
      <header>Importing</header>
      <p>Importing works pretty much as expected. You can import a .less file, and all the variables in it will be available. The extension is optionally specified for .less files.</p>
      <pre class="line-numbers">
<code class="language-less">
  @import "library"; // library.less
  @import "typo.css";
</code>
</pre>
      <p><a href="http://lesscss.org/#importing" target="_blank">Learn More About Imports</a></p>
    </section>
    <section class="main-section" id="Reference">
      <header>Reference</header>
      <p>All content of this page is part of the full documentation you can find on the <span class="logo">{less}</span> official <a href="http://lesscss.org/" target="_blank">site</a>.</p>
    </section>
  </main>
</div>
              
            
!

CSS

              
                @import url("https://fonts.googleapis.com/css?family=Oswald|Raleway:400,500,600");
.container {
  display: flex;
  overflow-x: hidden;
}

.nav-icon {
  position: absolute;
  top: 15px;
  right: 15px;
  display: inline-block;
  cursor: pointer;
  z-index: 999;
}
.line-1,
.line-2,
.line-3 {
  width: 35px;
  height: 5px;
  background-color: #fff;
  margin: 6px 0;
  transition: 0.4s;
}
.open .line-1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.open .line-2 {
  opacity: 0;
}

.open .line-3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}
nav {
  display: flex;
  flex-direction: column;
  flex-basis: 40%;
  position: fixed;
  top: 0;
  height: 100%;
  width: 300px;
  color: #fff;
  background-color: #1d365d;
}
nav header {
  text-align: center;
  font-family: "Oswald", sans-serif;
  font-size: 1.3em;
  font-weight: 500;
  padding: 20px;
  background-color: #111f36;
}
nav header img {
  max-width: 40%;
  height: auto;
}
.navigation {
  display: flex;
  flex-direction: column;
}
.nav-link {
  text-decoration: none;
  font-family: "Oswald", sans-serif;
  font-size: 1.2em;
  font-weight: 400;
  color: #fff;
  padding: 10px 20px 10px 30px;
}
.active,
.nav-link:hover {
  background-color: #2f5897;
  transition: all 0.5s cubic-bezier(0.29, 1.42, 0.79, 1);
}

main {
  flex-basis: 60%;
  position: relative;
  margin-left: 300px;
}
.main-section {
  min-height: 100vh;
  padding-top: 60px;
  padding-left: 50px;
  padding-right: 100px;
}
.main-section header {
  font-family: "Oswald", sans-serif;
  font-size: 2.2em;
  font-weight: 400;
  color: #111f36;
}
.submenu {
  list-style-type: none;
}
.submenu li {
  font-family: "Oswald", sans-serif;
  font-size: 1.2em;
  line-height: 1.2;
}
.submenu li a {
  text-decoration: none;
  color: #1d365d;
}
.main-section h2 {
  font-family: "Raleway", sans-serif;
  color: #1d365d;
}
.main-section p {
  font-family: "Raleway", sans-serif;
  line-height: 1.6;
}

.main-section img {
  display: block;
  margin: 0 auto;
}
ul {
  font-family: "Raleway", sans-serif;
  line-height: 1.6;
}
code {
  color: #428bca;
}
a[href*="http"] {
  color: #43759e;
  text-decoration: none;
}
a[href*="http"]:hover {
  text-decoration: underline;
}
span.logo {
  font-size: 1.3em;
  font-weight: 600;
  color: #428bca;
}
@media (max-width: 576px) {
  .container {
    flex-direction: column;
  }
  nav {
    position: relative;
    min-width: 100vw;
  }
  nav header img {
    max-width: 25%;
    height: auto;
  }
  .nav-link {
    display: none;
  }
  main {
    position: relative;
    margin-left: 0;
  }
  .main-section {
    padding-top: 60px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .main-section img {
    max-width: 25%;
  }
}

              
            
!

JS

              
                $(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {
    var target = $(this.hash);
    if (target.length) {
      $("html, body").animate(
        {
          scrollTop: target.offset().top
        },
        500
      );
    }
  });
});

$(".nav-icon").click(function() {
  var that = $(this);
  that.toggleClass("open");
  if (that.hasClass("open")) {
    $(".nav-link").css("display", "flex");
  } else {
    $(".nav-link").removeAttr("style");
  }
});

$(".nav-link").on("click", function() {
  $(this)
    .siblings()
    .removeClass("active");
  $(this).addClass("active");
});

              
            
!
999px

Console