sass编译
2024-08-26 23:01:27
sass编译
命令行编译
单文件转换命令
sass style.scss style.css
单文件监听命令
sass --watch style.scss:style.css
文件夹监听命令
sass --watch sassFileDirectory:cssFileDirectory
css文件转成sass/scss文件(在线转换工具css2sass)
sass-convert style.css style.sass
sass-convert style.css style.scss
命令行其他配置选项
运行命令行帮助文档,可以获得所有的配置选项
sass -h
我们一般常用的有--style
,--sourcemap
,--debug-info
等。
sass --watch style.scss:style.css --style compact
sass --watch style.scss:style.css --sourcemap
sass --watch style.scss:style.css --style expanded --sourcemap
sass --watch style.scss:style.css --debug-info
--style
表示解析后的css是什么格式,有四种取值分别为:nested
,expanded
,compact
,compressed
。--sourcemap
表示开启sourcemap调试。开启sourcemap调试后,会生成一个后缀名为.css.map
文件。--debug-info
表示开启debug信息,升级到3.3.0之后因为sourcemap更高级,这个debug-info就不太用了。
四种style生成后的css
// nested
#main {
color: #fff;
background-color: #000; }
#main p {
width: 10em; }
.huge {
font-size: 10em;
font-weight: bold;
text-decoration: underline; }
// expanded
#main {
color: #fff;
background-color: #000;
}
#main p {
width: 10em;
}
.huge {
font-size: 10em;
font-weight: bold;
text-decoration: underline;
}
// compact
#main { color: #fff; background-color: #000; }
#main p { width: 10em; }
.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }
// compressed
#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}
gui编译
这里推荐koala,它是一个优秀的免费编译器,界面清晰简洁,操作起来也非常简单,详细的大家可以移歩到:Less/Sass编译工具,koala使用指南,简单操作如下图:
编辑器编译
某些高上大的编辑器本身就内置了sass的编译,如webstorm等,而对于sublime text也有相应的插件可以使用:编译,保存即编译。如果不清楚你的编辑器是否拥有自动编译的功能,可谷歌百度。
在线编译
sassmeister提供了在线编译。
文章内容源于网络
最新文章
- Canvas电子签名和游戏化
- MapReduce的理解
- Ubuntu14.04安装JDK与配置环境变量
- Ubuntu14.04搭建Caffe(仅CPU)
- pl sql 变量的声明和赋值
- hdu 1003(详解) java
- 解决win8.1右键菜单出现在左边
- eclipse 新建项目下后.metadata\.plugins的文件夹解释和如何保存自己的特定工程设置
- 如何有效申请TI的免费样片
- cut 命令使用
- .NET中的程序集(Assembly)
- U1总结
- css版hover现边框
- android 上手维修设备和推断启动服务
- [原]node.js使用感想
- github的基本使用
- 关于list中移除某种数据类型的方法
- JS获取option的value和text
- bzoj3238 差异
- Python+Django 后台view异步接不到参数问题