diff --git a/source/_posts/前端杂烩/CSS布局(1).md b/source/_posts/前端杂烩/CSS布局(1).md
new file mode 100644
index 0000000..c349547
--- /dev/null
+++ b/source/_posts/前端杂烩/CSS布局(1).md
@@ -0,0 +1,250 @@
+---
+title: CSS布局(1)
+date: 2018-5-14 22:38:32
+tags:
+ - 前端
+ - css
+categories:
+ - 前端杂烩
+---
+
+#### 常用的居中方法
+1. **水平居中**
+```xml
+
+```
+对于子元素的不同情况 , 需要进行不同的处理
+
++ 行内元素 : 对父元素设置`text-align:center`
++ 定宽的块元素 : 对子元素设置`margin-left:auto`以及`margin-right:auto`
++ 不定宽的块元素 : 可以把子元素转化为行内元素 , 然后使用行内元素的方案 , 对子元素设置`display: inline` , 对父元素设置`text-align:center`
+
+> **通用方案**
+> 使用flex布局 , 对父元素设置
+```css
+.parent {
+ display : flex;
+ justify-content : center;
+}
+```
+
+2. **垂直居中**
+垂直居中的情况通常是父元素的高度固定 , 以下是在此前提下实现的
++ 子元素为块元素 : 设置子元素`position:absolute` , 然后`margin:auto`
++ 子元素为单行内联文本 : 父元素的`height`与`line-height`相同即可
++ 子元素为多行内联文本 : 父元素`display:table-cell` , 再设置`vertical-align:middle`
+例如
+```html
+
+
123456
+
123456
+
123456
+
内容
+
+```
+
+样式
+```css
+.layout {
+ max-width:960px;
+ margin:0 auto;
+}
+```
+---
+#### 多列布局
+可能有以下各种情况 , 当然如果更多列的话也是类似的
+
+
+##### 实现方式1 : float+margin
+DOM结构
+```xml
+
+```
+CSS样式
+```css
+.sub,.extra,.main {
+ height : 300px;
+}
+.sub {
+ width : 100px;
+ float : left;
+ background-color: pink;
+}
+.extra {
+ width : 200px;
+ float : right;
+ background-color: green;
+}
+.main {
+ margin:0 200px 0 100px;
+ background-color: blue;
+}
+```
+实际效果如下
+
+> **注意** : DOM文档的书写顺序，先写两侧栏，再写主面板，更换后则侧栏会被挤到下一列
+> 这种布局方式比较简单明了 , 缺点是渲染时首先渲染了侧边栏 , 而不是重要的内容区域
+
+##### 实现方式2 : position+margin
+1. 对两个侧边栏分别设置宽度
+2. 将两个侧边栏设置为绝对定位 , 需要位于左侧的left值为0 , 位于右侧的right值为0
+3. 内容区域设置左外边距和右外边距
+```css
+.sub,.extra,.main {
+ height : 300px;
+}
+.sub,.extra {
+ position: absolute;
+ top : 0;
+ width : 200px;
+}
+.sub {
+ left : 0;
+ background-color: pink;
+}
+.extra {
+ right : 0;
+ background-color: green;
+}
+
+.main {
+ margin:0 200px;
+ backgroun-color: blue;
+}
+```
+> 如果中间栏有最小宽度限制 , 或者其中包含有宽度的元素 , 那么当窗口宽度压缩到一定程度 , 中间栏与侧栏将会发生重叠
+
+##### 实现方式3 : 圣杯布局(float + 负margin + padding + position)
+
+DOM结构
+```xml
+
+```
+布局步骤:
+
+1. 三者都设置向左浮动。
+2. 设置main宽度为100%，设置两侧栏的宽度。
+3. 设置 负边距，sub设置负左边距为100%，extra设置负左边距为负的自身宽度。
+4. 设置main的padding值给左右两个子面板留出空间。
+5. 设置两个子面板为相对定位，sub的left值为负的sub宽度，extra的right值为负的extra宽度。
+
+CSS样式
+```css
+.sub , .extra, .main {
+ float :left;
+ height : 300px;
+}
+.main {
+ width : 100%;
+ background-color: red;
+}
+.sub {
+ width : 100px;
+ margin-left: -100%;
+ position: relative;
+ left : -100px;
+ background-color: pink;
+}
+.extra {
+ width : 200px;
+ margin-left: -200px;
+ position: relative;
+ right: -200px;
+ background-color: blue;
+}
+#content {
+ padding : 0 200px 0 100px;
+}
+```
+
+> 这种布局方式仍然存在一个缺陷 : 当main的实际宽度比侧边栏的宽度小的时候 , 布局就会乱掉
+
+##### 实现方式4 : 双飞翼布局(float + 负margin + margin)
+双飞翼布局实际上是在圣杯布局的基础上做了改进 , 在main部分的外层套上了一层div
+并设置margin,由于两侧栏的负边距都是相对于main-wrap而言，main的margin值变化便不会影响两个侧栏，因此省掉了对两侧栏设置相对布局的步骤
+DOM结构
+```xml
+
+侧边栏1
+
+```
+布局步骤
+1. 三者都设置向左浮动。
+2. 设置main-wrap宽度为100%，设置两个侧栏的宽度。
+3. 设置 负边距，sub设置负左边距为100%，extra设置负左边距为负的自身宽度。
+4. 设置main的margin值给左右两个子面板留出空间。
+
+CSS样式
+```css
+.main-wrap, .sub, .extra {
+ float : left;
+ height:300px;
+}
+.main-wrap {
+ width : 100%;
+}
+.sub {
+ width : 100px;
+ margin-left: -100%;
+ background-color: red;
+}
+.extra {
+ width : 200px;
+ margin-left: -200px;
+ background-color: green;
+}
+.main {
+ margin:0 200px 0 100px;
+ background-color: pink;
+ height:300px;
+}
+```
\ No newline at end of file
diff --git a/source/_posts/前端杂烩/CSS布局(2) - Flex.md b/source/_posts/前端杂烩/CSS布局(2) - Flex.md
new file mode 100644
index 0000000..577a1af
--- /dev/null
+++ b/source/_posts/前端杂烩/CSS布局(2) - Flex.md
@@ -0,0 +1,97 @@
+---
+title: CSS布局(2) - Flex
+date: 2018-5-15 22:38:32
+tags:
+ - 前端
+ - css
+categories:
+ - 前端杂烩
+---
+
+Flex是`Flexible Box`的缩写，意为`弹性布局`，用来为盒状模型提供最大的灵活性。
+目前，它已经得到了所有浏览器的支持
+Flex布局将成为未来布局的首选方案
+
+任何一个容器都可以指定为flex布局
+```css
+/*对于块元素*/
+.box {
+ display : flex;
+}
+/*对于行内元素*/
+.inline-box {
+ display : inline-flex;
+}
+```
+为了兼容性的需要 , 通常可以加上`display:-webkit-flex;`
+> 设为Flex布局以后，子元素的`float`、`clear`和`vertical-align`属性将失效
+
+### Flex容器的基本模型
+采用了flex布局的元素 , 可以称之为`Flex容器` , 它的子元素自动成为这个容器的成员 , 被称为`Flex项目`
+
+容器默认存在两根轴：水平的`主轴（main axis）`和竖直的`交叉轴（cross axis）`。主轴的开始位置（与边框的交叉点）叫做`main start`，结束位置叫做`main end`；交叉轴的开始位置叫做`cross start`，结束位置叫做`cross end`。
+项目默认沿主轴排列。单个项目占据的主轴空间叫做`main size`，占据的交叉轴空间叫做`cross size`。
+
+### Flex容器的属性
+#### flex-direction
+决定主轴的方向 , 也就是项目的排列方向
+row(默认) | row-reverse | column | column-reverse
+
+
+#### flex-wrap
+默认情况下 , 项目都排列在一条轴线上 , 该属性定义了当一条轴线排列不下的时候 , 如何换行
+nowrap(默认) | wrap | wrap-reverse
+
+
+#### flex-flow
+这个属性是上面两个属性的简写形式 , 例如
+flex-flow : column wrap , 就相当于 flex-direction:column;flex-wrap:wrap;
+
+#### justify-content
+项目在主轴上的对其方式
+flex-start(默认) | flex-end | center | space-between | space-around
+( 假设主轴为从左到右 ↓ )
+
+
+#### align-items
+定义项目在交叉轴上如何对齐
+flex-start | flex-end | center | baseline | stretch(默认)
+
+
+#### align-content
+定义了多根轴线的对齐方式 , 如果项目只形成了一条轴线 , 那么该属性不起作用
+flex-start | flex-end | center | space-between | space-around | stretch(默认)
+
+
+
+### 项目的属性
+
+#### order
+定义项目的排列顺序 , 升序排列 , 默认值为0
+
+#### flex-grow
+定义项目的放大比例 , 默认为0 , 即为即使有剩余的空间 , 也不放大
+> 这个值定义的是不同项目之间的放大比值
+> 比如共有3个项目 , 一个项目的flex-grow为2 , 其余的为1 , 如果有剩余可供放大的空间为400px , 那个flex-grow为2的项目将多占据200px , 其余2个各自多占据100px
+
+#### flex-shrink
+定义项目的缩小比例 , 默认为1 , 即空间不足时 , 该项目将被压缩
+与flex-grow类似 , 这个属性也是不同项目之间的一个比例
+如果定义为0 , 则不会被压缩 , 负值无效
+
+#### flex-basis
+定义了在分配多余空间之前 , 项目占据的主轴空间
+ <length> | auto(默认)
+它可以设为像width height类似的值 , 比如100px , 项目将占据固定的主轴空间
+
+#### flex
+是flex-grow flex-shrink flex-basis的简写形式
+默认 0 1 auto , 后两个值可选
+
+#### align-self
+允许单个项目与其他项目在交叉轴上有不同的对齐方式
+也就是Flex容器定义的align-items在该项目上不会生效 , 而会被这个项目自身的align-self覆盖
+auto(默认) | flex-start | flex-end | center | baseline | stretch
+默认值auto表示继承父元素的align-items属性 , 除了auto以外 , 可以取的值与align-items完全一致
+
+
diff --git a/source/_posts/前端杂烩/CSS布局(3) - Flex实践.md b/source/_posts/前端杂烩/CSS布局(3) - Flex实践.md
new file mode 100644
index 0000000..6c4a182
--- /dev/null
+++ b/source/_posts/前端杂烩/CSS布局(3) - Flex实践.md
@@ -0,0 +1,104 @@
+---
+title: CSS布局(3) - Flex实践
+date: 2018-5-16 22:38:32
+tags:
+ - 前端
+ - css
+categories:
+ - 前端杂烩
+---
+
+
+熟悉flex布局方式以后 , 就会发现flex布局十分灵活
+19.1当中提到的多列布局
+使用flex都可以以十分简洁的代码搞定
+
+DOM结构
+```xml
+
+
+
+
+
+```
+
+css样式
+```css
+.layout {
+ height : 200px;
+ display: flex;
+}
+.layout > .layout_aside {
+ background-color: pink;
+ width : 100px;
+}
+.layout > .layout_main {
+ background-color: #ccc;
+ flex-grow: 1;
+}
+```
+无论结构是什么样子 , 只要让main区域自动放大 , 侧边栏的宽度固定即可
+
+---
+对于常见的 上 左下 右下 将整个窗口区域分为3部分 , 并且外部区域没有滚动条的布局 ( 通常右下作为主内容显示区 , 这部分可以有自己的纵向滚动条 )
+使用flex实现起来也十分简单 , 不需要使用js获取可视区域的尺寸进行控制
+
+DOM结构
+```xml
+
+```
+main是最外层的flex容器 , 其中包含top和down两个项目
+down本身也是一个flex容器 , 其中包含left和content两个项目
+
+CSS样式
+```css
+* {
+ margin: 0;
+ padding : 0;
+}
+#main {
+ height : 100%;
+ display: flex;
+ flex-direction: column;
+}
+#main > .top{
+ height : 50px;
+ background-color: blue;
+}
+#main > .down {
+ display: flex;
+ flex-grow: 1;
+}
+#main > .down > .left{
+ width : 200px;
+ background-color: yellow;
+}
+#main > .down > .content {
+ flex-grow: 1;
+ background-color: pink;
+}
+```
\ No newline at end of file
diff --git a/source/_posts/前端杂烩/CSS布局(4) - Grid.md b/source/_posts/前端杂烩/CSS布局(4) - Grid.md
new file mode 100644
index 0000000..6a66314
--- /dev/null
+++ b/source/_posts/前端杂烩/CSS布局(4) - Grid.md
@@ -0,0 +1,138 @@
+---
+title: CSS布局(4) - grid
+date: 2018-5-17 22:38:32
+tags:
+ - 前端
+ - css
+categories:
+ - 前端杂烩
+---
+
+Grid布局是网站设计的基础
+是创建网格布局最强大和最简单的工具
+
+### FlexBox与Grid
+FlexBox是一维布局系统 , 适合做局部布局 , 比如导航栏组件
+Grid是二维布局系统 , 通常用于整个页面的规划
+二者从应用场景来说并不冲突
+虽然FlexBox也可以用于大的页面布局 , 但是没有Grid强大和灵活
+二者结合使用更加轻松
+
+### 应用指南
+
+#### HelloWorld
+要把某个元素变成一个网格(grid) , 只需要把`display`属性设置为`grid`即可
+DOM结构
+```xml
+
+
1
+
2
+
3
+
4
+
5
+
6
+
`元素一样 , 我们常常需要某个单元格来横跨多列 , 或者纵跨多行
+体现在grid当中 , 就是对子元素添加css属性进行控制了
+但是需要首先了解grid布局当中的一个参照 , 就是网格线
+
+这里有4条纵向的网格线 , 也就是columns的网格线
+以及3条横向的网格线 , 也就是rows的网格线
+
+```xml
+
+```
+现在我们要让item1横跨3列 , 也就是从第一条纵向网格线 , 到第四条纵向网格线
+那么需要对其定义css属性如下
+```css
+.wrapper > .item1 {
+ grid-column-start: 1;
+ grid-column-end: 4;
+}
+```
+
+这个元素实际占据了3个网格 , 把之后的元素都推到了下一行
+
+> 到这里grid布局比起传统的table元素 , 优势就体现出来了
+grid本身虽是二维布局 , 但是内部的元素却是以一维方式去定义的 , 在网格当中顺序填充 , 在页面中表现为二维结构
+而传统的table元素 , 则必须要在其中以二维的方式去定义tr和td
+灵活性相比就差了很多
+
+我们还可以用更简洁的写法
+```css
+.wrapper > .item1 {
+ grid-column: 1 / 4;
+}
+```
+
+#### 再复杂一些
+理解了子元素的控制是以网格线为参照之后
+我们就可以实现出更加复杂的布局了
+```css
+.wrapper {
+ display : grid;
+ grid-template-rows: 60px 40px 60px;
+ grid-template-columns: 120px 60px 80px;
+}
+.wrapper > .item1 {
+ grid-column-start: 1;
+ grid-column-end: 3;
+}
+.wrapper > .item3 {
+ grid-row-start: 2;
+ grid-row-end: 4;
+}
+.wrapper > .item4 {
+ grid-column-start: 2;
+ grid-column-end: 4;
+}
+```
+实际效果如下
+
diff --git a/source/_posts/前端杂烩/SASS - 初见.md b/source/_posts/前端杂烩/SASS - 初见.md
new file mode 100644
index 0000000..42a90c0
--- /dev/null
+++ b/source/_posts/前端杂烩/SASS - 初见.md
@@ -0,0 +1,122 @@
+---
+title: SASS - 初见
+date: 2018-5-11 22:38:32
+tags:
+ - 前端
+ - sass
+categories:
+ - 前端杂烩
+---
+
+
+CSS本身并不算是一种编程语言 , 它没有变量 , 也没有条件语句
+只是作为单纯的描述 , 写起来比较费事 , 同时也需要考虑很多的兼容性问题
+很自然地 , 有人开始为CSS加入编程元素 , 这类工具就叫做`CSS预处理器`
+这类工具使用编程的风格去编写类似CSS的代码 , 然后通过工具的处理生成浏览器可以识别的CSS文件
+
+#### SASS与SCSS
+这两者其实是同一种东西 , 都可以称之为SASS
++ 文件的扩展名不同 , 分别是sass和scss
++ sass以严格的缩进式语法规则来编写 , 不带大括号和分号 , 而scss的语法与css的语法非常类似
+
+下面是最简单的例子 , 运用了变量的定义和调用
+sass语法
+```scss
+$font-stack: Helvetica, sans-serif //定义变量
+$primary-color: #333 //定义变量
+
+body
+ font: 100% $font-stack
+ color: $primary-color
+```
+
+scss语法
+```scss
+$font-stack: Helvetica, sans-serif;
+$primary-color: #333;
+
+body {
+ font: 100% $font-stack;
+ color: $primary-color;
+}
+```
+最终编译出来的css都是
+```
+body {
+ font: 100% Helvetica, sans-serif;
+ color: #333;
+}
+```
+---
+#### sass编译工具
+sass本身是类似ruby的语法的 , 使用ruby去编译sass是最直接的
+可以使用`ruby -v` 查看是否安装ruby ( Mac系统自带 )
+使用ruby的包管理工具`gem`安装sass模块
+```bash
+$ gem install sass
+```
+> 如果需要进行卸载 , 执行 gem uninstall sass 即可
+
+执行`sass -v` 正常显示版本号代表安装成功
+执行编译的操作非常简单
+```bash
+#sass 源文件名:目标文件名
+$ sass test.scss:test.css
+```
+> + 添加`--watch`参数可以启动一个程序监控该scss文件的变化 , 一旦发生变化则重新执行编译
+> + 添加`--style`参数可以使用不同风格的输出方式 ( 通常可以用于压缩css代码 )
+> 例如`sass test.scss:test.css --style compressed`
+> nested - 嵌套输出
+> expanded - 展开输出
+> compact - 紧凑输出
+> compressed - 压缩输出
+
+
+---
+#### node-sass
+这个模块是nodejs的一个第三方模块 , 用于编译sass代码 , 为了方便 , 我们配合webpack来进行使用
+```bash
+$ npm install node-sass sass-loader --save-dev
+```
+
+为了查看编译过后的文件 , 我们需要把编译过后的css代码放入一个独立的文件当中
+需要使用`extract-text-webpack-plugin`模块
+这是一个webpack的插件
+安装之后
+在webpack.config.js当中
+```javascript
+var webpack = require("webpack");
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+module.exports = {
+ entry: {
+ entry : './src/entry.js'
+ },
+ output: {
+ path: __dirname+"/dist",
+ filename: 'js/[name].bundle.js'
+ },
+ module: {
+ loaders: [
+ { test: /\.css$/, loaders: ["style-loader","css-loader"]},
+ { test: /\.scss$/, loaders : ExtractTextPlugin.extract({fallback:"style-loader",use:["css-loader","postcss-loader","sass-loader?outputStyle=compact"]})}
+ ]
+ },
+ plugins : [
+ //压缩打包之后的js
+ new webpack.optimize.UglifyJsPlugin({
+ compress: {
+ warnings: false
+ }
+ }),
+ //写入的文件
+ new ExtractTextPlugin("css/[name][contenthash].css")
+ ]
+};
+```
+> 上面为sass-loader加的参数`outputStyle`作用与ruby当中的--style相同
+
+在src/entry.js当中引入scss文件
+```javascript
+require("./style/test.scss");
+```
+
diff --git a/source/_posts/前端杂烩/SASS - 语法(1).md b/source/_posts/前端杂烩/SASS - 语法(1).md
new file mode 100644
index 0000000..d0f3e6f
--- /dev/null
+++ b/source/_posts/前端杂烩/SASS - 语法(1).md
@@ -0,0 +1,261 @@
+---
+title: SASS - 语法(1)
+date: 2018-5-12 22:38:32
+tags:
+ - 前端
+ - sass
+categories:
+ - 前端杂烩
+---
+
+### 变量
+在scss当中定义变量的语法如下
+
+$变量名 : 变量值;
+
+代码块外部定义的变量可以在全局范围内使用
+
+在代码块内部定义的变量是局部变量
+例如
+```scss
+.box {
+ $color:red;
+ a{
+ color:$color;
+ }
+}
+```
+如果该变量的值需要嵌入到字符串当中 , 需要加`#{ }`
+```scss
+$side : left;
+.box {
+ border-#{$side}-radius:5px;
+}
+```
+#### 默认变量
+sass的默认变量一般用来设置默认值 , 然后根据需求来进行覆盖
+例如
+```scss
+$a_padding : 20px !default;
+$a_padding : 6px;
+```
+如果对默认变量的值进行了覆盖 , 那么实际输出的就是覆盖之后的值 , 否则输出的就是默认值
+
+如果是在一个单文件当中 , 并没有必要这样做
+默认变量在`组件化开发`的时候会非常有用
+
+> 什么时候需要声明变量
+> + 该值至少重复出现了两次
+> + 该值至少可能会被更新一次
+> + 该值所有的表现都与变量有关
+
+### 嵌套
+
+使用嵌套的方式来编写css代码 , 可以使元素之间的层级关系更清晰 , 代码的可读性更强
+
+#### 选择器嵌套
+```scss
+div {
+ h1 {
+ color :red;
+ }
+}
+```
+编译后的结果为
+```
+div h1 {
+ color : red;
+}
+```
+前面如果加上 `>`可以作为父子选择器
+
+在嵌套的代码块内 , 可以使用`&`引用父元素
+比如
+```scss
+a {
+ &:hover{color:red;}
+ &:visited{color:gray;}
+}
+```
+#### 属性嵌套
+有一些复合属性可以使用嵌套的方式来写
+比如border
+```scss
+p {
+ border : {
+ color:red;
+ width:2px;
+ }
+}
+```
+**注意** : border的后面必须要加上冒号
+
+### 注释
+SCSS可以有两种风格的注释
+一种是标准的css注释 `/* */`
+编译会保留
+另一种是单行注释 `//` , 编译过程不保留
+
+### Mixin
+
+Mixin有点像C语言的宏定义 , 是可以重用的代码块
+```scss
+//使用@mixin命令,定义一个代码块
+@mixin left {
+ float : left;
+ margin-left : 10px;
+}
+//使用@include调用这个mixin
+.box {
+ @include left;
+}
+```
+mixin的强大之处 , 在于可以去指定参数和缺省值
+```scss
+@mixin left($value:10px) {
+ float : left;
+ margin-left : $value;
+}
+.box {
+ @include left(20px);
+}
+```
+如果引入的时候不传参数 , 则使用缺省值
+实例 : 生成浏览器前缀
+```scss
+@mixin rounded($vert, $horz, $radius: 10px) {
+ border-#{$vert}-#{$horz}-radius: $radius;
+ -moz-border-radius-#{$vert}#{$horz}: $radius;
+ -webkit-border-#{$vert}-#{$horz}-radius: $radius;
+}
+
+#navbar li {
+ @include rounded(top,left);
+}
+#footer {
+ @include rounded(top,left,5px);
+}
+```
+
+### 颜色函数
+颜色函数是基于某个颜色进行的色彩调整
+利用这些函数 , 可以很方便完成界面上风格统一的色彩搭配
+涉及色彩的部分 , 可以很方便修改 , 完成主题风格的切换
+```scss
+$base_color : chocolate;
+
+@mixin size {
+ width:200px;
+ height:100px;
+}
+
+.div1 {
+ @include size;
+ background:{
+ color: darken($base_color, 10%);
+ }
+}
+.div2 {
+ @include size;
+ background:{
+ color: $base_color;
+ }
+}
+.div3 {
+ @include size;
+ background:{
+ color: lighten($base_color, 10%);
+ }
+}
+```
+效果图
+
+
+常用的颜色函数
++ `darken` , `lighten` - 调整亮度 , 变暗/变亮
++ `sturate` , `desaturate` - 增加/减小 饱和度
++ `adjust-hue` - 调整 色相
++ `grayscale` - 灰度处理
++ `complement` - 色彩反相
+
+### 文件引入
+使用`@import` 引入另一个样式文件 , 可以是scss文件 , 也可以是css文件
+```scss
+@import "path/filename.scss"
+@import "path/base.css"
+```
+
+### 继承
+SASS允许一个选择器 , 继承另一个选择器
+```scss
+.class1 {
+ border : 1px solid #ddd;
+}
+.class2 {
+ @extend .class1;
+ font-size : 120%;
+}
+```
+在编译过后 , 会生成
+```css
+.class1, .class2 {
+ border : 1px solid #ddd;
+}
+.class2 {
+ font-size:120%;
+}
+```
+相比于mixin会生成很多重复的代码 , 这种方式能够对代码进行复用 , 有利于提高css解析的效率
+
+### 流程控制
+#### 条件语句
+使用`@if`和`@else`可以进行判断
+```scss
+@if lightness($color) > 30% {
+ background-color: #000;
+} @else {
+ background-color: #fff;
+}
+```
+#### 循环语句
+for循环
+```scss
+@for $i from 1 to 10 {
+ .border-#{$i} {
+ border: #{$i}px solid blue;
+ }
+}
+```
+while循环
+```scss
+$i: 6;
+@while $i > 0 {
+ .item-#{$i} { width: 2em * $i; }
+ $i: $i - 2;
+}
+```
+each循环 , 类似于迭代器
+```scss
+@each $member in a, b, c, d {
+ .#{$member} {
+ background-image: url("/image/#{$member}.jpg");
+ }
+}
+```
+
+
+### 自定义函数
+
+使用`@function`可以自定义一个函数
+```scss
+@function double($n) {
+ @return $n * 2;
+}
+#sidebar {
+ width : double(5px);
+}
+```
+
+附 : 知识结构梳理
+
+
diff --git a/source/_posts/前端杂烩/SASS - 语法(2).md b/source/_posts/前端杂烩/SASS - 语法(2).md
new file mode 100644
index 0000000..1a1ee0b
--- /dev/null
+++ b/source/_posts/前端杂烩/SASS - 语法(2).md
@@ -0,0 +1,142 @@
+---
+title: SASS - 语法(2)
+date: 2018-5-13 22:38:32
+tags:
+ - 前端
+ - sass
+categories:
+ - 前端杂烩
+---
+
+### 占位符 %
+使用占位符定义的代码块 , 它同普通的基类一样可以被继承 , 但是本身在编译后不会产生任何代码 , 可以有效避免代码的冗余
+
+```scss
+%base {
+ margin : 5px;
+}
+.btn {
+ @extend %base;
+}
+```
+
+编译后会得到
+```css
+.btn {
+ margin : 5px;
+}
+```
+
+### 数据类型
+在sass当中包含以下几种数据类型
++ **数字** , 如 1 2.6 10px
++ **字符串** , 可以有引号 , 也可以无引号
++ **颜色** , 如 blue #04a3f9 rgba(255,0,0,0.5)
++ **布尔值** , true与false
++ **值列表** , 用空格或者逗号分隔的多个值构成的集合
+
+对于其他css当中支持的标识 , 比如!import声明 , 都被视为无引号字符串
+
+对于有引号字符串 , 当被作为插值使用时 , 会自动变为无引号字符串
+```scss
+$direction : ('left', "right");
+
+.panel {
+ @each $direct in $direction {
+ margin-#{$direct} : 10px;
+ padding-#{$direct} : 10px;
+ }
+}
+```
+
+### 值列表相关函数
+
+相关的函数比较多 , 这里列举几个常用的
+#### `nth(值列表, 索引)`
+根据索引获取值列表当中的某一个元素 ( 索引值从1开始 )
+```scss
+$direction : (left, right);
+
+.panel {
+ margin-#{nth($direction, 2)} : 10px;
+ padding-#{nth($direction, 1)} : 10px;
+}
+```
+编译后的结果为
+```css
+.panel {
+ margin-right: 10px;
+ padding-left: 10px;
+}
+```
+#### `join(值列表1, 值列表2)`
+将两个值列表合并为一个值列表 , 并返回合并后的结果
+```scss
+$num1 : (10px, 30px);
+$num2 : (5px, 9px);
+
+.panel {
+ margin: join($num1, $num2);
+}
+```
+
+#### `append(值列表, 新元素)`
+将某个元素添加到值列表的末尾 , 并返回新的列表 ( 是产生一个新的列表 , 并不会改变原本的列表 )
+
+```scss
+$num1 : (10px, 30px);
+.box {
+ margin : append($num1, 15px);
+ padding : $num1;
+}
+```
+```css
+.box {
+ margin : 10px 30px 15px;
+ padding : 10px 30px;
+}
+```
+
++ `length(值列表)` - 返回列表中元素的数量
++ `index(值列表, 元素)` - 返回该元素在值列表当中的位置 , 不存在则返回false
+
+### 运算
+
+#### 长度运算
+
+```scss
+$width1 : 30pt;
+$width2 : 10px;
+
+.panel {
+ width : $width1 + $width2;
+}
+```
+编译后结果
+```css
+.panel { width: 37.5pt; }
+```
+> **注意**
+> 1. 编译后结果的单位以表达式中第一个有单位的元素的单位为准 , 单位不一致的会自动进行换算
+> 2. in cm mm pt pc px等属于绝对单位
+> em rem ex 属于相对当前字体的单位
+> 不同类型的不能直接进行运算
+> 3. 运算符两侧最好加上空格 , 避免与css本身的连接符冲突 ( 减号会存在此问题 )
+> 4. 乘法运算当中只能有一个元素存在单位 , 如果有多个元素存在单位则会报错
+> 5. 除法运算最好加括号 , 对于两个常量的情况 , 比如`width : 20px/2` , 编译后并不会执行该运算 , 应该写作`width:(20px/2)`
+
+#### 颜色运算
+对于颜色类型的变量或者常量 , 都是支持运算的
+运算的方式是进行分段运算 , 也就是对 RGB 的值分别进行运算
+( 颜色值本身相当于4个数字 , 并不存在单位 , 所以不存在长度运算当中的单位类型不一致无法计算的问题 )
+```scss
+p {
+ color: #010203 + #040506;
+}
+```
+编译后的结果
+```css
+p { color: #050709; }
+```
+> **注意**
+> 如果使用rgba , 也就是存在透明度的值 , 运算当中的a值必须相等 , 否则无法运算
diff --git a/source/images/前端杂烩/Sass知识结构梳理.png b/source/images/前端杂烩/Sass知识结构梳理.png
new file mode 100644
index 0000000..6944e1e
Binary files /dev/null and b/source/images/前端杂烩/Sass知识结构梳理.png differ
diff --git a/source/images/前端杂烩/color_function.png b/source/images/前端杂烩/color_function.png
new file mode 100644
index 0000000..60ddc52
Binary files /dev/null and b/source/images/前端杂烩/color_function.png differ
diff --git a/source/images/前端杂烩/each循环.png b/source/images/前端杂烩/each循环.png
new file mode 100644
index 0000000..1718edd
Binary files /dev/null and b/source/images/前端杂烩/each循环.png differ
diff --git a/source/images/前端杂烩/flex/Flex容器.png b/source/images/前端杂烩/flex/Flex容器.png
new file mode 100644
index 0000000..4ae2a84
Binary files /dev/null and b/source/images/前端杂烩/flex/Flex容器.png differ
diff --git a/source/images/前端杂烩/flex/align-content.png b/source/images/前端杂烩/flex/align-content.png
new file mode 100644
index 0000000..a1eb427
Binary files /dev/null and b/source/images/前端杂烩/flex/align-content.png differ
diff --git a/source/images/前端杂烩/flex/align-items.png b/source/images/前端杂烩/flex/align-items.png
new file mode 100644
index 0000000..1adf754
Binary files /dev/null and b/source/images/前端杂烩/flex/align-items.png differ
diff --git a/source/images/前端杂烩/flex/align-self.png b/source/images/前端杂烩/flex/align-self.png
new file mode 100644
index 0000000..b84e502
Binary files /dev/null and b/source/images/前端杂烩/flex/align-self.png differ
diff --git a/source/images/前端杂烩/flex/flex-direction.png b/source/images/前端杂烩/flex/flex-direction.png
new file mode 100644
index 0000000..50b2d1e
Binary files /dev/null and b/source/images/前端杂烩/flex/flex-direction.png differ
diff --git a/source/images/前端杂烩/flex/flex-wrap.jpg b/source/images/前端杂烩/flex/flex-wrap.jpg
new file mode 100644
index 0000000..e5223e4
Binary files /dev/null and b/source/images/前端杂烩/flex/flex-wrap.jpg differ
diff --git a/source/images/前端杂烩/flex/justify-content.png b/source/images/前端杂烩/flex/justify-content.png
new file mode 100644
index 0000000..98afeae
Binary files /dev/null and b/source/images/前端杂烩/flex/justify-content.png differ
diff --git a/source/images/前端杂烩/grid/grid1.png b/source/images/前端杂烩/grid/grid1.png
new file mode 100644
index 0000000..5e66c88
Binary files /dev/null and b/source/images/前端杂烩/grid/grid1.png differ
diff --git a/source/images/前端杂烩/grid/grid2.png b/source/images/前端杂烩/grid/grid2.png
new file mode 100644
index 0000000..900caf2
Binary files /dev/null and b/source/images/前端杂烩/grid/grid2.png differ
diff --git a/source/images/前端杂烩/grid/grid3.png b/source/images/前端杂烩/grid/grid3.png
new file mode 100644
index 0000000..32e3216
Binary files /dev/null and b/source/images/前端杂烩/grid/grid3.png differ
diff --git a/source/images/前端杂烩/grid/grid4.png b/source/images/前端杂烩/grid/grid4.png
new file mode 100644
index 0000000..4f19201
Binary files /dev/null and b/source/images/前端杂烩/grid/grid4.png differ
diff --git a/source/images/前端杂烩/grid/grid5.png b/source/images/前端杂烩/grid/grid5.png
new file mode 100644
index 0000000..b516377
Binary files /dev/null and b/source/images/前端杂烩/grid/grid5.png differ
diff --git a/source/images/前端杂烩/grid/grid6.png b/source/images/前端杂烩/grid/grid6.png
new file mode 100644
index 0000000..27debd9
Binary files /dev/null and b/source/images/前端杂烩/grid/grid6.png differ
diff --git a/source/images/前端杂烩/grid/grid7.png b/source/images/前端杂烩/grid/grid7.png
new file mode 100644
index 0000000..1442ab5
Binary files /dev/null and b/source/images/前端杂烩/grid/grid7.png differ
diff --git a/source/images/前端杂烩/many_column2.png b/source/images/前端杂烩/many_column2.png
new file mode 100644
index 0000000..fd07a80
Binary files /dev/null and b/source/images/前端杂烩/many_column2.png differ
diff --git a/source/images/前端杂烩/many_columns.png b/source/images/前端杂烩/many_columns.png
new file mode 100644
index 0000000..b7bb309
Binary files /dev/null and b/source/images/前端杂烩/many_columns.png differ
diff --git a/source/images/前端杂烩/single_column.png b/source/images/前端杂烩/single_column.png
new file mode 100644
index 0000000..533b3df
Binary files /dev/null and b/source/images/前端杂烩/single_column.png differ
diff --git a/themes/hexo-theme-xups/layout/_partial/archive-post.ejs b/themes/hexo-theme-xups/layout/_partial/archive-post.ejs
index 4285194..917c162 100644
--- a/themes/hexo-theme-xups/layout/_partial/archive-post.ejs
+++ b/themes/hexo-theme-xups/layout/_partial/archive-post.ejs
@@ -18,7 +18,7 @@
<%- partial('post/title', { class_name: 'post-title' }) %>
- <%- post.author || 'Jelon' %> 发表于
+ <%- post.author || '柠烟夏季' %> 发表于
<%- partial('post/date', { date_format: 'YYYY-MM-DD' }) %>
diff --git a/themes/hexo-theme-xups/layout/_partial/article.ejs b/themes/hexo-theme-xups/layout/_partial/article.ejs
index d99c40c..45923a8 100644
--- a/themes/hexo-theme-xups/layout/_partial/article.ejs
+++ b/themes/hexo-theme-xups/layout/_partial/article.ejs
@@ -4,7 +4,7 @@
<%= post.title %>
- <%- post.author || 'Jelon' %> 发表于
+ <%- post.author || '柠烟夏季' %> 发表于
<%- partial('post/date', { date_format: 'YYYY-MM-DD' }) %>