Created
December 5, 2011 03:28
-
-
Save nickcooley/1432176 to your computer and use it in GitHub Desktop.
SASS Sample Files
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| text-align: center; | |
| > #container { | |
| text-align:left; | |
| margin:0 auto; | |
| width:500px; | |
| } | |
| } | |
| header { | |
| h1 { | |
| font-size:26px; margin-bottom:26px; | |
| } | |
| } | |
| div[role="main"] { | |
| @include background-image(linear-gradient(lighten($color1, 30%), lighten($color2, 30%))); | |
| @include border-radius($border-radius * 3.5, $border-radius * 3.5 ); | |
| border:3px solid $color2; | |
| padding:$border-radius; | |
| margin-bottom:25px; | |
| ul { | |
| padding-top:14px; | |
| } | |
| li { | |
| color:$fontcolor1; | |
| margin-bottom:12px; | |
| } | |
| } | |
| button { | |
| //leverages the buttons mixin | |
| @include buttons(); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <!--[if lt IE 7]> <html lang="en" class="no-js ie6"> <![endif]--> | |
| <!--[if IE 7]> <html lang="en" class="no-js ie7"> <![endif]--> | |
| <!--[if IE 8]> <html lang="en" class="no-js ie8"> <![endif]--> | |
| <!--[if gt IE 8]><!--> | |
| <html class='no-js' lang='en'> | |
| <!--<![endif]--> | |
| <head> | |
| <meta charset='utf-8' /> | |
| <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible' /> | |
| <title></title> | |
| <meta content='' name='description' /> | |
| <meta content='' name='author' /> | |
| <meta content='width=device-width, initial-scale=1.0' name='viewport' /> | |
| <link id="cssFile" href='stylesheets/screen1.css' media='all' rel='stylesheet' /> | |
| </head> | |
| <body> | |
| <div id='container'> | |
| <header> | |
| <h1>Here is my sample </h1> | |
| </header> | |
| <div id='main' role='main'> | |
| <ul> | |
| <li>List Item 1</li> | |
| <li>List Item 2</li> | |
| <li>List Item 3</li> | |
| <li> | |
| <button>Here is a button</button> | |
| <button class="primary">Here is a button</button> | |
| <button class="disabled">Here is a button</button> | |
| </li> | |
| </ul> | |
| </div> | |
| <footer> | |
| <button>Here is a button</button> | |
| <button class="primary">Here is a button</button> | |
| <button class="disabled">Here is a button</button> | |
| </footer> | |
| </div> | |
| <div class="changeCSS"> | |
| <button id="chgCSS" class="bigButton">Change CSS</button> | |
| </div> | |
| <script type="text/javascript" language="JavaScript" src="javascripts/jquery.min.js"></script> | |
| <script> | |
| $('#chgCSS').click(function(){ | |
| var CSSvals = ['stylesheets/screen1.css', 'stylesheets/screen.css', 'stylesheets/screen2.css'], | |
| setVal = ""; | |
| switch ($('#cssFile').attr('href')) { | |
| case CSSvals[0]: | |
| setVal = CSSvals[1]; | |
| break; | |
| case CSSvals[1]: | |
| setVal = CSSvals[2]; | |
| break; | |
| default: | |
| setVal = CSSvals[0]; | |
| break; | |
| } | |
| $('#cssFile').attr('href',setVal); | |
| }) | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| Houses First Variation of Variables for Sample | |
| */ | |
| $color1: #63bdd7; | |
| $color2: #9c4228; | |
| $fontcolor1: #333; | |
| $fontcolor2: #9c4228; | |
| $border-radius: 7px; | |
| @import "basics"; //This command brings in file _basics.scss to consume these variables and output CSS |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Welcome to Compass. | |
| * In this file you should write your main styles. (or centralize your imports) | |
| * Import this file using the following HTML or equivalent: | |
| * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */ | |
| @import "compass/reset"; | |
| @import "compass/reset"; | |
| @import "compass/css3"; | |
| @import "compass/layout"; | |
| @import "compass/utilities"; | |
| @import "compass/utilities/general/clearfix"; | |
| @import "compass/css3/pie"; | |
| @import "compass/css3/transform"; | |
| //Uses Sass' color modifying functions to adjust colors | |
| $color1: #a9c4e5; | |
| $color2: darken($color1, 40); | |
| $fontcolor1: darken($color1, 80); | |
| $fontcolor2: lighten($color1, 50); | |
| $border-radius: 4px; | |
| @import "basics"; |
a-laughlin
commented
Jan 19, 2012
via email
•
Thanks Nick,
The portability concern comes from years with nonprofits where we got old
or donated systems and frequently had to switch between them, so installing
anything meant re-installing on another system in the near future. As you
guessed, they were PCs. :)
Considering that HTML templating engines exist (e.g. Handlebars), I'm
surprised that no javascript CSS templating engines exist. They'd be handy
when prototyping with Backbone, though agreed that it's probably not worth
the effort of porting to JS.
Adam
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment