Skip to content

Instantly share code, notes, and snippets.

@lesjames

lesjames/config.rb

Created April 5, 2012 18:42
Show Gist options
  • Save lesjames/2313164 to your computer and use it in GitHub Desktop.
Save lesjames/2313164 to your computer and use it in GitHub Desktop.
Download ZIP
Sass Workshop
Raw
config.rb
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "elements/css/"
sass_dir = "sass/"
images_dir = "elements/img/"
javascripts_dir = "elements/js/"
# You can select your preferred output style here (can be overridden via the command line):
output_style = :nested
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sass Workshop</title>
<link rel="stylesheet" href="style.css">
<style>
.topics { width: 200px; margin: 2em auto; text-align: center; }
.strike { text-decoration: line-through; opacity: .5; }
</style>
</head>
<body>
<div class="widget">
<p>Ready for awesomeness?</p>
<p><a href="http://sass-lang.com/">Learn Sass!</a></p>
</div>
<div class="topics">
<p class=""><a target="_blank" href="http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#using_sass">Compiling</a></p>
<p class=""><a target="_blank" href="http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#import">Imports</a></p>
<p class=""><a target="_blank" href="http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#nested_rules">Nesting</a></p>
<p class=""><a target="_blank" href="http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#referencing_parent_selectors_">Parent Selector</a></p>
<p class=""><a target="_blank" href="http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#operations">Operations</a></p>
<hr />
<p class=""><a target="_blank" href="http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#variables_">Variables</a></p>
<p class=""><a target="_blank" href="http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html">Color Functions</a></p>
<p class=""><a target="_blank" href="http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#extend">Extending</a></p>
<hr />
<p class=""><a target="_blank" href="http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixins">Mixins</a></p>
<p class=""><a target="_blank" href="http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixin-arguments">Arguments</a></p>
<p class=""><a target="_blank" href="http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixin-arguments">Argument Defaults</a></p>
<hr />
<p class=""><a target="_blank" href="http://compass-style.org/">Compass</a></p>
<p class=""><a target="_blank" href="http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#control_directives">Control Directives</a></p>
<p class=""><a target="_blank" href="https://gist.github.com/1215856#file_6_media_queries.scss">Content Blocks</a></p>
</div>
</body>
</html>
Raw
style.css
.widget {
margin: 3em auto;
padding: 2em 3em;
width: 300px;
background: #ccc;
text-align: center;
}
.widget a {
display: inline-block;
padding: 1em;
background: #900;
color: white;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment