一篇文章带你入门Sass
这次趁着自己找工作的时间去重新系统化的学习Web开发~重新撸一遍代码~(^_^) 嘻嘻……这个文集主要是一些Web开发向的笔记和学习记录，一些库和工具框架的学习。大部分都是入门级的。
今天这部分Sass学习教程主要是一些常用函数和流程控制语句。
为什么使用Sass？
- 可以使得整个项目的CSS的维护和修改变得容易且风格统一（使用变量来进行前端的赋值）
- 减少了多余的CSS的写法，提高整体的开发效率
- 增加了语句的嵌套
- SCSS 是 Sass 的新语法格式，从外形上来判断他和 CSS 长得几乎是一模一样，代码都包裹在一对大括号里，并且末尾结束处都有一个分号。其文件名格式常常以“.scss”为扩展名。
- 将.scss 编译成CSS文件进行加载
Sass的基本原理:
Sass的安装：
- 1. ruby环境
- 2. 使用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;
- 字符串的加和，对于存在“”的加和，会自动的加上“”
原文来自：简书／stiller