compass-tools 0.0.1 → 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 371a319e61faa2bf9af16ea3051c7a61359e34a0
4
- data.tar.gz: 6057e514d6d1ccd5417050a82fe2935d6a3066a3
3
+ metadata.gz: eb065877023a5e8afe66c67ffae8f3f6edfd0560
4
+ data.tar.gz: 49a98bbc91d1855d770d840a5951540f336cc500
5
5
  SHA512:
6
- metadata.gz: ae2bb9d149ad68872bd67f9e1afd1160d9450f8963a01b5e512df5e33932e7e8bfea2cd638e0b7f6652de28cb98db181a5b4ac8be6015e92f09fda56a202d5f6
7
- data.tar.gz: 7979c4d222e65a3cd3aa8043d399e507a365d569c243380f54e9f18336df0faf8ed991fd2e3eb2c6d44ff93aa88e1d3519aeb2fafccc738a4934b261da529f0b
6
+ metadata.gz: 1357fd27d48b7d0cdfa9105b2ee318902b8cf81fc9df4f94cc408400879ca4348871e6d92304843fd4064cf8eb8f107c6717b05d2859f3cd8a4bcba78fdbae2d
7
+ data.tar.gz: 8add681008e4c3b3fe258e981a6806e636ec3cc2aed1556b7f3f6d877266cc803b9f2fb60dfff3d019062ca6a1d86c5eb0841c74b755adbb6d1dfa4a5775b115
data/README.md CHANGED
@@ -0,0 +1,96 @@
1
+ ## compass-tools
2
+
3
+ 自定义小工具集合
4
+
5
+ ### install:
6
+
7
+ ```bash
8
+ $ gem install compass-tools
9
+ ```
10
+
11
+ ### usage:
12
+
13
+ 在`config.rb`文件顶部增加
14
+
15
+ ```ruby
16
+ require 'compass-tools'
17
+ ```
18
+
19
+ ### example:
20
+
21
+ ```css
22
+ div.demo {
23
+ @include triangle();
24
+ }
25
+ ```
26
+
27
+ ### list:
28
+
29
+ #### 视网膜屏下使用图片精灵
30
+
31
+ ```css
32
+ .demo {
33
+ @include retina-sprite()
34
+ }
35
+ ```
36
+ 参数列表**依次**为:
37
+ + `$map` 图片精灵**必选**
38
+ + `$sprite`小图标**必选**
39
+ + `$horizontal`是否水平居中(需要设置父级`position`为非`static`的值),默认为`false`
40
+ + `$vertical`是否垂直居中(需要设置父级`position`为非`static`的值),默认为`false`
41
+
42
+ #### REM图片精灵
43
+
44
+ ```css
45
+ .demo {
46
+ @include rem-sprite()
47
+ }
48
+ ```
49
+ 前置条件:
50
+ ```html
51
+ <title>compass demo</title>
52
+ <script type="text/javascript">
53
+ (function (doc, win) {
54
+ var docEl = doc.documentElement,
55
+ resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
56
+ recalc = function () {
57
+ var clientWidth = docEl.clientWidth;
58
+ if (!clientWidth) {
59
+ return;
60
+ }
61
+ docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
62
+ };
63
+
64
+ if (!doc.addEventListener) {
65
+ return;
66
+ }
67
+ recalc();
68
+ //win.addEventListener(resizeEvt, recalc, false);
69
+ //doc.addEventListener('DOMContentLoaded', recalc, false);
70
+ })(document, window);
71
+ </script>
72
+ <link rel="stylesheet" href="...css"/>
73
+ ```
74
+
75
+ ```css
76
+ $default-rem-base: 40px !default;
77
+ ```
78
+
79
+ 参数列表**依次**为:
80
+ + `$map` 图片精灵**必选**
81
+ + `$sprite`小图标**必选**
82
+ + `$horizontal`是否水平居中(需要设置父级`position`为非`static`的值),默认为`false`
83
+ + `$vertical`是否垂直居中(需要设置父级`position`为非`static`的值),默认为`false`
84
+
85
+ #### css绘制三角形
86
+
87
+ ```css
88
+ .demo {
89
+ triangle ()
90
+ }
91
+ ```
92
+ 参数列表**依次**为:
93
+ + `$triangle-size`三角形的大小,默认10px
94
+ + `$triangle-color`三角形的颜色,默认黑色
95
+ + `$triangle-direction`三角形的方向,默认向上(可选值为`top`,`right`,`bottom`,`left`)
96
+ + `$triangle-thin`三角形的形状,默认为正三角形,设为`true`,三角形的两边大小将减小为原来的一半
@@ -14,7 +14,7 @@
14
14
  background: sprite-url($map) 0 $offsetY no-repeat;
15
15
 
16
16
  //$zoomX: ceil(image-width(sprite-path($map))/2);
17
- $zoomX: ceil(sprite-width($map/2));
17
+ $zoomX: ceil(sprite-width($map) / 2);
18
18
 
19
19
  $zoomY: auto;
20
20
 
@@ -51,4 +51,67 @@
51
51
  top: 50%;
52
52
  margin-top: -(round($height/4));
53
53
  }
54
+ }
55
+
56
+ /*
57
+ *@Description: REM使用图片精灵
58
+ */
59
+
60
+ $default-rem-base: 40px !default;
61
+
62
+ @function toRem($px) {
63
+ @if $px == 0 {
64
+ @return 0;
65
+ } @else {
66
+ @return $px / $default-rem-base * 1rem;
67
+ }
68
+
69
+ }
70
+
71
+ @mixin rem-sprite($map, $sprite, $horizontal: false, $vertical: false) {
72
+
73
+ $width: image-width(sprite-file($map, $sprite));
74
+ $height: image-height(sprite-file($map, $sprite));
75
+
76
+ $offsetY: nth(sprite-position($map,$sprite),2);
77
+
78
+ background: sprite-url($map) 0 toRem($offsetY) no-repeat;
79
+
80
+ $zoomX: toRem(sprite-width($map));
81
+
82
+ $zoomY: auto;
83
+
84
+ @include background-size($zoomX $zoomY);
85
+
86
+ display: block;
87
+ width: toRem($width);
88
+ height: toRem($height);
89
+
90
+
91
+ // set vertical or horizontal center
92
+
93
+ @if $horizontal and $vertical {
94
+ position: absolute;
95
+ left: 50%;
96
+ margin-left: -(toRem($width/2));
97
+
98
+ top: 50%;
99
+ margin-top: -(toRem($height/2));
100
+ }
101
+
102
+ @if $horizontal and not $vertical {
103
+ position: absolute;
104
+ left: 50%;
105
+ margin-left: -(toRem($width/2));
106
+
107
+ top: 0;
108
+ }
109
+
110
+ @if not $horizontal and $vertical {
111
+ position: absolute;
112
+ left: 0;
113
+
114
+ top: 50%;
115
+ margin-top: -(toRem($height/2));
116
+ }
54
117
  }
@@ -0,0 +1,25 @@
1
+ require 'compass/import-once/activate'
2
+ # Require any additional compass plugins here.
3
+
4
+ # Set this to the root of your project when deployed:
5
+ http_path = "/"
6
+ css_dir = "stylesheets"
7
+ sass_dir = "sass"
8
+ images_dir = "images"
9
+ javascripts_dir = "javascripts"
10
+
11
+ # You can select your preferred output style here (can be overridden via the command line):
12
+ # output_style = :expanded or :nested or :compact or :compressed
13
+
14
+ # To enable relative paths to assets via compass helper functions. Uncomment:
15
+ relative_assets = true
16
+
17
+ # To disable debugging comments that display the original location of your selectors. Uncomment:
18
+ # line_comments = false
19
+
20
+
21
+ # If you prefer the indented syntax, you might want to regenerate this
22
+ # project again passing --syntax sass, or you can uncomment this:
23
+ # preferred_syntax = :sass
24
+ # and then run:
25
+ # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
@@ -0,0 +1,43 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport"
6
+ content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0 user-scalable=no">
7
+ <meta content="yes" name="apple-mobile-web-app-capable">
8
+ <meta content="yes" name="apple-mobile-web-app-capable">
9
+ <meta content="telephone=no" name="format-detection">
10
+ <meta content="black" name="apple-mobile-web-app-status-bar-style">
11
+ <title>compass demo</title>
12
+ <script type="text/javascript">
13
+ (function (doc, win) {
14
+ var docEl = doc.documentElement,
15
+ resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
16
+ recalc = function () {
17
+ var clientWidth = docEl.clientWidth;
18
+ if (!clientWidth) {
19
+ return;
20
+ }
21
+ docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
22
+ };
23
+
24
+ if (!doc.addEventListener) {
25
+ return;
26
+ }
27
+ recalc();
28
+ win.addEventListener(resizeEvt, recalc, false);
29
+ doc.addEventListener('DOMContentLoaded', recalc, false);
30
+ })(document, window);
31
+ </script>
32
+ <link rel="stylesheet" href="./stylesheets/screen.css"/>
33
+
34
+ </head>
35
+ <body>
36
+ <ul id="compass-demo">
37
+ <li></li>
38
+ <li></li>
39
+ <li></li>
40
+ <li></li>
41
+ </ul>
42
+ </body>
43
+ </html>
@@ -0,0 +1,33 @@
1
+ /* Welcome to Compass.
2
+ * In this file you should write your main styles. (or centralize your imports)
3
+ * Import this file using the following HTML or equivalent:
4
+ * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
5
+
6
+ @import "compass";
7
+
8
+ @import "compass-tools";
9
+
10
+
11
+ $icons: sprite-map("icons/*.png",$spacing: 5px);
12
+
13
+ @include global-reset(); //reset
14
+
15
+ html, body {
16
+ width: 100%;
17
+ height: 100%;
18
+ }
19
+ #compass-demo {
20
+ background: #fafafa;
21
+ width: 100%;
22
+ height: 100%;
23
+ position: relative;
24
+ @include hide-text();
25
+
26
+ li {
27
+ @for $i from 1 through 4 {
28
+ &:nth-of-type(#{$i}) {
29
+ @include rem-sprite($icons, $i);
30
+ }
31
+ }
32
+ }
33
+ }
@@ -0,0 +1,140 @@
1
+ @charset "UTF-8";
2
+ /* Welcome to Compass.
3
+ * In this file you should write your main styles. (or centralize your imports)
4
+ * Import this file using the following HTML or equivalent:
5
+ * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
6
+ /*
7
+ *@Description: 视网膜屏下使用图片精灵
8
+ */
9
+ /*
10
+ *@Description: REM使用图片精灵
11
+ */
12
+ /*
13
+ *@Description: css绘制三角形
14
+ */
15
+ /* line 5, D:/Work/Ruby21-x64/lib/ruby/gems/2.1.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
16
+ html, body, div, span, applet, object, iframe,
17
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre,
18
+ a, abbr, acronym, address, big, cite, code,
19
+ del, dfn, em, img, ins, kbd, q, s, samp,
20
+ small, strike, strong, sub, sup, tt, var,
21
+ b, u, i, center,
22
+ dl, dt, dd, ol, ul, li,
23
+ fieldset, form, label, legend,
24
+ table, caption, tbody, tfoot, thead, tr, th, td,
25
+ article, aside, canvas, details, embed,
26
+ figure, figcaption, footer, header, hgroup,
27
+ menu, nav, output, ruby, section, summary,
28
+ time, mark, audio, video {
29
+ margin: 0;
30
+ padding: 0;
31
+ border: 0;
32
+ font: inherit;
33
+ font-size: 100%;
34
+ vertical-align: baseline;
35
+ }
36
+
37
+ /* line 22, D:/Work/Ruby21-x64/lib/ruby/gems/2.1.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
38
+ html {
39
+ line-height: 1;
40
+ }
41
+
42
+ /* line 24, D:/Work/Ruby21-x64/lib/ruby/gems/2.1.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
43
+ ol, ul {
44
+ list-style: none;
45
+ }
46
+
47
+ /* line 26, D:/Work/Ruby21-x64/lib/ruby/gems/2.1.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
48
+ table {
49
+ border-collapse: collapse;
50
+ border-spacing: 0;
51
+ }
52
+
53
+ /* line 28, D:/Work/Ruby21-x64/lib/ruby/gems/2.1.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
54
+ caption, th, td {
55
+ text-align: left;
56
+ font-weight: normal;
57
+ vertical-align: middle;
58
+ }
59
+
60
+ /* line 30, D:/Work/Ruby21-x64/lib/ruby/gems/2.1.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
61
+ q, blockquote {
62
+ quotes: none;
63
+ }
64
+ /* line 103, D:/Work/Ruby21-x64/lib/ruby/gems/2.1.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
65
+ q:before, q:after, blockquote:before, blockquote:after {
66
+ content: "";
67
+ content: none;
68
+ }
69
+
70
+ /* line 32, D:/Work/Ruby21-x64/lib/ruby/gems/2.1.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
71
+ a img {
72
+ border: none;
73
+ }
74
+
75
+ /* line 116, D:/Work/Ruby21-x64/lib/ruby/gems/2.1.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
76
+ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
77
+ display: block;
78
+ }
79
+
80
+ /* line 15, ../sass/screen.scss */
81
+ html, body {
82
+ width: 100%;
83
+ height: 100%;
84
+ }
85
+
86
+ /* line 19, ../sass/screen.scss */
87
+ #compass-demo {
88
+ background: #fafafa;
89
+ width: 100%;
90
+ height: 100%;
91
+ position: relative;
92
+ text-indent: -119988px;
93
+ overflow: hidden;
94
+ text-align: left;
95
+ text-transform: capitalize;
96
+ }
97
+ /* line 28, ../sass/screen.scss */
98
+ #compass-demo li:nth-of-type(1) {
99
+ background: url('../images/icons-s1d8371486b.png') 0 0 no-repeat;
100
+ -moz-background-size: 14.5rem auto;
101
+ -o-background-size: 14.5rem auto;
102
+ -webkit-background-size: 14.5rem auto;
103
+ background-size: 14.5rem auto;
104
+ display: block;
105
+ width: 0.5rem;
106
+ height: 0.5rem;
107
+ }
108
+ /* line 28, ../sass/screen.scss */
109
+ #compass-demo li:nth-of-type(2) {
110
+ background: url('../images/icons-s1d8371486b.png') 0 -0.625rem no-repeat;
111
+ -moz-background-size: 14.5rem auto;
112
+ -o-background-size: 14.5rem auto;
113
+ -webkit-background-size: 14.5rem auto;
114
+ background-size: 14.5rem auto;
115
+ display: block;
116
+ width: 0.6rem;
117
+ height: 0.525rem;
118
+ }
119
+ /* line 28, ../sass/screen.scss */
120
+ #compass-demo li:nth-of-type(3) {
121
+ background: url('../images/icons-s1d8371486b.png') 0 -1.275rem no-repeat;
122
+ -moz-background-size: 14.5rem auto;
123
+ -o-background-size: 14.5rem auto;
124
+ -webkit-background-size: 14.5rem auto;
125
+ background-size: 14.5rem auto;
126
+ display: block;
127
+ width: 14.5rem;
128
+ height: 7.35rem;
129
+ }
130
+ /* line 28, ../sass/screen.scss */
131
+ #compass-demo li:nth-of-type(4) {
132
+ background: url('../images/icons-s1d8371486b.png') 0 -8.75rem no-repeat;
133
+ -moz-background-size: 14.5rem auto;
134
+ -o-background-size: 14.5rem auto;
135
+ -webkit-background-size: 14.5rem auto;
136
+ background-size: 14.5rem auto;
137
+ display: block;
138
+ width: 2.3rem;
139
+ height: 2.3rem;
140
+ }
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: compass-tools
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.1
4
+ version: 0.0.2
5
5
  platform: ruby
6
6
  authors:
7
7
  - Lore-w
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2015-10-16 00:00:00.000000000 Z
11
+ date: 2015-10-19 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: sass
@@ -51,9 +51,16 @@ files:
51
51
  - stylesheets/_compass-tools.scss
52
52
  - stylesheets/tools/_retina-sprite.scss
53
53
  - stylesheets/tools/_triangle.scss
54
- - templates/project/demo.html
54
+ - templates/project/config.rb
55
+ - templates/project/images/icons-s1d8371486b.png
56
+ - templates/project/images/icons/1.png
57
+ - templates/project/images/icons/2.png
58
+ - templates/project/images/icons/3.png
59
+ - templates/project/images/icons/4.png
60
+ - templates/project/index.html
55
61
  - templates/project/manifest.rb
56
- - templates/project/screen.scss
62
+ - templates/project/sass/screen.scss
63
+ - templates/project/stylesheets/screen.css
57
64
  homepage: ''
58
65
  licenses: []
59
66
  metadata: {}
@@ -73,7 +80,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
73
80
  version: '0'
74
81
  requirements: []
75
82
  rubyforge_project:
76
- rubygems_version: 2.2.2
83
+ rubygems_version: 2.4.8
77
84
  signing_key:
78
85
  specification_version: 4
79
86
  summary: compass-tools
@@ -1,11 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Document</title>
6
- <link rel="stylesheet" href="./stylesheets/screen.css"/>
7
- </head>
8
- <body>
9
- <div class="demo"></div>
10
- </body>
11
- </html>
@@ -1,2 +0,0 @@
1
- // This is where you put the contents of the main stylesheet for the user's project.
2
- // It should import your sass stylesheets and demonstrate how to use them.