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 环境/语法/手机优先项目实践

视频教程，请点击动图。