很长时间没有去写一些简单的前端JS之类的甚至是基础的SQL部分，这次找工作的时候说实话碰到了很多基础方面的问题。
这次趁着自己找工作的时间去重新系统化的学习Web开发~
重新撸一遍代码~(_) 嘻嘻……
这个文集主要是一些Web开发向的笔记和学习记录，一些库和工具框架的学习。
大部分都是入门级的。
文集地址
Sass学习的第一部分(同样也是imooc上的第一部分)，如果想看第二部分，可以翻看我的文集。
这部分主要是一些常用函数和流程控制语句。
为什么使用Sass？
- 可以使得整个项目的CSS的维护和修改变得容易且风格统一（使用变量来进行前端的赋值）
- 减少了多余的CSS的写法，提高整体的开发效率
- 增加了语句的嵌套
- SCSS 是 Sass 的新语法格式，从外形上来判断他和 CSS 长得几乎是一模一样，代码都包裹在一对大括号里，并且末尾结束处都有一个分号。其文件名格式常常以“.scss”为扩展名。
Sass的基本原理:
- 将
.scss编译成CSS文件进行加载
Sass的安装：
- ruby环境
- 使用ruby包管理
gem install sass安装成功
3.（有可能碰见镜像问题）
SCSS语法格式：
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
---
- ```
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
SCSS文件编译过程：
- 单文件编译：
sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css
- 多文件批量编译：
sass sass/:css/
- 常用参数：
-
--watch自动检测代码，自动重新编译
- 几种常见的输出方式：
- 嵌套输出方式
-- style nested - **展开输出方式
-- style expanded** - **紧凑输出方式
-- style compact** - 压缩输出方式
-- style compressed
这几种不同的输出方式可以让有不同习惯的程序员可以用起来更爽~
Sass的常用知识：
变量：
- 普通变量：
- `$temp: value;`
- 可以在全局范围内使用（存在作用域）
- 默认变量：
- `$temp: value ！default;`
- 在值的后边加上`！default`只要在**使用**它之前存在一个变量的赋值即不会使用这个变量的默认值。
- Sass提供了嵌套功能：
- Sass 中还提供了选择器嵌套功能
- 但是对于选择器的嵌套一般不要多层嵌套\
- 提供属性的嵌套：
.box {
border-top: 1px solid red;
border-bottom: 1px solid green;
}
对于上面的代码，可以使用下面这种写法来代替：
.box {
border: {
top: 1px solid red;
bottom: 1px solid green;
}
}
- 伪类嵌套：
使用&符号配合使用：.clearfix{&:before}=>clearfix:before
宏：
- 声明混合宏：
- `@mixin` 是用来声明混合宏的关键词，有点类似 CSS 中的 `@media`、`@font-face` 一样，但是它可以进行传参，通过函数化得调用，设置宏中的样式不同。实现复用。
- `@include`用于调用宏
- 继承和扩展
- 在 Sass 中是通过关键词 “@extend”来继承已存在的类样式块，从而实现代码的继承。
- 占位符 %placeholder 功能是一个很强大，很实用的一个功能。因为 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码
注释：
- CSS注释方式：使用 ”/* ”开头，结尾使用 ”*/ ”会保存在
CSS中 - JS的注释方式：使用“//”，这种注释方式是不会被编译出来的
数据类型：
- 数字
- 字符串（有引号或者是无引号字符串）
- 颜色（
blue,#000000,rgba(255,255,255,0)） - 布尔：true，false
- 空值：null
- 值列表：
- nth函数（nth function） 可以直接访问值列表中的某一项；
- join函数（join function） 可以将多个值列表连结在一起；
- append函数（append function） 可以在值列表中添加值；
- @each规则（@each rule） 则能够给值列表中的每个项目添加样式。
对于CSS 四则运算：
- 对于基本的CSS运算系统会根据单位进行自动转换。
- 但是对于乘除法不同的单位会报
xxxx isn't a valid CSS value.错误 - 除法操作时需要将width: 100px/2=>
width: (100px / 2);第一种写法不会出现错误，但是也不会出现你想要的效果。 - 颜色运算，会自动的进行RGB和Alpha各个通道的自动加和。
color: #010203 + #040506; - 字符串的加和，对于存在
“”的加和，会自动的加上“”
初级篇结束啦啦啦
