Sass的学习（一）

很长时间没有去写一些简单的前端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
值列表：
1. nth函数（nth function）可以直接访问值列表中的某一项；
2. join函数（join function）可以将多个值列表连结在一起；
3. append函数（append function）可以在值列表中添加值；
4. @each规则（@each rule）则能够给值列表中的每个项目添加样式。

对于CSS 四则运算：

对于基本的CSS运算系统会根据单位进行自动转换。
但是对于乘除法不同的单位会报xxxx isn't a valid CSS value.错误
除法操作时需要将width: 100px/2=>width: (100px / 2);第一种写法不会出现错误，但是也不会出现你想要的效果。
颜色运算，会自动的进行RGB和Alpha各个通道的自动加和。color: #010203 + #040506;
字符串的加和，对于存在“”的加和，会自动的加上“”

初级篇结束_啦啦啦