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 +4 -4
- data/README.md +96 -0
- data/stylesheets/tools/_retina-sprite.scss +64 -1
- data/templates/project/config.rb +25 -0
- data/templates/project/images/icons-s1d8371486b.png +0 -0
- data/templates/project/images/icons/1.png +0 -0
- data/templates/project/images/icons/2.png +0 -0
- data/templates/project/images/icons/3.png +0 -0
- data/templates/project/images/icons/4.png +0 -0
- data/templates/project/index.html +43 -0
- data/templates/project/sass/screen.scss +33 -0
- data/templates/project/stylesheets/screen.css +140 -0
- metadata +12 -5
- data/templates/project/demo.html +0 -11
- data/templates/project/screen.scss +0 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: eb065877023a5e8afe66c67ffae8f3f6edfd0560
|
4
|
+
data.tar.gz: 49a98bbc91d1855d770d840a5951540f336cc500
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
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
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
@@ -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.
|
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-
|
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/
|
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.
|
83
|
+
rubygems_version: 2.4.8
|
77
84
|
signing_key:
|
78
85
|
specification_version: 4
|
79
86
|
summary: compass-tools
|
data/templates/project/demo.html
DELETED