| <nav class="main-menu"> | |
| <ul> | |
| <li> | |
| <a href="">Book Store</a> | |
| </li> | |
| <li> | |
| <a href="">Readings</a> | |
| </li> | |
| <li> | |
| <a href="">Book Services</a> |
| // path to local mixin | |
| @import "../../stylesheets/breakpoint"; | |
| // @import "breakpoint"; | |
| /* 1. Using Breakpoint to do exactly what you propose */ | |
| $breakpoint-default-media: 'only screen'; | |
| $break-small: 320px; | |
| $break-medium: 580px; | |
| $break-large: 1234px; |
| section { | |
| width: 696px; | |
| } | |
| .view-store table {border-bottom: 1px solid rgb(211, 212, 210);margin-bottom: 24px;padding-bottom: 23px;clear: left;display: block; | |
| } | |
| table {width: 100%; | |
| } |
| div { | |
| height: 300px; | |
| width: 300px; | |
| float: left; | |
| margin-right: 1em; | |
| } | |
| .one { | |
| background-image: linear-gradient(-85deg, | |
| #bada55 25%, #444 25%); | |
| } |
| //////////////////////////// | |
| // SURVIVAL KIT - BREAKPOINT | |
| // breakpoint($breakpoint, $media: 'screen') | |
| //////////////////////////// | |
| $breakpoint-default-feature: min-width !default | |
| // create $breakpoint variables like so | |
| // assume $breakpoint-default-feature if only a number | |
| $breakpoint1: 500px |
Based on Survival Kit
I gave a demo last night at the first NYC Sass meetup that went over some of the key features of Sass and Compass. If you're going thru this bear in mind that the HTML is definitely overkill for this purpose, and that I'm not including any of the images in this gist. But you should get the idea.
@canarymason
| html{ | |
| height: 100%; | |
| } | |
| body { | |
| background-color: white; | |
| background-image: -webkit-repeating-linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 25px, rgba(0, 0, 0, 0.5) 25px, rgba(0, 0, 0, 0.5) 50px); | |
| background-image: -moz-repeating-linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 25px, rgba(0, 0, 0, 0.5) 25px, rgba(0, 0, 0, 0.5) 50px); | |
| background-image: -o-repeating-linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 25px, rgba(0, 0, 0, 0.5) 25px, rgba(0, 0, 0, 0.5) 50px); | |
| background-image: -ms-repeating-linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 25px, rgba(0, 0, 0, 0.5) 25px, rgba(0, 0, 0, 0.5) 50px); |
| /** | |
| * Sassy Text Shadows Test | |
| * fancy shadows generated by Sass | |
| * see https://github.com/canarymason/sassytextshadow for more information | |
| * https://rubygems.org/gems/sassy-text-shadow to install | |
| */ | |
| body { | |
| text-align: center; | |
| font-family: helvetica, georgia; |
| // convert px to em in sass. | |
| // $target-px: the value you want to convert | |
| // $context: the current pixel value of 1em | |
| @function calc-em($target-px, $context) { | |
| @return ($target-px / $context) * 1em; | |
| } |
| // generate fibonacci numbers | |
| // fib(50) #=> 1 1 2 3 5 8 13 21 34 | |
| @function fib($n) | |
| $fibonacci: () | |
| $i: 0 | |
| $j: 1 | |
| @while ($i + $j) < $n | |
| $fibonacci: append($fibonacci, $i + $j) | |
| $k: $j | |
| $j: $i |