分享一下这两天搞 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 与 公用模块引入 @include
@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 环境/语法/手机优先项目实践
视频教程,请点击动图。