sassmagic 0.1.4 → 0.1.5
Sign up to get free protection for your applications and to get access to all the features.
- data/Readme.md +8 -3
- data/bin/sassmagic +2 -2
- data/lib/sassmagic/remote.rb +1 -2
- data/lib/sassmagic/reset.rb +1 -0
- data/lib/sassmagic.rb +6 -3
- data/stylesheets/sassmagic/README.md +188 -0
- data/stylesheets/sassmagic/helpers/_helpers.scss +24 -0
- data/stylesheets/sassmagic/helpers/_mixins.scss +4 -0
- data/stylesheets/sassmagic/helpers/_variables.scss +0 -0
- data/stylesheets/sassmagic/helpers/mixins/README.md +120 -0
- data/stylesheets/sassmagic/helpers/mixins/_backgroundTransparent.scss +14 -0
- data/stylesheets/sassmagic/helpers/mixins/_content.scss +15 -0
- data/stylesheets/sassmagic/helpers/mixins/_ellipsis-overflow.scss +9 -0
- data/stylesheets/sassmagic/helpers/mixins/_float.scss +9 -0
- data/stylesheets/sassmagic/helpers/mixins/_px2rem.scss +28 -0
- data/stylesheets/sassmagic/helpers/mixins/_resizable.scss +4 -0
- data/stylesheets/sassmagic/helpers/mixins/_stickyFooter.scss +38 -0
- data/stylesheets/sassmagic/helpers/mixins/_visuallyHidden.scss +25 -0
- data/stylesheets/sassmagic/main.scss +0 -0
- metadata +16 -12
- data/stylesheets/sassmagic/_+.scss +0 -10
- data/stylesheets/sassmagic/functions/_list.scss +0 -27
- data/stylesheets/sassmagic/functions/_support.scss +0 -14
- data/stylesheets/sassmagic/mixins/_clearfix.scss +0 -19
- data/stylesheets/sassmagic/mixins/_ellipsis-overflow.scss +0 -7
- data/stylesheets/sassmagic/mixins/_float.scss +0 -8
- data/stylesheets/sassmagic/mixins/_font-face.scss +0 -20
- data/stylesheets/sassmagic/mixins/_image.scss +0 -19
- data/stylesheets/sassmagic/mixins/_inline-block.scss +0 -8
- data/stylesheets/sassmagic/mixins/_placeholder-wrapper.scss +0 -15
data/Readme.md
CHANGED
@@ -14,18 +14,23 @@ sudo gem install sassmagic
|
|
14
14
|
|
15
15
|
start:
|
16
16
|
|
17
|
-
####sassmagic init
|
17
|
+
#### sassmagic init
|
18
18
|
|
19
19
|
or
|
20
20
|
|
21
|
-
####sassmagic
|
21
|
+
#### sassmagic create [project]
|
22
22
|
|
23
|
-
other
|
23
|
+
other cml
|
24
24
|
|
25
25
|
same to sass
|
26
26
|
|
27
27
|
eg: sassmagic --style nested --x test.scss test.css
|
28
28
|
|
29
|
+
eg: sassmagic --watch sass/main.scss:stylesheet/main.css
|
30
|
+
|
31
|
+
|
32
|
+
|
33
|
+
|
29
34
|
### configuration
|
30
35
|
|
31
36
|
|
data/bin/sassmagic
CHANGED
@@ -2,7 +2,7 @@
|
|
2
2
|
# The command line Sass parser.
|
3
3
|
THIS_FILE = File.symlink?(__FILE__) ? File.readlink(__FILE__) : __FILE__
|
4
4
|
begin
|
5
|
-
require File.dirname(THIS_FILE) + '/../lib/
|
5
|
+
require File.dirname(THIS_FILE) + '/../lib/sassmagic'
|
6
6
|
rescue LoadError
|
7
7
|
end
|
8
8
|
|
@@ -44,7 +44,7 @@ if ARGV.include?'init'
|
|
44
44
|
isneedcompile = false
|
45
45
|
end
|
46
46
|
|
47
|
-
if ARGV.include?'
|
47
|
+
if ARGV.include?'create'
|
48
48
|
Sassmagic::Installers::Base.new(ARGV[-1])
|
49
49
|
isneedcompile = false
|
50
50
|
end
|
data/lib/sassmagic/remote.rb
CHANGED
@@ -27,7 +27,6 @@ module Sass
|
|
27
27
|
def find_relative uri, base, options
|
28
28
|
_find @root + base + uri, options
|
29
29
|
end
|
30
|
-
|
31
30
|
def find uri, options
|
32
31
|
_find @root + uri, options
|
33
32
|
end
|
@@ -100,7 +99,7 @@ module Sass
|
|
100
99
|
|
101
100
|
# fetch the content
|
102
101
|
Net::HTTP.start(uri.host, uri.port, :use_ssl => uri.scheme == 'https') do |http|
|
103
|
-
|
102
|
+
# debugger
|
104
103
|
response = http.get uri.request_uri
|
105
104
|
response.value
|
106
105
|
|
data/lib/sassmagic/reset.rb
CHANGED
data/lib/sassmagic.rb
CHANGED
@@ -10,11 +10,14 @@ ENV['SASS_ENV'] ||= 'development'
|
|
10
10
|
# Compass::Frameworks.register('sassmagic', stylesheets_directory: load_path)
|
11
11
|
# rescue LoadError
|
12
12
|
# end
|
13
|
-
|
14
|
-
$:.unshift"#{File.dirname(__FILE__)}"
|
15
|
-
require 'debugger'
|
13
|
+
# require 'debugger'
|
16
14
|
# debugger
|
15
|
+
# $:.unshift"#{File.dirname(__FILE__)}"
|
16
|
+
$:.unshift(load_path + '/')
|
17
|
+
|
18
|
+
|
17
19
|
# require 'sass'
|
20
|
+
|
18
21
|
require 'sassmagic/utils'
|
19
22
|
require 'sassmagic/remote'
|
20
23
|
require 'sassmagic/reset'
|
@@ -0,0 +1,188 @@
|
|
1
|
+
##目录结构
|
2
|
+
|
3
|
+
sassmagic/
|
4
|
+
|
|
5
|
+
|– base/
|
6
|
+
| |– _reset.scss # Reset/normalize
|
7
|
+
| |– _typography.scss # Typography rules
|
8
|
+
| ... # Etc…
|
9
|
+
|
|
10
|
+
|– components/
|
11
|
+
| |– _buttons.scss # Buttons
|
12
|
+
| |– _carousel.scss # Carousel
|
13
|
+
| |– _cover.scss # Cover
|
14
|
+
| |– _dropdown.scss # Dropdown
|
15
|
+
| ... # Etc…
|
16
|
+
|
|
17
|
+
|– partials/
|
18
|
+
| |– _navigation.scss # Navigation
|
19
|
+
| |– _grid.scss # Grid system
|
20
|
+
| |– _header.scss # Header
|
21
|
+
| |– _footer.scss # Footer
|
22
|
+
| |– _sidebar.scss # Sidebar
|
23
|
+
| |– _forms.scss # Forms
|
24
|
+
| ... # Etc…
|
25
|
+
|
|
26
|
+
|– pages/
|
27
|
+
| |– _home.scss # Home specific styles
|
28
|
+
| |– _contact.scss # Contact specific styles
|
29
|
+
| ... # Etc…
|
30
|
+
|
|
31
|
+
|– themes/
|
32
|
+
| |– _theme.scss # Default theme
|
33
|
+
| |– _admin.scss # Admin theme
|
34
|
+
| ... # Etc…
|
35
|
+
|
|
36
|
+
|– helpers/
|
37
|
+
| |– _variables.scss # Sass Variables
|
38
|
+
| |– _functions.scss # Sass Functions
|
39
|
+
| |– _mixins.scss # Sass Mixins
|
40
|
+
| |– _helpers.scss # Class & placeholders helpers
|
41
|
+
|
|
42
|
+
|– vendors/
|
43
|
+
| |– _bootstrap.scss # Bootstrap
|
44
|
+
| |– _jquery-ui.scss # jQuery UI
|
45
|
+
| ... # Etc…
|
46
|
+
|
|
47
|
+
|
|
48
|
+
`– main.scss # primary Sass file
|
49
|
+
|
50
|
+
###目录结构描述
|
51
|
+
|
52
|
+
目录结构采用的是常见的7-1模式的结构:7个文件夹,1个文件。基本上,你需要将所有的部件放进7个不同的文件夹和一个位于根目录的文件(通常命名为 main.scss)中——这个文件编译时会引用所有文件夹而形成一个CSS样式表。
|
53
|
+
|
54
|
+
####base
|
55
|
+
|
56
|
+
`base/`文件夹存放项目中的模板文件。在这里,可以找到重置文件、排版规范文件或者一个样式表(我通常命名为`_base.scss`)——定义一些HTML元素公认的标准样式。
|
57
|
+
|
58
|
+
####components
|
59
|
+
|
60
|
+
对于小型组件来说,有一个`components/`文件夹来存放。相对于`partials/`的宏观(定义全局线框结构),`components/`更专注于局部组件。该文件夹包含各类具体模块,基本上是所有的独立模块,比如一个滑块、一个加载块、一个部件……由于整个网站或应用程序主要由微型模块构成,`components/`中往往有大量文件。
|
61
|
+
|
62
|
+
####partials
|
63
|
+
|
64
|
+
`partials/`文件夹存放构建网站或者应用程序使用到的布局部分。该文件夹存放网站主体(头部、尾部、导航栏、侧边栏...)的样式表、栅格系统甚至是所有表单的CSS样式。(备注:常常也命名为`layout/`)。
|
65
|
+
|
66
|
+
####pages
|
67
|
+
|
68
|
+
如果页面有特定的样式,最好将该样式文件放进`pages/`文件夹并用页面名字。例如,主页通常具有独特的样式,因此可以在`pages/`下包含一个`_home.scss`以实现需求。
|
69
|
+
|
70
|
+
####themes
|
71
|
+
|
72
|
+
在大型网站和应用程序中,往往有多种主题。虽有多种方式管理这些主题,但是我个人更喜欢把它们存放在`themes/`文件夹中。
|
73
|
+
|
74
|
+
####helpers
|
75
|
+
|
76
|
+
`helpers/`文件夹包含了整个项目中使用到的Sass辅助工具,这里存放着每一个全局变量、函数、混合宏和占位符。(备注,常常也命名为`utils/`)
|
77
|
+
|
78
|
+
该文件夹的经验法则是,编译后这里不应该输出任何CSS,单纯的只是一些Sass辅助工具。
|
79
|
+
|
80
|
+
####vendors
|
81
|
+
|
82
|
+
最后但并非最终的,大多数的项目都有一个`vendors/`文件夹,用来存放所有外部库和框架(Normalize, Bootstrap, jQueryUI, FancyCarouselSliderjQueryPowered……)的CSS文件。将这些文件放在同一个文件中是一个很好的说明方式:"嘿,这些不是我的代码,无关我的责任。"
|
83
|
+
|
84
|
+
如果你重写了任何库或框架的部分,建议设置第8个文件夹`vendors-extensions/`来存放,并使用相同的名字命名。例如,`vendors-extensions/_boostrap.scss`文件存放所有重写Bootstrap默认CSS之后的CSS规则。这是为了避免在原库或者框架文件中进行二次编辑。
|
85
|
+
|
86
|
+
####main.scss
|
87
|
+
|
88
|
+
主文件(通常写作`main.scss`,也常常命名为`style.scss`)应该是整个代码库中唯一开头不用下划线命名的Sass文件。除 `@import`和注释外,该文件不应该包含任何其他代码。
|
89
|
+
|
90
|
+
|
91
|
+
#####main.scss文件引入顺序
|
92
|
+
|
93
|
+
文件应该按照存在的位置顺序依次被引用进来:
|
94
|
+
|
95
|
+
1. vendors/
|
96
|
+
2. helpers/
|
97
|
+
3. base/
|
98
|
+
4. partials/
|
99
|
+
5. components/
|
100
|
+
6. pages/
|
101
|
+
7. themes/
|
102
|
+
|
103
|
+
为了保持可读性,主文件应遵守如下准则:
|
104
|
+
|
105
|
+
- 每个 `@import`引用一个文件;
|
106
|
+
- 每个 `@import`单独一行;
|
107
|
+
- 从相同文件夹中引入的文件之间不用空行;
|
108
|
+
- 从不同文件夹中引入的文件之间用空行分隔;
|
109
|
+
- 忽略文件扩展名和下划线前缀。
|
110
|
+
|
111
|
+
例如:
|
112
|
+
|
113
|
+
@import 'vendors/bootstrap';
|
114
|
+
@import 'vendors/jquery-ui';
|
115
|
+
|
116
|
+
@import 'helpers/variables';
|
117
|
+
@import 'helpers/functions';
|
118
|
+
@import 'helpers/mixins';
|
119
|
+
@import 'helpers/placeholders';
|
120
|
+
|
121
|
+
@import 'base/reset';
|
122
|
+
@import 'base/typography';
|
123
|
+
|
124
|
+
@import 'partials/navigation';
|
125
|
+
@import 'partials/grid';
|
126
|
+
@import 'partials/header';
|
127
|
+
@import 'partials/footer';
|
128
|
+
@import 'partials/sidebar';
|
129
|
+
@import 'partials/forms';
|
130
|
+
|
131
|
+
@import 'components/buttons';
|
132
|
+
@import 'components/carousel';
|
133
|
+
@import 'components/cover';
|
134
|
+
@import 'components/dropdown';
|
135
|
+
|
136
|
+
@import 'pages/home';
|
137
|
+
@import 'pages/contact';
|
138
|
+
|
139
|
+
@import 'themes/theme';
|
140
|
+
@import 'themes/admin';
|
141
|
+
|
142
|
+
这里还有另一种引入的有效方式。令人高兴的是,它使文件更具有可读性;令人沮丧的是,更新时会有些麻烦。不管怎么说,由你决定哪一个最好,这没有任何问题。 对于这种方式,主要文件应遵守如下准则:
|
143
|
+
|
144
|
+
- 每个文件夹只使用一个`@import`
|
145
|
+
- 每个`@import`之后都断行
|
146
|
+
- 每个文件占一行
|
147
|
+
- 新的文件跟在最后的文件夹后面
|
148
|
+
- 文件扩展名都可以省略
|
149
|
+
|
150
|
+
例如:
|
151
|
+
|
152
|
+
@import
|
153
|
+
'vendors/bootstrap',
|
154
|
+
'vendors/jquery-ui';
|
155
|
+
|
156
|
+
@import
|
157
|
+
'helpers/variables',
|
158
|
+
'helpers/functions',
|
159
|
+
'helpers/mixins',
|
160
|
+
'helpers/placeholders';
|
161
|
+
|
162
|
+
@import
|
163
|
+
'base/reset',
|
164
|
+
'base/typography';
|
165
|
+
|
166
|
+
@import
|
167
|
+
'partials/navigation',
|
168
|
+
'partials/grid',
|
169
|
+
'partials/header',
|
170
|
+
'partials/footer',
|
171
|
+
'partials/sidebar',
|
172
|
+
'partials/forms';
|
173
|
+
|
174
|
+
@import
|
175
|
+
'components/buttons',
|
176
|
+
'components/carousel',
|
177
|
+
'components/cover',
|
178
|
+
'components/dropdown';
|
179
|
+
|
180
|
+
@import
|
181
|
+
'pages/home',
|
182
|
+
'pages/contact';
|
183
|
+
|
184
|
+
@import
|
185
|
+
'themes/theme',
|
186
|
+
'themes/admin';
|
187
|
+
|
188
|
+
小技巧,为了避免人工一个一个文件引入,可以使用Ruby Sass扩展程序[sass-globbing](https://github.com/chriseppstein/sass-globbing)。
|
@@ -0,0 +1,24 @@
|
|
1
|
+
//pull-left
|
2
|
+
%pull-left {
|
3
|
+
@include float(left);
|
4
|
+
}
|
5
|
+
|
6
|
+
//pull-right
|
7
|
+
|
8
|
+
%pull-right {
|
9
|
+
@include float(right);
|
10
|
+
}
|
11
|
+
|
12
|
+
//clearfix
|
13
|
+
|
14
|
+
%clearfix {
|
15
|
+
&:before,
|
16
|
+
&:after {
|
17
|
+
content:"";
|
18
|
+
display: table;
|
19
|
+
}
|
20
|
+
&:after {
|
21
|
+
overflow: hidden;
|
22
|
+
clear: both;
|
23
|
+
}
|
24
|
+
}
|
File without changes
|
@@ -0,0 +1,120 @@
|
|
1
|
+
#Mixins使用方法
|
2
|
+
|
3
|
+
Sass中的mixins默认情况下可以不调用任何参数,此时调用的参数为定义mixins是设置的参数;第二种情形是调用是指定参数。Sass调用mixins都是通过`@include`关键词。
|
4
|
+
|
5
|
+
###1. ellipsis-overflow
|
6
|
+
|
7
|
+
####功能
|
8
|
+
|
9
|
+
字符截取,末尾出现三个`...`。
|
10
|
+
|
11
|
+
####参数
|
12
|
+
|
13
|
+
定义`$substract`参数,默认值为`0`。指定元素需要去掉的宽度。
|
14
|
+
|
15
|
+
####调用
|
16
|
+
|
17
|
+
调用默认参数值,也就是`$substract`值为0;
|
18
|
+
|
19
|
+
@include ellipsis-overflow;
|
20
|
+
|
21
|
+
指定能数值调用:
|
22
|
+
|
23
|
+
@include ellipsis-overflow(20);
|
24
|
+
|
25
|
+
####示例
|
26
|
+
|
27
|
+
SCSS
|
28
|
+
|
29
|
+
.block {
|
30
|
+
@include ellipsis-overflow(20%);
|
31
|
+
}
|
32
|
+
|
33
|
+
CSS
|
34
|
+
|
35
|
+
.block {
|
36
|
+
overflow: hidden;
|
37
|
+
text-overflow: ellipsis;
|
38
|
+
white-space: nowrap;
|
39
|
+
width: 80%;
|
40
|
+
}
|
41
|
+
|
42
|
+
###2. float
|
43
|
+
|
44
|
+
####功能
|
45
|
+
|
46
|
+
设置元素浮动方向。
|
47
|
+
|
48
|
+
####参数
|
49
|
+
|
50
|
+
- `$direction`: 定义浮动方向,默认值为`left`。可选值为`left`、`right`和`none`。
|
51
|
+
- `$support-for-ie`:布尔值,默认值为`true`。可选值为`true`和`flase`。(如果不需要考虑兼容IE6,可以去掉这个参数)。
|
52
|
+
|
53
|
+
####调用
|
54
|
+
|
55
|
+
默认调用方法:
|
56
|
+
|
57
|
+
@include float;
|
58
|
+
|
59
|
+
带参数调用方法:
|
60
|
+
|
61
|
+
@include float(right, false);
|
62
|
+
|
63
|
+
####示例
|
64
|
+
|
65
|
+
SCSS
|
66
|
+
|
67
|
+
.pull-left {
|
68
|
+
@include float(left);
|
69
|
+
}
|
70
|
+
|
71
|
+
.pull-right {
|
72
|
+
@include float(right,false);
|
73
|
+
}
|
74
|
+
|
75
|
+
CSS
|
76
|
+
|
77
|
+
.pull-left {
|
78
|
+
float: left;
|
79
|
+
_display: inline;
|
80
|
+
}
|
81
|
+
|
82
|
+
.pull-right {
|
83
|
+
float: right;
|
84
|
+
}
|
85
|
+
|
86
|
+
###3.backgroundTransparent
|
87
|
+
|
88
|
+
####功能
|
89
|
+
|
90
|
+
设置带有透明度的背景颜色。
|
91
|
+
|
92
|
+
####参数
|
93
|
+
|
94
|
+
- `$color`: 背景颜色
|
95
|
+
- `$opacity`: 透明度
|
96
|
+
- `$support-for-ie`: 布尔值,默认`false`,如果需要兼容低版本浏览器,只需要将其设置为`true`
|
97
|
+
|
98
|
+
####调用
|
99
|
+
|
100
|
+
默认调用方法:
|
101
|
+
|
102
|
+
@include backgroundTransparent(#000,.5);//颜色和透明度可以根据自己需求定义
|
103
|
+
|
104
|
+
带参数调用方法:
|
105
|
+
|
106
|
+
@include backgroundTransparent(#000,.5,true);
|
107
|
+
|
108
|
+
####示例
|
109
|
+
|
110
|
+
SCSS
|
111
|
+
|
112
|
+
.box {
|
113
|
+
@include backgroundTransparent(#000,.5);
|
114
|
+
}
|
115
|
+
|
116
|
+
CSS
|
117
|
+
|
118
|
+
.box {
|
119
|
+
background-color: rgba(0, 0, 0, 0.5);
|
120
|
+
}
|
@@ -0,0 +1,14 @@
|
|
1
|
+
//Author:Janking (https://github.com/Janking)
|
2
|
+
|
3
|
+
//eg: https://gist.github.com/airen/040f6f06bcc8b3176d8a
|
4
|
+
|
5
|
+
@mixin backgroundTransparent($color,$opacity,$support-for-ie:false){
|
6
|
+
background-color:rgba($color,$opacity);
|
7
|
+
@if $support-for-ie{
|
8
|
+
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#{ie-hex-str(rgba($color,$opacity))},endColorstr=#{ie-hex-str(rgba($color,$opacity))});
|
9
|
+
|
10
|
+
:root & {
|
11
|
+
filter:none;
|
12
|
+
}
|
13
|
+
}
|
14
|
+
}
|
@@ -0,0 +1,15 @@
|
|
1
|
+
//eg: https://gist.github.com/08bce58e9af2fa223118
|
2
|
+
@mixin content($attr,$content:null){
|
3
|
+
@if $attr {
|
4
|
+
display: inline-block;
|
5
|
+
content: $attr;
|
6
|
+
}
|
7
|
+
@else if $content != null {
|
8
|
+
content: quote($content);
|
9
|
+
display: inline-block;
|
10
|
+
}
|
11
|
+
@else {
|
12
|
+
content: "";
|
13
|
+
display: table;
|
14
|
+
}
|
15
|
+
}
|
@@ -0,0 +1,28 @@
|
|
1
|
+
//Thanks: https://github.com/bitmanic/rem/blob/master/stylesheets/_rem.scss by @benfrain (https://github.com/benfrain)
|
2
|
+
|
3
|
+
//eg: https://gist.github.com/airen/cdf85f2a704fbca00dec
|
4
|
+
|
5
|
+
@mixin px2rem($property,$px-values,$baseline-px:16px,$support-for-ie:false){
|
6
|
+
//Conver the baseline into rems
|
7
|
+
$baseline-rem: $baseline-px / 1rem * 1;
|
8
|
+
//Print the first line in pixel values
|
9
|
+
@if $support-for-ie {
|
10
|
+
#{$property}: $px-values;
|
11
|
+
}
|
12
|
+
//if there is only one (numeric) value, return the property/value line for it.
|
13
|
+
@if type-of($px-values) == "number"{
|
14
|
+
#{$property}: $px-values / $baseline-rem;
|
15
|
+
}
|
16
|
+
@else {
|
17
|
+
//Create an empty list that we can dump values into
|
18
|
+
$rem-values:();
|
19
|
+
@each $value in $px-values{
|
20
|
+
// If the value is zero or not a number, return it
|
21
|
+
@if $value == 0 or type-of($value) != "number"{
|
22
|
+
$rem-values: append($rem-values, $value / $baseline-rem);
|
23
|
+
}
|
24
|
+
}
|
25
|
+
// Return the property and its list of converted values
|
26
|
+
#{$property}: $rem-values;
|
27
|
+
}
|
28
|
+
}
|
@@ -0,0 +1,38 @@
|
|
1
|
+
//From: http://compass-style.org/reference/compass/layout/sticky_footer/
|
2
|
+
|
3
|
+
//html
|
4
|
+
|
5
|
+
// <body>
|
6
|
+
// <div id="wrapper">
|
7
|
+
// <div id="wrapper-inner"></div>
|
8
|
+
// <div id="push"></div>
|
9
|
+
// </div>
|
10
|
+
// <div id="footer">
|
11
|
+
// Footer content goes here.
|
12
|
+
// </div>
|
13
|
+
// </body>
|
14
|
+
|
15
|
+
|
16
|
+
//eg: https://gist.github.com/airen/2f7211d7819dddaf6003
|
17
|
+
|
18
|
+
@mixin stickyFooter($footer-height, $root-selector: unquote("#wrapper"), $root-footer-selector: unquote("#push"), $footer-selector: unquote("#footer")) {
|
19
|
+
html, body {
|
20
|
+
height: 100%;
|
21
|
+
}
|
22
|
+
#{$root-selector} {
|
23
|
+
clear: both;
|
24
|
+
min-height: 100%;
|
25
|
+
height: auto !important;
|
26
|
+
height: 100%;
|
27
|
+
margin-bottom: -$footer-height;
|
28
|
+
}
|
29
|
+
#{$root-footer-selector} {
|
30
|
+
height: $footer-height;
|
31
|
+
}
|
32
|
+
|
33
|
+
#{$footer-selector} {
|
34
|
+
clear: both;
|
35
|
+
position: relative;
|
36
|
+
height: $footer-height;
|
37
|
+
}
|
38
|
+
}
|
@@ -0,0 +1,25 @@
|
|
1
|
+
//@include visuallyHidden;
|
2
|
+
|
3
|
+
@mixin visuallyHidden($support-for-ie:true) {
|
4
|
+
@if $support-for-ie {
|
5
|
+
clip: rect(0,0,0,0);
|
6
|
+
}
|
7
|
+
border: 0;
|
8
|
+
clip: rect(0 0 0 0);
|
9
|
+
height: 1px;
|
10
|
+
margin: -1px;
|
11
|
+
overflow: hidden;
|
12
|
+
padding: 0;
|
13
|
+
position: absolute;
|
14
|
+
width: 1px;
|
15
|
+
|
16
|
+
&.focusable:active,
|
17
|
+
&.focusable:focus {
|
18
|
+
clip: auto;
|
19
|
+
height: auto;
|
20
|
+
margin: 0;
|
21
|
+
overflow: visible;
|
22
|
+
position: static;
|
23
|
+
width: auto;
|
24
|
+
}
|
25
|
+
}
|
File without changes
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: sassmagic
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.1.
|
4
|
+
version: 0.1.5
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2015-03-
|
12
|
+
date: 2015-03-31 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: sass
|
@@ -48,16 +48,20 @@ files:
|
|
48
48
|
- lib/sassmagic/reset.rb
|
49
49
|
- lib/sassmagic/utils.rb
|
50
50
|
- lib/sassmagic.rb
|
51
|
-
- stylesheets/sassmagic/
|
52
|
-
- stylesheets/sassmagic/
|
53
|
-
- stylesheets/sassmagic/
|
54
|
-
- stylesheets/sassmagic/mixins/
|
55
|
-
- stylesheets/sassmagic/mixins/
|
56
|
-
- stylesheets/sassmagic/mixins/
|
57
|
-
- stylesheets/sassmagic/mixins/
|
58
|
-
- stylesheets/sassmagic/mixins/
|
59
|
-
- stylesheets/sassmagic/mixins/
|
60
|
-
- stylesheets/sassmagic/mixins/
|
51
|
+
- stylesheets/sassmagic/helpers/_helpers.scss
|
52
|
+
- stylesheets/sassmagic/helpers/_mixins.scss
|
53
|
+
- stylesheets/sassmagic/helpers/_variables.scss
|
54
|
+
- stylesheets/sassmagic/helpers/mixins/_backgroundTransparent.scss
|
55
|
+
- stylesheets/sassmagic/helpers/mixins/_content.scss
|
56
|
+
- stylesheets/sassmagic/helpers/mixins/_ellipsis-overflow.scss
|
57
|
+
- stylesheets/sassmagic/helpers/mixins/_float.scss
|
58
|
+
- stylesheets/sassmagic/helpers/mixins/_px2rem.scss
|
59
|
+
- stylesheets/sassmagic/helpers/mixins/_resizable.scss
|
60
|
+
- stylesheets/sassmagic/helpers/mixins/_stickyFooter.scss
|
61
|
+
- stylesheets/sassmagic/helpers/mixins/_visuallyHidden.scss
|
62
|
+
- stylesheets/sassmagic/helpers/mixins/README.md
|
63
|
+
- stylesheets/sassmagic/main.scss
|
64
|
+
- stylesheets/sassmagic/README.md
|
61
65
|
- Changelog.md
|
62
66
|
- Readme.md
|
63
67
|
homepage: https://github.com/ringself/sassmagic
|
@@ -1,10 +0,0 @@
|
|
1
|
-
//used by base.scss
|
2
|
-
@import 'functions/support';
|
3
|
-
@import 'functions/list';
|
4
|
-
@import 'mixins/placeholder-wrapper';
|
5
|
-
@import 'mixins/clearfix';
|
6
|
-
@import 'mixins/ellipsis-overflow';
|
7
|
-
@import 'mixins/float';
|
8
|
-
@import 'mixins/font-face';
|
9
|
-
@import 'mixins/image';
|
10
|
-
@import 'mixins/inline-block';
|
@@ -1,27 +0,0 @@
|
|
1
|
-
@function comma-list($list: ()) {
|
2
|
-
@return join((), $list, comma);
|
3
|
-
}
|
4
|
-
|
5
|
-
|
6
|
-
@function slice($list, $min: 1, $max: length($list)) {
|
7
|
-
$output: comma-list();
|
8
|
-
$length: length($list);
|
9
|
-
|
10
|
-
@if $max < 0 {
|
11
|
-
$max: $length + $max + 1;
|
12
|
-
}
|
13
|
-
|
14
|
-
@if $max > $length {
|
15
|
-
$max: $length;
|
16
|
-
}
|
17
|
-
|
18
|
-
@if $min >= 1 and $min <= $length and
|
19
|
-
$max >= 1 and $max <= $length and
|
20
|
-
$min <= $max {
|
21
|
-
@for $i from $min through $max {
|
22
|
-
$output: append($output, nth($list, $i));
|
23
|
-
}
|
24
|
-
}
|
25
|
-
|
26
|
-
@return $output;
|
27
|
-
}
|
@@ -1,14 +0,0 @@
|
|
1
|
-
// Examples:
|
2
|
-
// support-browser(ios)
|
3
|
-
// support-browser(ie 8)
|
4
|
-
@function support-browser($args) {
|
5
|
-
@if length($args) == 1 {
|
6
|
-
@return map-has-key($browser-supports, to-lower-case($args));
|
7
|
-
}
|
8
|
-
@else {
|
9
|
-
@return not not index(
|
10
|
-
map-get($browser-supports, to-lower-case(nth($args, 1))),
|
11
|
-
nth($args, 2)
|
12
|
-
);
|
13
|
-
}
|
14
|
-
}
|
@@ -1,19 +0,0 @@
|
|
1
|
-
@mixin clearfix {
|
2
|
-
$colon: unquote(if(support-browser(ie 8), ':', '::')) !global;
|
3
|
-
|
4
|
-
@include placeholder-wrapper('clearfix') {
|
5
|
-
&#{$colon}before,
|
6
|
-
&#{$colon}after {
|
7
|
-
content: '\20';
|
8
|
-
display: table;
|
9
|
-
}
|
10
|
-
|
11
|
-
&#{$colon}after {
|
12
|
-
clear: both;
|
13
|
-
}
|
14
|
-
|
15
|
-
@if support-browser(ie 7) {
|
16
|
-
*zoom: 1;
|
17
|
-
}
|
18
|
-
}
|
19
|
-
}
|
@@ -1,20 +0,0 @@
|
|
1
|
-
@mixin font-face($font-family, $paths...) {
|
2
|
-
$ie9-url: null;
|
3
|
-
|
4
|
-
@if support-browser(ie 9) {
|
5
|
-
@each $path in $paths {
|
6
|
-
@if str-index($path, '.eot') {
|
7
|
-
$i: str-index($path, '#');
|
8
|
-
$end: if($i, $i - 1, str-length($path));
|
9
|
-
$ie9-url: nth(nth(url(str-slice($path, 1, $end)), 1), 1);
|
10
|
-
}
|
11
|
-
}
|
12
|
-
}
|
13
|
-
|
14
|
-
@font-face {
|
15
|
-
font-family: $font-family;
|
16
|
-
@content;
|
17
|
-
src: $ie9-url;
|
18
|
-
src: url($paths);
|
19
|
-
}
|
20
|
-
}
|
@@ -1,19 +0,0 @@
|
|
1
|
-
@mixin img-retina {
|
2
|
-
@media
|
3
|
-
only screen and (-webkit-min-device-pixel-ratio: 2),
|
4
|
-
only screen and ( min--moz-device-pixel-ratio: 2),
|
5
|
-
only screen and ( -o-min-device-pixel-ratio: 2/1),
|
6
|
-
only screen and ( min-device-pixel-ratio: 2),
|
7
|
-
only screen and ( min-resolution: 192dpi),
|
8
|
-
only screen and ( min-resolution: 2dppx) {
|
9
|
-
@content;
|
10
|
-
}
|
11
|
-
}
|
12
|
-
|
13
|
-
@mixin img-responsive($display: block) {
|
14
|
-
@include placeholder-wrapper('img-responsive', $display) {
|
15
|
-
display: $display;
|
16
|
-
max-width: 100%;
|
17
|
-
height: auto;
|
18
|
-
}
|
19
|
-
}
|
@@ -1,15 +0,0 @@
|
|
1
|
-
$anonymous-placeholders: ();
|
2
|
-
|
3
|
-
@mixin placeholder-wrapper($name, $args...) {
|
4
|
-
$times: map-get($anonymous-placeholders, ($name, $args)) or 0;
|
5
|
-
$anonymous-placeholders: map-merge($anonymous-placeholders, (($name, $args): $times + 1)) !global;
|
6
|
-
$index: index($anonymous-placeholders, (($name, $args) ($times + 1)));
|
7
|
-
|
8
|
-
@if $times == 0 {
|
9
|
-
@at-root %-#{$name}-#{$index} {
|
10
|
-
@content;
|
11
|
-
}
|
12
|
-
}
|
13
|
-
|
14
|
-
@extend %-#{$name}-#{$index};
|
15
|
-
}
|