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"; |
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
Hi Adam --
Thanks for your message. A couple of responses for you:
1.) Current best practice would have you separate content (html), presentation(css) and interaction(js) for the cleanest possible implementation
2.) Ruby is included with every new mac and with the way development patterns are going, I'd say that a large number of front-end developers are already on a mac. Although, I'm assuming you use a PC, given your concerns about portability
3.) There's a java-based parser application (I think I include this in a few of my slides,) which you can get from http://compass.handlino.com/ which makes the parsing completely painless…
As I didn't write (or contribute) to Sass (just an enthusiastic user,) I'd be hesitant to rewrite Sass as there's a LOT already there in the community (mixing, plugins, etc) which will make your life easier as a developer. However, if you find that a javascript parser works for you and your workflow, then by all means -- I say develop it!