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 +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