Laravel Mix:编译 Sass 样式
Sass 简介
Sass 是一个 CSS 的扩展,它在 CSS 语法的基础上,允许您使用变量 (variables), 嵌套规则 (nested rules), 混合 (mixins), 导入 (inline imports) 等功能,令 CSS 更加强大与优雅。使用 Sass 以及 Compass 样式库 有助于更好地组织管理样式文件,以及更高效地开发项目。
特色
- 完全兼容 CSS3
- 在 CSS 语言的基础上增加变量(variables)、嵌套 (nesting)、混合 (mixins) 等功能
- 通过函数进行颜色值与属性值的运算
- 提供控制指令等高级功能
- 自定义输出格式
更多介绍和使用可以查看文档。
编译方法
使用mix.sass
方法可以将 Sass 编译成CSS。像下面这样:
mix.sass('resources/sass/app.scss', 'public/css');
和 less 方法类似,可以将多个 Sass 文件编译为各自的 CSS 文件,并为结果 CSS 自定义输出目录:
mix.sass('resources/sass/app.sass', 'public/css')
.sass('resources/sass/admin.sass', 'public/css/admin');
额外的 Node-Sass 插件选项 可以作为第三个参数传入到方法中:
mix.sass('resources/sass/app.sass', 'public/css', {
precision: 5
});