compass-example 1.0

data/README.md

@@ -0,0 +1,47 @@
+Compass Extension Example
+==========================
+
+There are a lot of cool things that Sass and Compass can do. This is a little compass extension that shows examples on how to fully utilize Compass and Sass to create your own extensions to use.
+
+## How can I use this?
+
+Look at it, install it, and see how it is used and how to utilize it yourself. Then make your own. I recomend starting with [Team Sass' extension template](https://github.com/Team-Sass/Compass-Extension-Template).
+
+## What is inside?
+
+There is example code on the following areas:
+
+### Creating Compass extensions
+
+### Using Compass extensions to make templates
+
+### How to write Sass Code
+* Variables
+* Functions
+* Mixins
+* Logical Expressions
+* Debugging
+
+### TODO: How to publish your extension
+
+
+## What other resources are there?
+
+The internet. Google is your friend. Below are some helpful links of places that have excellent help.
+
+* [Sass homepage](http://sass-lang.com/)
+* [Sass Documentation](http://sass-lang.com/docs/yardoc/_index.html)
+* [Compass homepage](http://compass-style.org/)
+* The Github repositories of [Team Sass](https://github.com/Team-Sass) contain excellent examples of top-notch extensions.
+
+
+
+<hr>
+
+## Special Thanks
+Super special thanks goes out to [Nathan Weizenbaum](https://github.com/nex3/) for Sass, [Chris Eppstein](https://github.com/chriseppstein/) for Compass, and [Mason Wendell](https://github.com/canarymason/), [Scott Kellum](https://github.com/scottkellum/) and [Sam Richard](https://github.com/canarymason/snugug)--- who are all amazing Sass / Compass developers. Most of the examples here stem from usages in the code they and I have written.
+
+## License
+[Creative Commons Attribution 3.0](http://creativecommons.org/licenses/by/3.0). Go wild.
+
+If you're able to link me to your extension so I can see what you've built, that'd be awesome!

data/lib/example.rb

@@ -0,0 +1,15 @@
+require 'compass'
+
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+Compass::Frameworks.register('example', :path => extension_path)
+
+
+module Example
+  VERSION = "1.0"
+  DATE = "2013-03-10"
+end
+
+
+# module Sass::Script::Functions
+#
+# end

data/stylesheets/_example.scss

@@ -0,0 +1,8 @@
+// Welcome to the example Compass extension. It's purpose is just to show you
+// how to do things. Go wild in each sub-file...
+
+@import 'examples/variables';
+@import 'examples/functions';
+@import 'examples/mixins';
+@import 'examples/logic';
+@import 'examples/debugging';

data/stylesheets/examples/_debugging.scss

@@ -0,0 +1,28 @@
+//////////////////////////////
+//// Debugging
+//////////////////////////////
+
+// Warnings can be set within code in case the user is using incorrect syntax.
+// The Sass file will still compile, this is just a warning to alert the user of
+// their deeds.
+@function display-warning-message($do_it: TRUE) {
+  @if ($do_it) {
+    // We use the @warn directive to display a message when the file compiles.
+    @warn "This is an example warning message";
+  }
+  @else {
+    @warn "Why you no want?";
+  }
+
+  @return $do_it;
+}
+
+// Debug messages can be set using the @debug directive, similar to @warn.
+@function display-debug-message($example_value: FALSE) {
+  @if ($example_value) {
+    // The value has been set, let's put it into a debug message.
+    @debug "The value sent to this function is: " $example_value;
+  }
+
+  @return $example_value;
+}

data/stylesheets/examples/_functions.scss

@@ -0,0 +1,21 @@
+//////////////////////////////
+//// Functions
+//////////////////////////////
+
+// Function are similar to functions in other languages. They perform some sort
+// of mathematical or logical computation, and return a value.
+
+// Functions begin with an @function then the function name.
+@function darker-color($color) { // Each input variable must be assigned within the parentheses.
+  // All functions must have an @return directive with a final value.
+  @return darken($color, 20%);
+}
+
+// A default value may be selected by adding either a variable or value.
+@function addition-example(
+  $first: 5,
+  $second : $default-add
+) {
+
+  @return $first + $second;
+}

data/stylesheets/examples/_logic.scss

@@ -0,0 +1,55 @@
+//////////////////////////////
+//// Logic / Control Directives
+//////////////////////////////
+
+
+// Basic logic can be added into a function and mixin.
+@function is-it-bigger-than-5($variable) {
+  // @if can be added in to check the truthiness.
+  @if ($variable > 5) {
+    @return TRUE;
+  } // An if can be extended with a @else if.
+  @else if (type-of($variable) != 'number') { // type-of can be used to determine the type of a variable.
+    @return null;
+  } // Finally, @else can be used if no if's are true.
+  @else {
+    @return FALSE;
+  }
+}
+
+// For loops can be created to go through a number of items.
+@mixin example-for-loop() {
+  // @for $variable_name from {starting number} through {ending number}.
+  @for $i from 8 through 10 {
+    // To include a varible within a string, wrap it in #{$variable}
+    .item-#{$i} {
+      -foo: $i;
+    }
+  }
+}
+
+// @each can be used to itterate over a list variable.
+@function is-there-a-number-in-my-list($list) {
+  @if (type-of($list) != 'list') {
+    @return FALSE;
+  }
+
+  // @each $list-item-variable in $list-variable.
+  @each $item in $list {
+     @if (type-of($item) == 'number') {
+      @return TRUE;
+    }
+  }
+
+  @return FALSE;
+}
+
+// @while can be used to itterate until the expression is false.
+@mixin lets-get-it-to-zero($number: 5) {
+  @while $number > 0 {
+    .while-loop-#{$number} {
+      -bar: 100% / $number;
+    }
+    $number: $number - 1;
+  }
+}

data/stylesheets/examples/_mixins.scss

@@ -0,0 +1,24 @@
+//////////////////////////////
+//// Mixins
+//////////////////////////////
+
+// Mixins do not return values, but instead print out CSS.
+// Anything within the mixin will be printed out just like if it were added to
+// the Sass file itself.
+@mixin right-to-left() {
+  html[dir="rtl"] & {
+    @content;
+  }
+}
+
+// Mixins can also have paramaters when they are set up.
+@mixin example-create-button($color) {
+  padding: 1em 3em;
+  margin: .5em 1em;
+  cursor: pointer;
+  color: $color;
+
+  // Other functions or mixins can also be called within a mix.
+  border: 2px solid darker-color($color);
+  @include border-radius(5px);
+}

data/stylesheets/examples/_variables.scss

@@ -0,0 +1,41 @@
+//////////////////////////////
+//// Variables
+//////////////////////////////
+
+// Declare a variable by having the $variable_name followed by a colon. For
+// variables within your extension, you also want to add '!default' before the
+// semicolon. This will only set the variable if it has not been set already.
+$foo          : 'bar'     !default;
+$default-add  : 2         !default;
+
+// There are several types of variables within Sass. Each has their own use.
+
+// Numbers simple decimal numbers, with or without units attached to them.
+$number       : 1.5       !default;
+$number-unit  : 2.2em     !default;
+
+// Strings of text can have quotes or not.
+$string-1     : foo       !default;
+$string-2     : 'bar'     !default;
+$string-3     : "gold"    !default;
+
+// Colors are set with either a string keyword, the Hex code or RGBA value.
+$color-1      : red                     !default;
+$color-2      : #66B360                 !default;
+$color-3      : rgba(255, 255, 0, 0.75) !default;
+
+// Booleans are just true, or false.
+$true         : true                    !default;
+$false        : false                   !default;
+
+// Variables can also be set to null.
+$null         : null                    !default;
+
+// Lists are any of the previous variables within a comma-seperated or spaced
+// list. They can be used for multiple values, or font families.
+$list-space   : 1em 2em 3em 4em         !default;
+$list-comma   : Arial, Helvetica, "Nimbus Sans L", sans-serif   !default;
+
+// A list can also have a list inside it:
+$list-list    : "type-1" 1em 2em,
+                "type-2" 3em 4em        !default;

data/templates/project/javascript.js

@@ -0,0 +1,3 @@
+// Just a sample JavaScript file.
+
+document.write("Hello World!");

data/templates/project/manifest.rb

@@ -0,0 +1,23 @@
+# Description
+description "Description of your Compass Template"
+
+# Stylesheets
+file 'screen.scss', :like => :stylesheet, :media => 'screen, projection'
+
+# JavaScript
+file 'javascript.js', :like => :javascript, :to => 'scripts.js'
+
+# Compass Extension Help
+help %Q{
+  Having trouble with this? Well it is just an example! Go read more http://github.com/ChinggizKhan
+}
+
+# Compass Extension Welcome Message
+#  Users will see this when they create a new project using this template.
+welcome_message %Q{
+
+  Welcome to an example compass extension!
+
+  It is here just to show you how to do things and probably shouldn't be used on your projects.
+
+}

data/templates/project/screen.scss

@@ -0,0 +1,4 @@
+// This file will get output into the user's Sass folder.
+@import "example";
+
+

metadata

@@ -0,0 +1,109 @@
+--- !ruby/object:Gem::Specification 
+name: compass-example
+version: !ruby/object:Gem::Version 
+  hash: 15
+  prerelease: 
+  segments: 
+  - 1
+  - 0
+  version: "1.0"
+platform: ruby
+authors: 
+- Ian Carrico
+autorequire: 
+bindir: bin
+cert_chain: []
+
+date: 2013-03-10 00:00:00 Z
+dependencies: 
+- !ruby/object:Gem::Dependency 
+  name: sass
+  prerelease: false
+  requirement: &id001 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        hash: 15
+        segments: 
+        - 3
+        - 2
+        - 0
+        version: 3.2.0
+  type: :runtime
+  version_requirements: *id001
+- !ruby/object:Gem::Dependency 
+  name: compass
+  prerelease: false
+  requirement: &id002 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        hash: 45
+        segments: 
+        - 0
+        - 12
+        - 1
+        version: 0.12.1
+  type: :runtime
+  version_requirements: *id002
+description: A example compass extension to show how to build you own.
+email: 
+- github@iancarrico.com
+executables: []
+
+extensions: []
+
+extra_rdoc_files: []
+
+files: 
+- README.md
+- CHANGELOG.md
+- lib/example.rb
+- stylesheets/_example.scss
+- stylesheets/examples/_debugging.scss
+- stylesheets/examples/_logic.scss
+- stylesheets/examples/_mixins.scss
+- stylesheets/examples/_variables.scss
+- stylesheets/examples/_functions.scss
+- templates/project/javascript.js
+- templates/project/screen.scss
+- templates/project/manifest.rb
+homepage: 
+licenses: []
+
+post_install_message: 
+rdoc_options: []
+
+require_paths: 
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 3
+      segments: 
+      - 0
+      version: "0"
+required_rubygems_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 23
+      segments: 
+      - 1
+      - 3
+      - 6
+      version: 1.3.6
+requirements: []
+
+rubyforge_project: compass-example
+rubygems_version: 1.8.15
+signing_key: 
+specification_version: 3
+summary: A simple compass extension gem with documentation on the many wonders an extension can provide.
+test_files: []
+