sass编译:简单粗暴的sass文件编译教程

发布网友发布时间：2024-09-07 04:32

我来回答

共1个回答

热心网友时间：2024-10-18 01:00

磨刀不误砍柴工，学用工具好摸鱼

sass语法文档：www.sass.hk/docs/

非Vue、react等框架情况下，原生自编译sass文件

1、下载安装ruby包rubyinstaller.org/downloads/，完成安装后默认安装gem（sass包管理器）

2、切换国内ruby源:gemsources--addgems.ruby-china.com/--removerubygems.org/

3、安装sass:geminstallsass

4、可选安装compass:geminstallcompass

----------以下在终端输入命令，用了compass命令就不用sass的了----------

compasswatch//自动监听.SCSS文件改动并生成同名css文件

-------------stylexxx详见最下面编译格式--------

sassmain.sass:main.css//手动将main.sass编译为main.css文件

sass--watchmain.sass:main.css--styleexpanded//监听sass文件自动编译并指定编译样式

sass--watchsass:stylesheets--styleexpanded//监听文件夹并自动编译成指定样式的css文件

sass文件与scss文件代码规范//sass.boxwidth:300pxheight:400px&-titleheight:30pxline-height:30px//scss.box{width:300px;height:400px;&-title{height:30px;line-height:30px;}}编译后样式//--stylenested.box{width:300px;height:400px;}.box-title{height:30px;line-height:30px;}//--styleexpanded.box{width:300px;height:400px;}.box-title{height:30px;line-height:30px;}//--stylecompact.box{width:300px;height:400px;}.box-title{height:30px;line-height:30px;}//--stylecompressed.box{width:300px;height:400px}.box-title{height:30px;line-height:30px}

作者：林深鹿