Sass 环境/语法/手机优先项目实践

分享一下这两天搞 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
├── 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 时,整个过程就平滑了。

阅读