compass-tools 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 371a319e61faa2bf9af16ea3051c7a61359e34a0
+  data.tar.gz: 6057e514d6d1ccd5417050a82fe2935d6a3066a3
+SHA512:
+  metadata.gz: ae2bb9d149ad68872bd67f9e1afd1160d9450f8963a01b5e512df5e33932e7e8bfea2cd638e0b7f6652de28cb98db181a5b4ac8be6015e92f09fda56a202d5f6
+  data.tar.gz: 7979c4d222e65a3cd3aa8043d399e507a365d569c243380f54e9f18336df0faf8ed991fd2e3eb2c6d44ff93aa88e1d3519aeb2fafccc738a4934b261da529f0b

data/lib/compass-tools.rb

@@ -0,0 +1,6 @@
+require 'compass'
+Compass::Frameworks.register('compass-tools',
+ :stylesheets_directory => File.join(File.dirname(__FILE__), '..',
+ 'stylesheets'),
+ :templates_directory => File.join(File.dirname(__FILE__), '..',
+ 'templates'))

data/stylesheets/_compass-tools.scss

@@ -0,0 +1,6 @@
+// This is your framework's main stylesheet. Use it to import all default modules.
+
+@import "tools/retina-sprite";
+@import "tools/triangle";
+
+

data/stylesheets/tools/_retina-sprite.scss

@@ -0,0 +1,54 @@
+@charset "utf-8";
+
+/*
+ *@Description: 视网膜屏下使用图片精灵
+ */
+@mixin retina-sprite($map, $sprite, $horizontal: false, $vertical: false) {
+
+    $width: image-width(sprite-file($map, $sprite));
+    $height: image-height(sprite-file($map, $sprite));
+
+    //$offsetX: ceil(nth(sprite-position($map,$sprite),1)/2);
+    $offsetY: ceil(nth(sprite-position($map,$sprite),2)/2);
+
+    background: sprite-url($map) 0 $offsetY no-repeat;
+
+    //$zoomX: ceil(image-width(sprite-path($map))/2);
+    $zoomX: ceil(sprite-width($map/2));
+
+    $zoomY: auto;
+
+    @include background-size($zoomX $zoomY);
+
+    display: block;
+    width: ceil($width/2)+1;
+    height: ceil($height/2)+1;
+
+
+    // set vertical or horizontal center
+
+    @if $horizontal and $vertical {
+        position: absolute;
+        left: 50%;
+        margin-left: -(round($width/4));
+
+        top: 50%;
+        margin-top: -(round($height/4));
+    }
+
+    @if $horizontal and not $vertical {
+        position: absolute;
+        left: 50%;
+        margin-left: -(round($width/4));
+
+        top: 0;
+    }
+
+    @if not $horizontal and $vertical {
+        position: absolute;
+        left: 0;
+
+        top: 50%;
+        margin-top: -(round($height/4));
+    }
+}

data/stylesheets/tools/_triangle.scss

@@ -0,0 +1,65 @@
+@charset "utf-8";
+
+/*
+ *@Description: css绘制三角形
+ */
+
+@mixin triangle ($triangle-size: 10px, $triangle-color: #000, $triangle-direction: top, $triangle-thin: false) {
+
+    display: block;
+    width: 0;
+    height: 0;
+
+    @if $triangle-thin {
+
+        @if $triangle-direction == top {
+            border-left: $triangle-size solid transparent;
+            border-right: $triangle-size solid transparent;
+            border-bottom: $triangle-size solid $triangle-color;
+        }
+
+        @if $triangle-direction == bottom {
+            border-left: $triangle-size solid transparent;
+            border-right: $triangle-size solid transparent;
+            border-top: $triangle-size solid $triangle-color;
+        }
+
+        @if $triangle-direction == left {
+            border-top: $triangle-size solid transparent;
+            border-right: $triangle-size solid $triangle-color;
+            border-bottom: $triangle-size solid transparent;
+        }
+
+        @if $triangle-direction == right {
+            border-left: $triangle-size solid $triangle-color;
+            border-top: $triangle-size solid transparent;
+            border-bottom: $triangle-size solid transparent;
+        }
+
+    } @else {
+
+        @if $triangle-direction == top {
+            border-left: $triangle-size/2 solid transparent;
+            border-right: $triangle-size/2 solid transparent;
+            border-bottom: $triangle-size solid $triangle-color;
+        }
+
+        @if $triangle-direction == bottom {
+            border-left: $triangle-size/2 solid transparent;
+            border-right: $triangle-size/2 solid transparent;
+            border-top: $triangle-size solid $triangle-color;
+        }
+
+        @if $triangle-direction == left {
+            border-top: $triangle-size/2 solid transparent;
+            border-right: $triangle-size solid $triangle-color;
+            border-bottom: $triangle-size/2 solid transparent;
+        }
+
+        @if $triangle-direction == right {
+            border-left: $triangle-size solid $triangle-color;
+            border-top: $triangle-size/2 solid transparent;
+            border-bottom: $triangle-size/2 solid transparent;
+        }
+    }
+}

data/templates/project/demo.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+    <link rel="stylesheet" href="./stylesheets/screen.css"/>
+</head>
+<body>
+    <div class="demo"></div>
+</body>
+</html>

data/templates/project/manifest.rb

@@ -0,0 +1,12 @@
+# Make sure you list all the project template files here in the manifest.
+stylesheet 'screen.sass', :media => 'screen, projection'
+
+stylesheet 'screen.scss', :media => 'screen, projection'
+html 'demo.html'
+image 'screenshot.png'
+description "compass tools"
+help "This will install a demo (HTML and Scss) to show you how to use compass-tools"
+welcome_message %Q{
+Example usage: div { @include triangle()}
+See demo.html and demo.scss for example usage.
+}

data/templates/project/screen.scss

@@ -0,0 +1,2 @@
+// This is where you put the contents of the main stylesheet for the user's project.
+// It should import your sass stylesheets and demonstrate how to use them.

metadata

@@ -0,0 +1,80 @@
+--- !ruby/object:Gem::Specification
+name: compass-tools
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+platform: ruby
+authors:
+- Lore-w
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2015-10-16 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: sass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.4.8
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.4.8
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 1.0.3
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 1.0.3
+description: compass-tools
+email:
+- metro-cpu@hotmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- LICENSE
+- README.md
+- lib/compass-tools.rb
+- stylesheets/_compass-tools.scss
+- stylesheets/tools/_retina-sprite.scss
+- stylesheets/tools/_triangle.scss
+- templates/project/demo.html
+- templates/project/manifest.rb
+- templates/project/screen.scss
+homepage: ''
+licenses: []
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.2.2
+signing_key: 
+specification_version: 4
+summary: compass-tools
+test_files: []