Skip to content

Instantly share code, notes, and snippets.

@Thargelion

Thargelion/SassMeister-input-HTML.html

Created November 21, 2014 22:51
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Thargelion/afb7a03c0efd07f91c73 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Thargelion/afb7a03c0efd07f91c73 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Thargelion created this gist Nov 21, 2014.
    8 changes: 8 additions & 0 deletions SassMeister-input-HTML.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    <nav id="botonera">
    <ul>
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Quienes somos</a></li>
    <li><a href="#">Servicios</a></li>
    <li><a href="#">Contacto</a></li>
    </ul>
    </nav>
    29 changes: 29 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    // ----
    // Sass (v3.4.7)
    // Compass (v1.0.1)
    // ----

    #botonera{
    ul{
    list-style-type:none;
    margin:0;
    padding:0;
    li a{
    display: block;
    background: skyblue;
    width: 200px;
    padding: 10px 0;
    margin: 5px auto;
    text:{
    transform: uppercase;
    align: center;
    decoration: none;
    color: white;
    }//cierro text
    &:hover{ //& llama al selector actual
    background: #f90;
    text-transform:lowercase;
    }
    }//cierro li a
    }
    }
    20 changes: 20 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,20 @@
    #botonera ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    }
    #botonera ul li a {
    display: block;
    background: skyblue;
    width: 200px;
    padding: 10px 0;
    margin: 5px auto;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    text-color: white;
    }
    #botonera ul li a:hover {
    background: #f90;
    text-transform: lowercase;
    }
    8 changes: 8 additions & 0 deletions SassMeister-rendered.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    <nav id="botonera">
    <ul>
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Quienes somos</a></li>
    <li><a href="#">Servicios</a></li>
    <li><a href="#">Contacto</a></li>
    </ul>
    </nav>