分享一下这两天搞 sass 的学习成果。本文主要分为三个部分，分别是
- 环境
- 语法
- 实践
环境
安装 sass 工具， 很简单，参考官方文档
链接在这里 https://www.sasscss.com/install
主要介绍一下开发环境。以 VSCODE 为例，
我安装了这样几个插件分别是：
- sass,提供 sass 语法高亮
- sass live compile 自动生成 css 插件，可 watch 本地文件发生修改，自动触发生成
- live server 启用一个简单 http 服务，提供 html 页面快速预览
需要修改插件配置话，快捷键 command + , ，打开 vscode 配置。
查找 sass live找到相应的配置，增加个人配置：
"liveSassCompile.settings.formats": [
{
"format": "compressed",
"extensionName": ".css",
"savePath": "./dist"
}
],
语法
这里主要介绍实际项目中最常用的基础语法。
语法格式
在 sass 中主要支持两种语法格式，分别以 .scss、 .sass作为后缀。
.scss 语法类似 css 语法 .sass 语法更简洁，但是切换起来有点麻烦
所以，推荐使用 .scss 语法
变量
如果将样式设计看做一个黑盒的话，变量，就是是这个黑盒对外开放的接口。
变量定义的方式，很简单。
$background-color: red;
嵌套语法
div h1 {
color : red;
}
嵌套语法的格式是
div {
h1 {
color : red;
}
}
文件引入
为了让 sass 预处理，区分 主 css 文件与 子 css 文件的区别，增加了文件名称的 _ 前缀。
未进行 _ 前缀的 css 文件不会被当成子文件处理。
@import 子文件时，不需要，明确设置 _ 前缀与 .scss 或是 .sass 后缀。这些，在 @import 时会被自动补齐。
公共模块
@mixins 类似于 c 语言中的 宏定义，通过 @mixins 定义可以简化 css 重复代码的使用。
常规使用方式，有两种：
- 明确的内容
@mixin border {
border: 1px solid blue;
}
div {
@include border;
}
生成的代码是:
div {
border: 1px solid blue;
}
- 非明确内容
@mixin mobile {
@media screen and (max-width: 768px) {
@content;
}
}
body {
background-color: blue;
}
@include mobile {
body {
background-color: red;
}
}
这样生成的代码就是:
body {
background-color: blue;
}
@media screen and (max-width: 768px) {
body {
background-color: red;
}
}
这种写法，会被经常使用在响应式样式设计上。
至于 @mixin 模块的参数传递非常简单，大家参考相关文档。
函数操作
函数操作，主要分为：
-
内嵌函数
- 字符串处理
- 数字处理
- List 处理
- Map 处理
- 选择器函数
- 颜色处理函数
- 功能性辅助函数
-
自定义函数
@function double($n) {
@return $n * 2;
}
#top {
width: double(5px);
}
不过，即使 sass 提供了丰富函数操作，我们必须记住一点，就是：
sass 是一门预处理语言，其执行的阶段是在程序的与编译阶段。
一些想要实现执行期(runtime)样式动态变化的功能，不是 sass 可以做的事。
关于 执行期(runtime)样式 的技术， 大家可以参考 styled-components这个项目。
实践项目
到底一个真实的手机优先的 sass 项目是如何实现的，下面我们就来实操一下整个过程。
具体项目地址: gitdigg/sass-demo
项目结构
sass
├── base
│ ├── _mixins.scss
│ ├── _reset.scss
│ └── _variables.scss
├── layout
│ └── _container.scss
└── main.scss
在 main.scss中引入所有子文件定义。
// Configuration
@import 'base/variables';
@import 'base/mixins';
// Reset
@import 'base/reset';
// Layout
@import 'layout/container';
环境说明
我们从一个空白页面开始，在空白页面上我分别创建好了：
container 容器 nav 导航 content 内容 以及 title 标题
四个 div 元素。彼此间的关系是这样的。
再看一下，sass 样式的目录结构，分别是：
入口 main.scss 基础模块目录 base 布局模块目录 layout
在 base 目录中，分别定义了：
_variables.scss _reset.scss _mixin.scss
一个个看一下：
_variables.scss
准备了变量有
屏幕断点变量，分别是 tablet 与 desktop， 分别对应平板与PC屏幕。
一个container 容器的最大宽度变量： max-width。 我希望当屏幕切换到桌面环境时，容器的最大宽度是 960px。
还有一些提前准备的颜色变量。
_reset.scss
对所有 HTML 元素进行 box-sizing 重置，设置为按边框计算的方式。
设置 body 的margin，外边框为 0，同时设置一个背景色。
_mixin.scss
设置了两个屏幕断点 media 查询，分别是 tablet 与 desktop，对应平板与PC。因为项目按手机优先的样式设计，默认情况下，样式定义针对的是手机屏幕。
在 Layout 目录中，提供了一个空的 _container.scss 样式。就是我们接下来工作的地方了。
首先，我们先生成 css 样式文件。
Layout
为了方便查看效果，首先针对不同屏幕断点设置不同的页面背景色。
将我们提前准备好的颜色，设置到对应的屏幕样式中。
现在我们切换不同的演示设备，就可以看到不同的颜色背景。
手机样式
既然是手机优先样式设计，当然，现在我们所有定义的样式默认就是针对手机屏幕的。
我们现在定义手机样式。
在手机样式中，容器的宽度 100%.
导航栏是固定在底部位置的，同时宽度也是 100%。
内容区域为了方便实现将高度设置为 150 vh，这样就会有一个滚动的效果。
将 标题区域 固定在内容区域的顶部，即使页面发生了滚动。这里使用了一个新的 postion 属性值，sticky。即粘连定位。因为在最新的 IE 浏览器还没有被支持，所以，这个属性并没有被广泛推广，更多的都是通过使用脚本的方式进行模拟。
平板样式/PC样式
再依次在对应 tablet 和 desktop 的mixin 模块中增加对应的样式设计。具体样式的定义，就不细说了。不熟悉 CSS 的同学可以参考我的CSS 视频教程。
发现 从 tablet 到 desktop 切换过程中，有些突兀。那是因为，
desktop 的切换宽度是 1024 px， 而 容器的 最大宽度是 960px。
所以，我们将 desktop 的切换宽度修改成 960px 时，整个过程就平滑了。