前端杂烩

source/_posts/前端杂烩/CSS布局(1).md

@@ -0,0 +1,250 @@
+---
+title: CSS布局(1)
+date: 2018-5-14 22:38:32
+tags: 
+	- 前端
+	- css
+categories: 
+	- 前端杂烩
+---
+
+#### 常用的居中方法
+1. **水平居中**
+```xml
+<div class="parent">
+	<div class="child"></div>
+</div>
+```
+对于子元素的不同情况 , 需要进行不同的处理
+<!-- more -->
++ 行内元素 : 对父元素设置`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
+<div class="parent">
+	<p>123456</p>
+	<p>123456</p>
+	<p>123456</p>
+</div>
+<style>
+.parent {
+	height:200px;
+	width:300px;
+	display:table-cell;
+	vertical-align:middle;
+}
+</style>
+```
+
+> **通用方案**
+> 使用flex布局 , 父元素
+```css
+.parent {
+	display:flex;
+	align-items:center;
+}
+```
+---
+#### 单列布局
+![single_column](/images/前端杂烩/single_column.png)
+第一种布局方式DOM结构
+```html
+<div class="layout">
+	<div class="header">头部</div>
+	<div class="content">内容</div>
+	<div class="footer">尾部</div>
+</div>
+```
+第二种布局方式DOM结构
+```html
+<div class="header">
+	<div class="layout">头部</div>
+</div>
+<div class="layout content">内容</div>
+<div class="footer">
+	<div class="layout">尾部</div>
+</div>
+```
+
+样式
+```css
+.layout {
+	max-width:960px;
+	margin:0 auto;
+}
+```
+---
+#### 多列布局
+可能有以下各种情况 , 当然如果更多列的话也是类似的
+![many_columns](/images/前端杂烩/many_columns.png)
+
+##### 实现方式1 : float+margin
+DOM结构
+```xml
+<div class="content">
+	<div class="sub">侧边栏1</div>
+	<div class="extra">侧边栏2</div>
+	<div class="main">内容区域</div>
+</div>
+```
+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;
+}
+```
+实际效果如下
+![many_columns2](/images/前端杂烩/many_columns2.png)
+> **注意** : 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
+<div id="content">
+	<div class="main">内容区域</div>
+	<div class="sub">侧边栏1</div>
+	<div class="extra">侧边栏2</div>
+</div>
+```
+布局步骤:
+
+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
+<div class="main-wrap" >
+	<div class="main">内容区域</div>
+</div>
+<div class="sub">侧边栏1</div>
+<div class="extra">侧边栏2</div>
+```
+布局步骤
+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;
+}
+```

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布局将成为未来布局的首选方案
+<!-- more -->
+任何一个容器都可以指定为flex布局
+```css
+/*对于块元素*/
+.box {
+	display : flex;
+}
+/*对于行内元素*/
+.inline-box {
+	display : inline-flex;
+}
+```
+为了兼容性的需要 , 通常可以加上`display:-webkit-flex;`
+> 设为Flex布局以后，子元素的`float`、`clear`和`vertical-align`属性将失效
+
+### Flex容器的基本模型
+采用了flex布局的元素 , 可以称之为`Flex容器` , 它的子元素自动成为这个容器的成员 , 被称为`Flex项目`
+![Alt text](/images/前端杂烩/flex/Flex容器.png)
+容器默认存在两根轴：水平的`主轴（main axis）`和竖直的`交叉轴（cross axis）`。主轴的开始位置（与边框的交叉点）叫做`main start`，结束位置叫做`main end`；交叉轴的开始位置叫做`cross start`，结束位置叫做`cross end`。
+项目默认沿主轴排列。单个项目占据的主轴空间叫做`main size`，占据的交叉轴空间叫做`cross size`。
+
+### Flex容器的属性
+#### flex-direction
+决定主轴的方向 , 也就是项目的排列方向
+<pre>row(默认) | row-reverse | column | column-reverse</pre>
+![flex-direction](/images/前端杂烩/flex/flex-direction.png)
+
+#### flex-wrap
+默认情况下 , 项目都排列在一条轴线上 , 该属性定义了当一条轴线排列不下的时候 , 如何换行
+<pre>nowrap(默认) | wrap | wrap-reverse</pre>
+![flex-wrap](/images/前端杂烩/flex/flex-wrap.jpg)
+
+#### flex-flow
+这个属性是上面两个属性的简写形式 , 例如
+flex-flow : column wrap , 就相当于 flex-direction:column;flex-wrap:wrap;
+
+#### justify-content
+项目在主轴上的对其方式
+<pre>flex-start(默认) | flex-end | center | space-between | space-around</pre>
+( 假设主轴为从左到右 ↓ )
+![justify-content](/images/前端杂烩/flex/justify-content.png)
+
+#### align-items
+定义项目在交叉轴上如何对齐
+<pre>flex-start | flex-end | center | baseline | stretch(默认)</pre>
+![align-items](/images/前端杂烩/flex/align-items.png)
+
+#### align-content
+定义了多根轴线的对齐方式 , 如果项目只形成了一条轴线 , 那么该属性不起作用
+<pre>flex-start | flex-end | center | space-between | space-around | stretch(默认)</pre>
+![align-content](/images/前端杂烩/flex/align-content.png)
+
+
+### 项目的属性
+
+#### 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
+定义了在分配多余空间之前 , 项目占据的主轴空间
+<pre> &lt;length&gt; | auto(默认)</pre>
+它可以设为像width height类似的值 , 比如100px , 项目将占据固定的主轴空间
+
+#### flex
+是flex-grow flex-shrink flex-basis的简写形式
+默认 0 1 auto , 后两个值可选
+
+#### align-self
+允许单个项目与其他项目在交叉轴上有不同的对齐方式
+也就是Flex容器定义的align-items在该项目上不会生效 , 而会被这个项目自身的align-self覆盖
+<pre>auto(默认) | flex-start | flex-end | center | baseline | stretch</pre>
+默认值auto表示继承父元素的align-items属性 , 除了auto以外 , 可以取的值与align-items完全一致
+![Alt text](/images/前端杂烩/flex/align-self.png)
+

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都可以以十分简洁的代码搞定
+<!-- more -->
+DOM结构
+```xml
+<div class="layout">
+    <aside class="layout_aside">侧边栏宽度固定</aside>
+    <div class="layout_main">主内容栏宽度自适应</div>
+</div>
+<div class="layout">
+    <div class="layout_main">主内容栏宽度自适应</div>
+    <aside class="layout_aside">侧边栏宽度固定</aside>
+</div>
+<div class="layout">
+    <aside class="layout_aside">左侧边栏宽度固定</aside>
+    <div class="layout_main">主内容栏宽度自适应</div>
+    <aside class="layout_aside">右侧边栏宽度固定</aside>
+</div>
+<div class="layout">
+    <aside class="layout_aside">第1个侧边栏宽度固定</aside>
+    <aside class="layout_aside">第2个侧边栏宽度固定</aside>
+    <div class="layout_main">主内容栏宽度自适应</div>
+</div>
+<div class="layout">
+    <div class="layout_main">主内容栏宽度自适应</div>
+    <aside class="layout_aside">第1个侧边栏宽度固定</aside>
+    <aside class="layout_aside">第2个侧边栏宽度固定</aside>
+</div>
+```
+
+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
+<div id="main">
+	<div class="top">我是顶部条</div>
+	<div class="down">
+		<div class="left">我是侧边栏</div>
+		<div class="content">我是主面板</div>
+	</div>
+</div>
+```
+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;
+}
+```

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强大和灵活
+二者结合使用更加轻松
+<!-- more -->
+### 应用指南
+
+#### HelloWorld
+要把某个元素变成一个网格(grid) , 只需要把`display`属性设置为`grid`即可
+DOM结构
+```xml
+<div class="wrapper">
+	<div>1</div>
+	<div>2</div>
+	<div>3</div>
+	<div>4</div>
+	<div>5</div>
+	<div>6</div>
+</div>
+```
+CSS
+```css
+.wrapper {
+	display : grid;
+}
+/* 这里为了清晰看到效果,给子元素添加了一些样式,不过与grid无关 */
+.wrapper div {
+	background: pink;
+	margin:2px;
+	text-align:center;
+	padding:3px 0;
+}
+```
+![Alt text](/images/前端杂烩/grid/grid1.png)
+当然此时还没有什么特别的表现 , 只是6个div简单地堆叠在一起
+
+#### Columns与Rows
+为了使其成为二维的网格容器 , 我们需要定义这个网格的`列`和`行`
+分别对应`grid-template-columns`和`grid-template-rows`属性
+```css
+.wrapper {
+	display : grid;
+	grid-template-rows: 60px 40px;
+	grid-template-columns: 120px 60px 80px;
+}
+```
+**grid-template-columns** 属性的值当中有几个数值 , 就代表有几列 , 每个数值对应每一列的宽度
+**grid-template-rows** 属性的值当中有几个数值 , 就代表有几行 , 每个数值对应每一行的高度
+
+所以在上面的例子里面 , 是定义了一个3行×2列的网格
+
+现在的效果是这样了
+![Alt text](/images/前端杂烩/grid/grid2.png)
+当然 , grid容器中的子元素会依次填充每个网格
+如果不够 , 那就留空
+![Alt text](/images/前端杂烩/grid/grid3.png)
+如果多了 , 也会继续往后排 , 但是新的一行已经没有高度值可用 , 所以就是这个div的默认高度(根据div的内容而定)
+但是仍然被第一列的宽度约束
+![Alt text](/images/前端杂烩/grid/grid4.png)
+
+#### 子元素
+与以往使用的`<table>`元素一样 , 我们常常需要某个单元格来横跨多列 , 或者纵跨多行
+体现在grid当中 , 就是对子元素添加css属性进行控制了
+但是需要首先了解grid布局当中的一个参照 , 就是网格线
+![Alt text](/images/前端杂烩/grid/grid5.png)
+这里有4条纵向的网格线 , 也就是columns的网格线
+以及3条横向的网格线 , 也就是rows的网格线
+
+```xml
+<div class="wrapper">
+	<div class="item1">1</div>
+	<div class="item2">2</div>
+	<div class="item3">3</div>
+	<div class="item4">4</div>
+</div>
+```
+现在我们要让item1横跨3列 , 也就是从第一条纵向网格线 , 到第四条纵向网格线
+那么需要对其定义css属性如下
+```css
+.wrapper > .item1 {
+	grid-column-start: 1;
+	grid-column-end: 4;
+}
+```
+![Alt text](/images/前端杂烩/grid/grid6.png)
+这个元素实际占据了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;
+}
+```
+实际效果如下
+![Alt text](/images/前端杂烩/grid/grid7.png)

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文件
+<!-- more -->
+#### 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");
+```
+

source/_posts/前端杂烩/SASS - 语法(1).md

@@ -0,0 +1,261 @@
+---
+title: SASS - 语法(1)
+date: 2018-5-12 22:38:32
+tags: 
+	- 前端
+	- sass
+categories: 
+	- 前端杂烩
+---
+
+### 变量
+在scss当中定义变量的语法如下
+<pre>
+$变量名 : 变量值;
+</pre>
+代码块外部定义的变量可以在全局范围内使用
+<!-- more -->
+在代码块内部定义的变量是局部变量
+例如
+```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%);
+  }
+}
+```
+效果图
+![color_function](/images/前端杂烩/color_function.png)
+
+常用的颜色函数
++ `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");
+  }
+}
+```
+![each循环](/images/前端杂烩/each循环.png)
+
+### 自定义函数
+
+使用`@function`可以自定义一个函数
+```scss
+@function double($n) {
+	@return $n * 2;
+}
+#sidebar {
+	width : double(5px);
+}
+```
+
+附 : 知识结构梳理
+![Sass知识结构梳理](/images/前端杂烩/Sass知识结构梳理.png)
+

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;
+}
+```
+<!-- more -->
+编译后会得到
+```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值必须相等 , 否则无法运算

themes/hexo-theme-xups/layout/_partial/archive-post.ejs

@@ -18,7 +18,7 @@
         <%- partial('post/title', { class_name: 'post-title' }) %>
     </header>
     <p class="post-meta">
-        <%- post.author || 'Jelon' %> 发表于
+        <%- post.author || '柠烟夏季' %> 发表于
         <%- partial('post/date', { date_format: 'YYYY-MM-DD' }) %>
         &nbsp;&nbsp;
         <span class="post-tags">

themes/hexo-theme-xups/layout/_partial/article.ejs

@@ -4,7 +4,7 @@
         <h3 class="post-title"><span><%= post.title %></span></h3>
     </header>
     <p class="post-meta text-center">
-        <%- post.author || 'Jelon' %> 发表于
+        <%- post.author || '柠烟夏季' %> 发表于
         <%- partial('post/date', { date_format: 'YYYY-MM-DD' }) %>
     </p>
     <div class="post-content">