scss编译输出css四种格式

本文介绍如何在IDE中创建并编译SCSS文件为CSS,包括直接编译及使用watch监视命令自动编译的方法。同时讲解了四种不同的输出格式:嵌套、紧凑、扩展与压缩。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前面的已经安装好了,那么现在要如何开始呢?我们写了一个scss文件,然后如何去编译它呢?

1:比如你在webstorm或者其它的IDE工具里创建了一个sass文件,叫index.scss,需要编译成css文件(index.css);

在当前目录下,输入命令

sass index.scss:index.css

sass是编译,后面跟着要编译的index.scss文件,:冒号后面是要编译成css的文件(index.scss文件前面可以是目录如:你的index.scss文件在main/index.scss目录下,你可以写成如下:)

sass main/index.scss:index.css

后面要编译的css文件也可以在前面加目录,如下:注(如果编译css前没有创建你存放的目录,你在编译的时候,加了目录会自动创建一个index.css主文件到css目录)

sass main/index.scss:css/index.css

2、通过watch监视命令,自动编译scss文件,输入如下命令后,保存文件,即可对sass-lzf目录下的scss文件进行编译,并且将css文件输出到css目录下:如下

sass --watch sass-lzf:css

3、scss编译输出css有四种格式:

  1. nested(嵌套)
  2. compact(紧凑)
  3. expanded(扩展)
  4. compressed(压缩)

1)nested(嵌套)默认的格式是nested嵌套的格式,嵌套格式如果出现子级样式,会往右边缩进

scss编译时的样式

这里写图片描述

如果默认使用嵌套输出css

这里写图片描述

2)compact(紧凑)输出格式,输入如下命令:

sass --watch sass-lzf:css --style compact

scss编译时的样式

这里写图片描述

compact(紧凑)输出css格式

这里写图片描述

3)expanded(扩展)输出格式,输入如下命令:

sass --watch sass-lzf:css --style expanded

scss编译时的样式

这里写图片描述

expanded(扩展)输出css格式,这种格式便于阅读,平时一般都是这种格式写css

这里写图片描述

4)compresed(压缩)输出格式,输入如下命令:

sass --watch sass-lzf:css --style compressed

scss编译时的样式

这里写图片描述

compressed(压缩)输出css格式,这种格式体积最小,一般用于发布文档,最后输出

这里写图片描述

4、sass和scss的区别,主要是他们的语法有一些区别,如图


这里写图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值