本章主要讲解 scss 的基本使用，rpx 单位的概念，了解 uni.scss 在项目中的使用。

实际的开发更多的是结合什么样的工具，利用什么样的技术栈来实现快捷开发。前端三大工具js，html，css。特别是 css 上手容易，键值对对应即可实现，但是并不能实现复杂的逻辑判断，可以说是呆板鸡肋的。如果你想轻松自如健步如飞的写样式，那么 scss 绝对适合你，特别是 Uniapp 集成了插件后，不用复杂的配置 webpack 参数即可，让你在复杂的参数配置与羞涩难懂的命令行中解脱出来。

我们在新建 uni-app 项目的模板目录可以发现有一个 uni.scss 文件（相当于公用样式）。是的，你没看错。这里你可以轻松使用 scss ，尝试使用 scss ，会让你工作效率更高。

在前面介绍安装 HbuilderX 编译器的章节中，我们就已经介绍了安装必要使用的插件（ scss/sass 编译），直接点击安装即可，点击【工具】>> 【插件安装】即可查看，如果安装了 scss/sass 编译，就可以在代码中体验着酸爽的感觉了。

Scss 是一种 css 预处理器和一种语言, 它可以用来定义一套新的语法规则和函数，以加强和提升 css，可以解放代码量。

Uniapp 首推使用 scss ，因此这边主要以 scss 来讲解，使用时需要 Vue 文件中 style 节点上加上 lang="scss" 指定编译语言:

<style lang="scss">
    /* or lang="less" */
    /* 测试代码 */
    .list{
        color: #fff;
        .item{
            background: #fff;
        }
    }
</style>

上面的代码经过 scss 编译成 css 后，嵌套的层级会处理成扁平的样式表:

.list{
    color: #fff;
}
.item{
    background: #fff;
}

你还可以跟 js 一样使用变量，比如定义一个颜色 $white: #fff （变量以 $ 符号开头），所有引用这个变量的样式值都会编译成 #fff：

<style lang="scss">
    $white: #fff;

    .list{
        color: $white;
        .item{
            background: $white;
        }
    }
    /**/
</style>

编译后：

.list{
    color: #fff;
}
.item{
    background: #fff;
}

就上面的方法就已经可以让你解放双手了，你是否见过下面这样一大篓的，甚至更长的层级的样式表：

.goods-list .item .img .txt{
    /* 样式 */
}
.goods-list .item .name{
    /* 样式 */
}
.goods-list .item .name .sub{
    /* 样式 */
}
.goods-list .item .price{
    /* 样式 */
}
.goods-list .item .num{
    /* 样式 */
}

我们很多后端的小伙伴就是因为不想写那么臃长的样式表而选择了后端开发，如果你用 scss 可以让你按‘模块’来写样式：