Sass编译风格

柔光的暖阳◎ 2021-09-14 04:12 311阅读 0赞

SASS提供四个编译风格  
\* nested：嵌套缩进的css代码，它是默认值。  
\* expanded：没有缩进的、扩展的css代码。  
\* compact：简洁格式的css代码。

\* compressed：压缩后的css代码。

eg：以上篇：[Sass创建简单的项目][Sass]中例子，在test.scss文件编辑

![20170901133338083][]

默认方式：

![20170901133511032][]

# 一.嵌套输出方式 nested #

命令输入：

sass --watch sassDemo\\sass:sassDemo\\stylesheets  --style nested

![20170901133841192][]

输出test.css跟默认方式是一样的.

nested（嵌套输出方式）编译出来的CSS样式风格：最后一个大括号独占一行

# 二.展开输出方式 expanded #

命令输入：

sass --watch sassDemo\\sass:sassDemo\\stylesheets  --style expanded

![20170901134239082][]

expanded（展开输出方式）编译出来的CSS样式风格：最后一个大括号独占一行

# 三.紧凑输出方式 compact #

命令输入：

sass --watch sassDemo\\sass:sassDemo\\stylesheets  --style compact

![20170901134642794][]

# 四.压缩输出方式 compressed #

命令输入：

sass --watch sassDemo\\sass:sassDemo\\stylesheets  --style compressed

![20170901134856035][]

[Sass]: http://blog.csdn.net/gao_xu_520/article/details/77731768
[20170901133338083]: /images/20210813/23b2157a89954809b6e20bb3f466e6aa.png
[20170901133511032]: /images/20210813/d7b3b3a12b684251990b0d70095dcb89.png
[20170901133841192]: /images/20210813/57743ee9a61e438a8128cfdea37a6eb4.png
[20170901134239082]: /images/20210813/54e0dbeb4b0145c198901c0afa7805bd.png
[20170901134642794]: /images/20210813/e8b30b089ab449418e21df89bd6d903a.png
[20170901134856035]: /images/20210813/200dd737c3ba4eda9c7752b77e02adb5.png

发表评论取消回复

表情：

评论列表（有 0 条评论，311人围观）

还没有评论，来说两句吧...

相关阅读

相关 SASS详解之编译输出的样式

　　SASS是一种CSS预处理语言，没有装环境的话是不能被解析的。但是有了koala编译工具之后，解析SASS不需要环境也毫无压力了。SASS的输出格式有四种：嵌套、扩大、紧凑

柔情只为你懂/ 2022年09月17日 12:18/ 0 赞/ 191 阅读

相关 sass编译时候的编码问题解决办法！

sass编译时候的编码问题解决办法！参考文章： [（1）sass编译时候的编码问题解决办法！][1_sass] （2）https://www.cnblogs.com/C

妖狐艹你老母/ 2022年09月06日 10:22/ 0 赞/ 194 阅读

相关 Sass详解之编译工具koala

　　SASS和LESS不一样，需要在本地编译成CSS才能看到效果，所以有一个很强大的编译工具才是重中之重。如果你不会安装ruby，更是没听过它;如果你安装了Ruby，但是不会用

た入场券/ 2022年08月30日 13:58/ 0 赞/ 238 阅读

相关 webstorm配置编译sass的输出目录

关于这个的问题，虽说不是很难，但还是踩了点小坑，下面就来介绍下如何使用webstorm配置编译sass的输出目录。 1.下载Ruby 2.使用Ruby安装sass 3.检

客官°小女子只卖身不卖艺/ 2022年06月16日 03:25/ 0 赞/ 200 阅读

相关 css预编译sass,less

sass,less是什么？ > css的预编译。把css当成函数编写，可以定义变量,嵌套，混合器安装sass使用的步骤/如何配置sass? 一、安装对应

分手后的思念是犯贱/ 2022年05月28日 01:49/ 0 赞/ 469 阅读

相关 sass单文件编译脚本

!/bin/bash sass文件编译脚本 sass $2 $1.scss:$1.css --style compressed --sour

我会带着你远行/ 2022年05月13日 05:04/ 0 赞/ 176 阅读

相关 grunt来编译sass文件

1. 第一步安装全局sass > cnpm install -g sass 1. 第二步安装全局ruby > cnpm install -g ruby 1. 第三

妖狐艹你老母/ 2022年04月03日 18:54/ 0 赞/ 193 阅读

相关直接在命令行来监听sass编译

咱们除了使用gulp和webpack等前端自动化构建工具以外，其实可以直接在命令行来监听sass的编译，那么如何操作呢？首先咱们得下载安装ruby，因为它算是sass的“

以你之姓@/ 2021年09月16日 22:40/ 0 赞/ 411 阅读

相关 Sass编译风格

SASS提供四个编译风格 \ nested：嵌套缩进的css代码，它是默认值。 \ expanded：没有缩进的、扩展的css代码。 \ compact：简洁格式的

柔光的暖阳◎/ 2021年09月14日 04:12/ 0 赞/ 312 阅读

相关编译BoostrapV3 Sass版本的源码（涉及Ruby、Sass、Compass、Watcher的配置）

前言之前已经完成了编译BoostrapV3 Less版本源码编译，按照官方的流程走可以了。由于V4版本是基于Sass的，因此有必要提前做好技术储备，尝试一下Boostr

╰+哭是因爲堅強的太久メ/ 2021年09月11日 07:06/ 0 赞/ 294 阅读