-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathatom.xml
203 lines (160 loc) · 49 KB
/
atom.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>Xilihuasi`s Blog</title>
<link href="/atom.xml" rel="self"/>
<link href="http://yoursite.com/"/>
<updated>2017-03-07T07:40:33.000Z</updated>
<id>http://yoursite.com/</id>
<author>
<name>xilihuasi</name>
<email>[email protected]</email>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>Sass用法介绍</title>
<link href="http://yoursite.com/2017/02/28/Sass%E7%94%A8%E6%B3%95%E4%BB%8B%E7%BB%8D/"/>
<id>http://yoursite.com/2017/02/28/Sass用法介绍/</id>
<published>2017-02-28T15:20:10.000Z</published>
<updated>2017-03-07T07:40:33.000Z</updated>
<content type="html"><![CDATA[<p> CSS决定前端的颜值，但其落后的语法一直被诟病。CSS本身是简单并有趣的，但当样式表变得庞大、复杂后，CSS变得难以维护。直到Sass,Less,Stylus等预处理工具的出现，才使这一问题得到缓解。<a id="more"></a>接下来就以Sass为例来介绍。</p>
<h3 id="Sass"><a href="#Sass" class="headerlink" title="Sass"></a>Sass</h3><p> 什么是Sass？GitHub上是这样介绍的，Sass让CSS再一次变得有趣。Sass是CSS的拓展，添加了嵌套规则，变量，混合，选择器继承等特性。Sass并不改变CSS的语法特性，只是通过命令行或web框架插件把Sass编译成标准格式化的CSS。<br> Sass有两种语法。一种全新的主要的语法是”SCSS”(Sass 3),是CSS的超集，可以使用CSS的一切语法。SCSS文件采用<code>.scss</code>后缀。另一种较旧的语法采用缩进格式（跟python类似），取代CSS的大括号和分号，这种缩进语法文件采用<code>.sass</code>后缀。<br> <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line">//.scss</div><div class="line">body{</div><div class="line"> div{</div><div class="line"> background-color:#f5f5f5;</div><div class="line"> }</div><div class="line">}</div><div class="line"></div><div class="line">//.sass</div><div class="line">body</div><div class="line"> div</div><div class="line"> background-color:#f5f5f5</div></pre></td></tr></table></figure></p>
<p> 由于不同编辑器对文档的缩进不尽统一，为了避免严格的格式要求导致报错以及书写的方便，建议采用<code>.scss</code>后缀名的文件。还没安装Sass的朋友可以在<a href="http://www.sassmeister.com/" target="_blank" rel="external">该地址</a>在线体验（采用scss文件语法）。</p>
<h3 id="Sass语法"><a href="#Sass语法" class="headerlink" title="Sass语法"></a>Sass语法</h3><h4 id="变量"><a href="#变量" class="headerlink" title="变量"></a>变量</h4><p> 朋友，你是否为需求变更全局修改样式感到烦恼，是否因为字体宽高的数学计算感到力不从心，不用怕Sass让你重振雄风。Sass允许使用变量来存储你想在样式表中重用的值，比如颜色，字号或者其他任意CSS值。Sass通过<code>$</code>符号定义变量。</p>
<h5 id="普通变量"><a href="#普通变量" class="headerlink" title="普通变量"></a>普通变量</h5><p> 在Sass中，我们可以把反复用到的属性值或者经常修改的值定义成变量，在属性名或字符串中使用则需要写在#{}中。例如：<br> <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div></pre></td><td class="code"><pre><div class="line">//代码块中，input.scss代表Sass输入文件，output.css代表Sass编译输出文件，后续小节中同理。</div><div class="line">//input.scss</div><div class="line">$font:17px;</div><div class="line">$top:top;</div><div class="line">$img-url:"/index/";</div><div class="line">p{</div><div class="line"> font-size:$font;</div><div class="line"> margin-#{$top}:10px;</div><div class="line">}</div><div class="line">.site-nav{</div><div class="line"> background-image:url(#{$img-url}icon.png);</div><div class="line">}</div><div class="line"></div><div class="line">//output.css</div><div class="line">p{</div><div class="line"> font-size:17px;</div><div class="line"> margin-top:10px;</div><div class="line">}</div><div class="line">.site-nav{</div><div class="line"> background-image:url(/index/icon.png);</div><div class="line">}</div></pre></td></tr></table></figure></p>
<h5 id="默认变量"><a href="#默认变量" class="headerlink" title="默认变量"></a>默认变量</h5><p> 默认变量的含义是，如果一个变量被声明赋值那就用它声明的值，否则就用默认值。Sass设置默认变量只需在值后面加上!default即可。<br> <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">//input.scss</div><div class="line">$font:18px !default;</div><div class="line">p{</div><div class="line"> font-size:$font;</div><div class="line">}</div><div class="line"></div><div class="line">//output.css</div><div class="line">p{</div><div class="line"> font-size:18px;</div><div class="line">}</div></pre></td></tr></table></figure></p>
<p> 需要覆盖的时候只需要像普通变量一样重新赋值就可以了（注：有些教程里写必须在默认变量前声明覆盖，相信有心的小朋友已经发现是错误的了）。<br> <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line">//input.scss</div><div class="line">$font:18px !default;</div><div class="line">$font:20px;</div><div class="line">p{</div><div class="line"> font-size:$font;</div><div class="line">}</div><div class="line"></div><div class="line">//output.css</div><div class="line">p{</div><div class="line"> font-size:20px;</div><div class="line">}</div></pre></td></tr></table></figure></p>
<h5 id="全局变量和局部变量"><a href="#全局变量和局部变量" class="headerlink" title="全局变量和局部变量"></a>全局变量和局部变量</h5><p> 在Sass中，定义在选择器中的变量为局部变量，反之则为全局变量。当在局部范围（选择器、函数、混合宏）内声明全局范围已经存在的变量时，局部变量的作用域仅限局部范围。<br> <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line">//input.scss</div><div class="line">$color:#000;</div><div class="line">p{</div><div class="line"> color:$color;</div><div class="line">}</div><div class="line">.warn-txt{</div><div class="line"> $color:red;</div><div class="line"> color:$color;</div><div class="line">}</div><div class="line"></div><div class="line">//output.css</div><div class="line">p{</div><div class="line"> color:#000;</div><div class="line">}</div><div class="line">.warn-txt{</div><div class="line"> color:red;</div><div class="line">}</div></pre></td></tr></table></figure></p>
<p> 如果需要在局部范围内覆盖，需要在值后添加!global。<strong>需要注意的是，局部范围声明覆盖，之前的值不会被覆盖</strong>。<br> <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div></pre></td><td class="code"><pre><div class="line">//input.scss</div><div class="line">$color:#000;</div><div class="line">a{</div><div class="line"> color:$color;</div><div class="line">}</div><div class="line">.warn-txt{</div><div class="line"> $color:red !global;</div><div class="line"> color:$color;</div><div class="line">}</div><div class="line">p{</div><div class="line"> color:$color;</div><div class="line">}</div><div class="line"></div><div class="line">//output.css</div><div class="line">a{</div><div class="line"> color:#000;</div><div class="line">}</div><div class="line">.warn-txt{</div><div class="line"> color:red;</div><div class="line">}</div><div class="line">p{</div><div class="line"> color:red;</div><div class="line">}</div></pre></td></tr></table></figure></p>
<h5 id="多值变量"><a href="#多值变量" class="headerlink" title="多值变量"></a>多值变量</h5><p> 多值变量类似js中的数组，声明时只需要将多个值用空格隔开即可。可以通过length($color)来获取值的个数，nth($color,index)来获取index位置的值（index范围为1到length($color)）。<br> <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line">//input.scss</div><div class="line">$color:#000 #3fc894 #ff6262;</div><div class="line">p{</div><div class="line"> color:nth($color,2);</div><div class="line"> margin-top:length($color)px;</div><div class="line">}</div><div class="line"></div><div class="line">//output.css</div><div class="line">p{</div><div class="line"> color:#3fc894;</div><div class="line"> margin-top:3px;</div><div class="line">}</div></pre></td></tr></table></figure></p>
<h4 id="嵌套"><a href="#嵌套" class="headerlink" title="嵌套"></a>嵌套</h4><p> 嵌套是一种可以让你优雅地写样式的特性，可以让你像写页面元素一样写样式，让代码更简洁，结构清晰、容易维护。嵌套可以在选择器和样式属性上使用。<br> <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div></pre></td><td class="code"><pre><div class="line">//input.scss</div><div class="line">.box{</div><div class="line"> padding:10px;</div><div class="line"> background:{</div><div class="line"> size:cover;</div><div class="line"> color:#ddd;</div><div class="line"> }</div><div class="line"> a{</div><div class="line"> color:#000;</div><div class="line"> }</div><div class="line"> img{</div><div class="line"> width:100px;</div><div class="line"> }</div><div class="line">}</div><div class="line"></div><div class="line">//output.scss</div><div class="line">.box {</div><div class="line"> padding:10px;</div><div class="line"> background-size:cover;</div><div class="line"> background-color:#ddd;</div><div class="line">}</div><div class="line">.box a{</div><div class="line"> color:#000;</div><div class="line">}</div><div class="line">.box img{</div><div class="line"> width:100px;</div><div class="line">}</div></pre></td></tr></table></figure></p>
<p> 需要注意的是，嵌套不宜过多以免生成的选择器过长。一些可以合并的属性如border-color,border-width尽量合并书写。</p>
<h4 id="混合器"><a href="#混合器" class="headerlink" title="混合器"></a>混合器</h4><p> Sass中使用@mixin声明混合器，可以传递参数，参数名以$符号开始，也可以给参数设置默认值。声明的@mixin通过@include调用。我们经常使用的单行文本溢出显示省略号的属性，可以通过混合器来避免代码重复书写问题。</p>
<h5 id="无参数混合器"><a href="#无参数混合器" class="headerlink" title="无参数混合器"></a>无参数混合器</h5> <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div></pre></td><td class="code"><pre><div class="line">//input.scss</div><div class="line">@mixin ellipsis{</div><div class="line"> width:100%;</div><div class="line"> overflow:hidden;</div><div class="line"> white-space:nowrap;</div><div class="line"> text-overflow:ellipsis;</div><div class="line">}</div><div class="line">p{</div><div class="line"> @include ellipsis;</div><div class="line">}</div><div class="line"></div><div class="line">//output.css</div><div class="line">p{</div><div class="line"> width:100%;</div><div class="line"> overflow:hidden;</div><div class="line"> white-space:nowrap;</div><div class="line"> text-overflow:ellipsis;</div><div class="line">}</div></pre></td></tr></table></figure>
<h5 id="带参数的混合器"><a href="#带参数的混合器" class="headerlink" title="带参数的混合器"></a>带参数的混合器</h5><p> 带参数的混合器，可以根据业务需求的不同来定义不同的值。例如定义一个动画延迟<br> <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line">//input.scss</div><div class="line">@mixin animate-delay($second){</div><div class="line"> -webkit-animation-delay: $second;</div><div class="line"> animation-delay: $second;</div><div class="line">}</div><div class="line">.rect{</div><div class="line"> @include animate-delay(2s);</div><div class="line">}</div><div class="line"></div><div class="line">//output.css</div><div class="line">.rect{</div><div class="line"> -webkit-animation-delay: 2s;</div><div class="line"> animation-delay: 2s;</div><div class="line">}</div></pre></td></tr></table></figure></p>
<h4 id="导入"><a href="#导入" class="headerlink" title="导入"></a>导入</h4><p> 说起导入，CSS其实也有@import功能，只是很少被开发者使用。因为在一个CSS文件中导入的其他CSS文件，只有当执行到@import规则时浏览器才会下载该文件，这会拖慢页面加载速度并且显示也会出现问题。Sass中的@import会在生成CSS文件的时候，把引入的文件与当前文件合并成同一文件，无需渲染时再加载。另外，导入文件中定义的变量，在当前文件中同样可用。在使用Sass中使用导入时，可以省略后缀名。<br> <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line">//aInput.scss</div><div class="line">body{</div><div class="line"> background-color:#f5f5f5;</div><div class="line">}</div><div class="line">//bInput.scss</div><div class="line">@import "aInput";</div><div class="line">p{</div><div class="line"> color:#000;</div><div class="line">}</div><div class="line"></div><div class="line">//bOutput.css</div><div class="line">body{</div><div class="line"> background-color:#f5f5f5;</div><div class="line">}</div><div class="line">p{</div><div class="line"> color:#000;</div><div class="line">}</div></pre></td></tr></table></figure></p>
<p> 如果aInput.scss文件只是过渡文件，在编译sass目录的时候不想输出其对应的CSS文件，可在文件名前添加下划线，_aInput.scss。这样Sass在编译的时候就会忽略该文件。</p>
<h4 id="继承"><a href="#继承" class="headerlink" title="继承"></a>继承</h4><p> Sass允许选择器继承另一个选择器的所有样式,并联合声明，使用关键字@extend。<br> <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line">//input.scss</div><div class="line">.sign-box{</div><div class="line"> border:solid 1px #ddd;</div><div class="line">}</div><div class="line">.info-box{</div><div class="line"> @extend .sign-box;</div><div class="line"> background-color:#f5f5f5;</div><div class="line">}</div><div class="line"></div><div class="line">//output.css</div><div class="line">.sign-box, .info-box{</div><div class="line"> border:solid 1px #ddd;</div><div class="line">}</div><div class="line">.info-box{</div><div class="line"> background-color:#f5f5f5;</div><div class="line">}</div></pre></td></tr></table></figure></p>
<h4 id="注释"><a href="#注释" class="headerlink" title="注释"></a>注释</h4><p> Sass有两种注释方式，一种是标准的CSS注释方式<code>/* */</code>，另一种是双斜杠<code>//</code>单行注释（由于CSS不支持双斜杠注释，因此在输出时不会被转译出来）。<br> <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line">//input.scss</div><div class="line">/* 段落字体颜色 */</div><div class="line">//双斜杠注释测试</div><div class="line">p{</div><div class="line"> color:#000;</div><div class="line">}</div><div class="line"></div><div class="line">//output.css</div><div class="line">@charset "UTF-8";</div><div class="line">/* 段落字体颜色 */</div><div class="line">p{</div><div class="line"> color:#000;</div><div class="line">}</div></pre></td></tr></table></figure></p>
<h4 id="条件判断及循环"><a href="#条件判断及循环" class="headerlink" title="条件判断及循环"></a>条件判断及循环</h4><h5 id="if判断"><a href="#if判断" class="headerlink" title="@if判断"></a>@if判断</h5><p> Sass中的@if语句和js中的if类似，可以单独使用也可配合@else使用。<br> <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line">//input.scss</div><div class="line">$color : green;</div><div class="line">.nav-bar{</div><div class="line"> @if $color == green {</div><div class="line"> background-color:#3fc894;</div><div class="line"> } @else if $color == red {</div><div class="line"> background-color:#ff6262;</div><div class="line"> } @else {</div><div class="line"> background-color:#fff;</div><div class="line"> }</div><div class="line">}</div><div class="line"></div><div class="line">//output.css</div><div class="line">.nav-bar{</div><div class="line"> background-color: #3fc894;</div><div class="line">}</div></pre></td></tr></table></figure></p>
<h5 id="三目运算"><a href="#三目运算" class="headerlink" title="三目运算"></a>三目运算</h5><p> 三目判断语法为：if($condition,$condition_true,$condition_false)。<br> <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">//input.scss</div><div class="line">$hasBorder:true;</div><div class="line">.wrapper{</div><div class="line"> border:solid if($hasBorder,1px,0px) #ddd;</div><div class="line">}</div><div class="line"></div><div class="line">//output.css</div><div class="line">.wrapper {</div><div class="line"> border: solid 0px #ddd;</div><div class="line">}</div></pre></td></tr></table></figure></p>
<h5 id="for循环"><a href="#for循环" class="headerlink" title="for循环"></a>for循环</h5><p> for循环有两种形式，一种是@for $i from < begin> to < end>,另一种是@for $i from < begin> through < end>。二者的区别在于，to不包含结束边界，而through包含。举个栗子：<br> <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div></pre></td><td class="code"><pre><div class="line">//input.scss</div><div class="line">/* 一般不建议这样命名*/</div><div class="line">@for $i from 1 to 3{</div><div class="line"> .item-#{$i} {</div><div class="line"> width:10px * $i;</div><div class="line"> }</div><div class="line">}</div><div class="line">@for $i from 1 through 3{</div><div class="line"> .wrapper-#{$i}{</div><div class="line"> width:10px * $i;</div><div class="line"> }</div><div class="line">}</div><div class="line"></div><div class="line">//output.css</div><div class="line">@charset "UTF-8";</div><div class="line">/* 一般不建议这样命名*/</div><div class="line">.item-1 {</div><div class="line"> width: 10px;</div><div class="line">}</div><div class="line">.item-2 {</div><div class="line"> width: 20px;</div><div class="line">}</div><div class="line">.wrapper-1 {</div><div class="line"> width:10px;</div><div class="line">}</div><div class="line">.wrapper-2 {</div><div class="line"> width:20px;</div><div class="line">}</div><div class="line">.wrapper-3 {</div><div class="line"> width:30px;</div><div class="line">}</div></pre></td></tr></table></figure></p>
<h5 id="each循环"><a href="#each循环" class="headerlink" title="each循环"></a>each循环</h5><p> Sass中的each语法为：@each $i in < list or map>,$i可根据使用情景自定义名称。</p>
<h6 id="一维列表"><a href="#一维列表" class="headerlink" title="一维列表"></a>一维列表</h6> <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div></pre></td><td class="code"><pre><div class="line">//input.scss</div><div class="line">$icon-list : sign, info, store;</div><div class="line">@each $i in $icon-list {</div><div class="line"> .#{$i}-icon {</div><div class="line"> background-image:url('/imgs/#{$i}.png');</div><div class="line"> }</div><div class="line">}</div><div class="line"></div><div class="line">//output.css</div><div class="line">.sign-icon {</div><div class="line"> background-image: url("/imgs/sign.png");</div><div class="line">}</div><div class="line">.info-icon {</div><div class="line"> background-image: url("/imgs/info.png");</div><div class="line">}</div><div class="line">.store-icon {</div><div class="line"> background-image: url("/imgs/store.png");</div><div class="line">}</div></pre></td></tr></table></figure>
<h6 id="多维列表"><a href="#多维列表" class="headerlink" title="多维列表"></a>多维列表</h6><p> 多维列表each循环至少需声明一个变量，执行时会按照列表维度顺序解析。<br> <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div></pre></td><td class="code"><pre><div class="line">//input.scss</div><div class="line">$icon-list:(sign,0px 0px,default),(info,0px -50px,pointer),(store,-50px 0px,pointer);</div><div class="line">@each $name, $position ,$cursor in $icon-list{</div><div class="line"> .#{$name}-icon{</div><div class="line"> background:url('/imgs/#{$name}.png') no-repeat;</div><div class="line"> background-position:$position;</div><div class="line"> cursor:$cursor;</div><div class="line"> }</div><div class="line">}</div><div class="line"></div><div class="line">//output.css</div><div class="line">.sign-icon {</div><div class="line"> background: url("/imgs/sign.png") no-repeat;</div><div class="line"> background-position: 0px 0px;</div><div class="line"> cursor: default;</div><div class="line">}</div><div class="line">.info-icon {</div><div class="line"> background: url("/imgs/info.png") no-repeat;</div><div class="line"> background-position: 0px -50px;</div><div class="line"> cursor: pointer;</div><div class="line">}</div><div class="line">.store-icon {</div><div class="line"> background: url("/imgs/store.png") no-repeat;</div><div class="line"> background-position: -50px 0px;</div><div class="line"> cursor: pointer;</div><div class="line">}</div></pre></td></tr></table></figure></p>
<h6 id="Map"><a href="#Map" class="headerlink" title="Map"></a>Map</h6> <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div></pre></td><td class="code"><pre><div class="line">//input.scss</div><div class="line">$head:(.title:20px,.container:17px);</div><div class="line">@each $key, $value in $head{</div><div class="line"> .#{$key}{</div><div class="line"> font-size:$value;</div><div class="line"> }</div><div class="line">}</div><div class="line"></div><div class="line">//output.css</div><div class="line">.title {</div><div class="line"> font-size: 20px;</div><div class="line">}</div><div class="line">.container {</div><div class="line"> font-size: 17px;</div><div class="line">}</div></pre></td></tr></table></figure>
<h3 id="Sass安装"><a href="#Sass安装" class="headerlink" title="Sass安装"></a>Sass安装</h3><p> 由于本人使用的Windows系统，只尝试过在该系统下安装。为了保证各个系统的用户都能顺利安装，这里就提供个<a href="http://sass-lang.com/install" target="_blank" rel="external">传送门</a>，关于安装Sass，有它就够了！</p>
<h3 id="结语"><a href="#结语" class="headerlink" title="结语"></a>结语</h3><p> 可以看到Sass的这些特性解决了很多之前写CSS的痛点，显著提升了开发效率和CSS的可维护性。这里只介绍了一些基础用法，关于Sass更深入的用法可以继续关注我的后续文章，或者自己动手研究。</p>
<h3 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h3><ul>
<li><a href="http://sass-lang.com/" target="_blank" rel="external">http://sass-lang.com/</a></li>
<li><a href="http://www.w3cplus.com/sassguide/" target="_blank" rel="external">http://www.w3cplus.com/sassguide/</a></li>
<li><a href="http://riny.net/2014/sass-guide/" target="_blank" rel="external">http://riny.net/2014/sass-guide/</a></li>
</ul>
]]></content>
<summary type="html">
<p> CSS决定前端的颜值，但其落后的语法一直被诟病。CSS本身是简单并有趣的，但当样式表变得庞大、复杂后，CSS变得难以维护。直到Sass,Less,Stylus等预处理工具的出现，才使这一问题得到缓解。
</summary>
<category term="css" scheme="http://yoursite.com/categories/css/"/>
<category term="css" scheme="http://yoursite.com/tags/css/"/>
<category term="sass" scheme="http://yoursite.com/tags/sass/"/>
</entry>
<entry>
<title>hexo部署到github</title>
<link href="http://yoursite.com/2016/11/25/hexo%E9%83%A8%E7%BD%B2%E5%88%B0github/"/>
<id>http://yoursite.com/2016/11/25/hexo部署到github/</id>
<published>2016-11-25T02:56:34.000Z</published>
<updated>2016-11-28T01:52:57.000Z</updated>
<content type="html"><![CDATA[<p>之前介绍了如何搭建本地hexo环境，相信很多小朋友已经搭建成功了。但是写了博客只放在本地不跟大家分享肯定不是我们想要的，本文就手把手教你怎样把hexo部署到github Page上跟大家分享你的文章。<a id="more"></a>为方便描述，文内所有的username表示你的GitHub用户名。</p>
<h2 id="创建GitHub-Pages"><a href="#创建GitHub-Pages" class="headerlink" title="创建GitHub Pages"></a>创建GitHub Pages</h2><p>GitHub Pages的目标在于让用户可以轻易向世界分享有趣的事情，即使你不懂代码也可以轻松创建美观的页面，任何人通过浏览器都可以访问。<a href="https://pages.github.com/" target="_blank" rel="external">GitHub Pages</a>主页有详细的教程，这里就不重复造轮子了。</p>
<h2 id="设置SHH-keys"><a href="#设置SHH-keys" class="headerlink" title="设置SHH keys"></a>设置SHH keys</h2><p>SSH keys是GitHub提供的一种不用输入密码就能识别可信的计算机的方式，通过在本地生成然后配置到你的GitHub账户，配置完成后便可把GitHub做为远程服务器进行版本控制。</p>
<ol>
<li>查看SSH keys是否存在<br> 首先打开Git Bash（任意位置均可），输入以下命令或者直接在文件管理器C:\Users\[当前系统用户]\.ssh路径下查看本地SSH keys。<br> <code>ls -al ~/.ssh</code><br> <img src="http://ofjlqteaa.bkt.clouddn.com/hexoDeploy/github1.png" alt=""><br> 如果有文件id_rsa.pub或id_dsa.pub，则直接进入步骤3在GitHub中添加SSH key。当然，如果你不确定这些文件何时生成或者不喜欢这些文件，直接丢进回收站然后进入步骤2也是完全没有任何问题的。</li>
<li><p>生成新的SSH key<br> 生成public/private rsa key pair。在命令行中输入以下指令,其中[email protected]是你GitHub的注册邮箱。<br> <code>ssh-keygen -t rsa -C "[email protected]"</code><br> <img src="http://ofjlqteaa.bkt.clouddn.com/hexoDeploy/github2.png" alt=""><br> 设置passphrase（可直接enter跳过）。设置passphrase后，进行版本控制时，每次与GitHub通信都会要求输入passphrase，以避免误操作。</p>
<p> 确保ssh-agent已经开启:<br> <code>eval 'ssh-agent -s'</code></p>
<p> 将生成的key添加到ssh-agent中（如果你使用的是已经存在的SSH key而不是新生成的，需将<em>id_rsa</em>替换成已存在的私钥文件名），输入如下指令：<br> <code>ssh-add ~/.ssh/id_rsa</code></p>
</li>
<li><p>给你的GitHub账号添加SSH key<br> 复制SSH key到剪贴板上，跟踪到文件目录用编辑器打开或执行以下命令：<br> <code>clip < ~/.ssh/id_rsa.pub</code></p>
<p> 进入你的GitHub账户依次点开头像->Settings->SSH and GPG keys->New SSH key，在Title框中输入任何你想起的名字，Key框中粘贴刚才复制的SSH key，点击Add SSH key输入GitHub密码保存即可。</p>
<p> 输入以下命令检查SSH连接：<br> <code>ssh -T [email protected]</code><br> <img src="http://ofjlqteaa.bkt.clouddn.com/hexoDeploy/github7.png" alt=""><br> 你会看到一个警告信息（<a href="https://help.github.com/articles/what-ip-addresses-does-github-use-that-i-should-whitelist/" target="_blank" rel="external">for more info</a>），如果你不想详细了解输入yes即可。之后会看到如下信息：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">Hi username! You've successfully authenticated, but GitHub does not provide shell access.</div></pre></td></tr></table></figure>
<p> 验证成功。</p>
</li>
</ol>
<h2 id="部署Hexo"><a href="#部署Hexo" class="headerlink" title="部署Hexo"></a>部署Hexo</h2><p>哈，终于到最后一步了。别急，部署之前还需要进行一项非常非常非常非常重要的配置。在Hexo根目录下打开Git Bash输入以下指令：<code>git remote -v</code>。如果返回结果为：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">$ git remote -v</div><div class="line">fatal: Not a git repository (or any of the parent directories): .git</div></pre></td></tr></table></figure></p>
<p>就需要执行<code>git init</code>初始化当前目录作为git仓库，并且添加远程仓库。这里就不赘述了，不明白的可以转到<a href="http://www.runoob.com/git/git-tutorial.html" target="_blank" rel="external">菜鸟网站Git教程</a>详细了解。如果返回结果为：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">$ git remote -v</div><div class="line">origin [email protected]:username/username.github.io.git (fetch)</div><div class="line">origin [email protected]:username/username.github.io.git (push)</div></pre></td></tr></table></figure></p>
<p>则将地址复制，在hexo的配置文件_config.yml，#Deployment下添加如下配置：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">deploy:</div><div class="line"> type: git</div><div class="line"> repo: [email protected]:username/username.github.io.git</div><div class="line"> branch: master</div></pre></td></tr></table></figure></p>
<p>repo项的值就是刚才执行<code>git remote -v</code>获取到的地址。<br>接下来就是激动人心的deploy时刻啦！执行：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">hexo generate</div><div class="line">hexo deploy</div></pre></td></tr></table></figure></p>
<p>执行<code>hexo deploy</code>可能会要求输入在git上验证的邮箱密码，输入完成后再次执行。由于网络状况不同，deploy时间长度不等耐心等待即可。看到<code>INFO Deploy done:git</code>表明部署成功，在浏览器输入username.github.io就可以访问你的个人博客啦！</p>
<h2 id="遇到的问题"><a href="#遇到的问题" class="headerlink" title="遇到的问题"></a>遇到的问题</h2><ol>
<li><p>Could not open a connection to your authenticateion agent.<br> 在设置SSH keys第二步执行<code>ssh-keygen -t rsa -C "[email protected]"</code>后，执行：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">ssh-agent -s</div><div class="line">ssh-add ~/.ssh/id_rsa</div></pre></td></tr></table></figure>
<p> 遇到了如上错误。别怕此时执行：<code>eval 'ssh-agent -s'</code>（注：<em>使用eval 是为了执行ssh-agent 输出的设置环境变量的bash 命令，以确保ssh-add 可以通过 SSH_AUTH_SOCK 环境变量找到ssh-agent</em>）再执行ssh-add即可，输出结果如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">$ eval 'ssh-agent -s'</div><div class="line">Agent pid 16192</div><div class="line">$ssh-add</div><div class="line">Identity added: /c/Users/Admin/.ssh/id_rsa (/c/Users/Admin/.ssh/id_rsa)</div></pre></td></tr></table></figure>
</li>
<li><p>nothing to commit,working tree clean.Could not read Username for ‘https<nolink>://github.com’：Invalid argument<br> 执行<code>hexo d</code>部署时，出现以上错误。原因是没有在hexo目录中初始化git，需初始化并建立远程仓库。提示Could not read Username for ‘https<nolink>://github.com’是因为第三步配置deploy:repo写成了https<nolink>://github.com/xilihuasi/xilihuasi.github.io.git，应参考步骤3配置。</nolink></nolink></nolink></p>
<h2 id="参考文档"><a href="#参考文档" class="headerlink" title="参考文档"></a>参考文档</h2></li>
</ol>
<ul>
<li><a href="http://m.paopaoche.net/new/85988" target="_blank" rel="external">搭建hexo部署到github图文教程</a></li>
<li><a href="https://help.github.com/articles/generating-an-ssh-key/" target="_blank" rel="external">Generrating an SSH key</a></li>
<li><a href="https://github.com/hexojs/hexo/issues/1495" target="_blank" rel="external">Problem with deployment on GitHub</a></li>
<li><a href="https://help.github.com/articles/error-repository-not-found/" target="_blank" rel="external">Error: Repository not found</a></li>
</ul>
]]></content>
<summary type="html">
<p>之前介绍了如何搭建本地hexo环境，相信很多小朋友已经搭建成功了。但是写了博客只放在本地不跟大家分享肯定不是我们想要的，本文就手把手教你怎样把hexo部署到github Page上跟大家分享你的文章。
</summary>
<category term="hexo" scheme="http://yoursite.com/categories/hexo/"/>
<category term="hexo" scheme="http://yoursite.com/tags/hexo/"/>
<category term="github" scheme="http://yoursite.com/tags/github/"/>
</entry>
<entry>
<title>How to build Hexo</title>
<link href="http://yoursite.com/2016/10/24/How-to-build-Hexo/"/>
<id>http://yoursite.com/2016/10/24/How-to-build-Hexo/</id>
<published>2016-10-24T06:38:10.000Z</published>
<updated>2016-11-25T01:58:11.000Z</updated>
<content type="html"><![CDATA[<p>本教程默认你已经搭建好了Node和Git环境</p>
<h2 id="step-1"><a href="#step-1" class="headerlink" title="step 1"></a>step 1</h2><p>在控制台执行如下命令安装hexo：<br><a id="more"></a><br>npm install -g hexo</p>
<blockquote>
<p><em>安装在当前用户目录下，是hexo的全局安装</em></p>
</blockquote>
<h2 id="step-2"><a href="#step-2" class="headerlink" title="step 2"></a>step 2</h2><p>执行初始化命令，初始化hexo到指定目录：<br>hexo init <folder><br>或者cd到指定目录执行初始化命令：<br>hexo init</folder></p>
<h2 id="step-3"><a href="#step-3" class="headerlink" title="step 3"></a>step 3</h2><p>cd到你的初始化目录，执行如下命令生成静态页面至<em>hexo\public</em>目录：<br>hexo generate</p>
<blockquote>
<p><em>命令完成后即可在<em>hexo\public</em>目录下看到当前日期默认生成的html文件，也可在<em>hexo\source__posts</em>目录下看到md文件。不要急，下一步就可以看到hexo在浏览器中访问的效果啦。</em></p>
</blockquote>
<h2 id="step-4"><a href="#step-4" class="headerlink" title="step 4"></a>step 4</h2><p>执行如下命令启动本地服务：<br>hexo server<br>在浏览器中输入(<a href="http://localhost:4000" target="_blank" rel="external">http://localhost:4000</a>) 就可以预览搭建成功的hexo啦！</p>
<h2 id="发表第一篇文章"><a href="#发表第一篇文章" class="headerlink" title="发表第一篇文章"></a>发表第一篇文章</h2><p>执行new命令新建文章，生成指定名称的文章至hexo\source\ _posts\postName.md：<br>hexo new [layout] “postName”<br>其中layout是可选参数，默认值为post。在scaffolds目录下查看可选择的layout，当然也可以新建或编辑。 </p>
<p><img src="http://ofjlqteaa.bkt.clouddn.com/Hexo-Step5.png" alt=""></p>
]]></content>
<summary type="html">
<p>本教程默认你已经搭建好了Node和Git环境</p>
<h2 id="step-1"><a href="#step-1" class="headerlink" title="step 1"></a>step 1</h2><p>在控制台执行如下命令安装hexo：<br>
</summary>
<category term="hexo" scheme="http://yoursite.com/categories/hexo/"/>
<category term="hexo" scheme="http://yoursite.com/tags/hexo/"/>
</entry>
<entry>
<title>Hello World</title>
<link href="http://yoursite.com/2016/10/24/hello-world/"/>
<id>http://yoursite.com/2016/10/24/hello-world/</id>
<published>2016-10-24T02:55:15.621Z</published>
<updated>2016-11-25T01:58:47.000Z</updated>
<content type="html"><![CDATA[<p>Welcome to <a href="https://hexo.io/" target="_blank" rel="external">Hexo</a>! This is your very first post. Check <a href="https://hexo.io/docs/" target="_blank" rel="external">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a href="https://hexo.io/docs/troubleshooting.html" target="_blank" rel="external">troubleshooting</a> or you can ask me on <a href="https://github.com/hexojs/hexo/issues" target="_blank" rel="external">GitHub</a>.</p>
<a id="more"></a>
<h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo new <span class="string">"My New Post"</span></div></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/writing.html" target="_blank" rel="external">Writing</a></p>
<h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo server</div></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/server.html" target="_blank" rel="external">Server</a></p>
<h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo generate</div></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/generating.html" target="_blank" rel="external">Generating</a></p>
<h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ hexo deploy</div></pre></td></tr></table></figure>
<p>More info: <a href="https://hexo.io/docs/deployment.html" target="_blank" rel="external">Deployment</a></p>
]]></content>
<summary type="html">
<p>Welcome to <a href="https://hexo.io/">Hexo</a>! This is your very first post. Check <a href="https://hexo.io/docs/">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a href="https://hexo.io/docs/troubleshooting.html">troubleshooting</a> or you can ask me on <a href="https://github.com/hexojs/hexo/issues">GitHub</a>.</p>
</summary>
<category term="hexo" scheme="http://yoursite.com/categories/hexo/"/>
<category term="hexo" scheme="http://yoursite.com/tags/hexo/"/>
</entry>
</feed>