compass-tools 0.0.1 → 0.0.2

Sign up to get free protection for your applications and to get access to all the features.
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.