由于在网上找了一遍没找到如果在sublime中将sass编译的css转换成为自己喜欢的风格,所以换了一种思路搜索到了答案,这里我将讲述如果更改。

首先sass总共有四种编译风格

(1) nested(嵌套缩进、默认风格)
#main p {
color: #00ff00;
width: 97%; }
#main p .red {
background-color: #ff0000;
color: #000000; }
#main p .blue {
background-color: #2ebcff;
color: #878787; }
(2) expanded(展开、无缩进)
#main p {
color: #00ff00;
width: 97%;
}
#main p .red {
background-color: #ff0000;
color: #000000;
}
#main p .blue {
background-color: #2ebcff;
color: #878787;
}
(3) compact(紧凑、单行)
#main p { color: #00ff00; width: 97%; }
#main p .red { background-color: #ff0000; color: #000000; }
#main p .blue { background-color: #2ebcff; color: #878787; }
(4) compressed(压缩、无空格和换行)
#main p{color:#00ff00;width:97%}#main p .red{background-color:#ff0000;color:#000000}

  大家只需将sass里面的engine.rb文件找到,一般路径是这样的:

D:\Software\Ruby22\Ruby24-x64\lib\ruby\gems\2.4.0\gems\sass-3.5.6\lib\sass

  然后找到如下代码:

 DEFAULT_OPTIONS = {
:style => :expanded,----->将此处改为自己想要的风格就可以了
:load_paths => [],
:cache => true,
:cache_location => './.sass-cache',
:syntax => :sass,
:filesystem_importer => Sass::Importers::Filesystem
}.freeze

然后再在sublime里面编译一次,看看是否可以了?

资料参考于☞https://zhidao.baidu.com/question/1244030470937877179.html

sublime中编译的sass如何改变css输出风格?【这里有答案】的更多相关文章

  1. 在webstorm中编译less,以及压缩css

    一.编译   在全局安装less npm install -g less 在webstorm setting ->tools -> filewatcher中设置 :  ../css/$Fi ...

  2. sass的入门(安装以及sublime中如何编译sass)

    很久之前就听到了sass和less,但是因为人懒(默默吐槽下自己),就没有去了解相关的知识.但是身为一个前端人员不了解sass好像有点low low 的,所以现在开始接触使用sass了. 万事开头难, ...

  3. 如何在sublime中使用sass

    搞了好久,终于把sass搞定了. 最开始,我是想使用koala来实现对sass的实时编译的,但是每当我保存的时候,总是弹出erro错误,即无法编译生成css文件,百度了半天,问了好久,这个问题还是没能 ...

  4. 前端-如何用gulp快速搭建项目(sass预编译,代码压缩,css前缀,浏览器自动刷新,雪碧图合成)

    一:gulp优点: 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理: 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 构建快速 利用 Node ...

  5. jQuery中添加/改变/移除改变CSS样式例子

    在jquery中对于div样式操作我们会使用到CSS() removeClass() addClass()方法来操作了,下面我们就整理了几个例子大家一起来看看吧.     CSS()方法改变CSS样式 ...

  6. sublime中css输入分号后自动提示的烦恼

    sublime开发前端确实好用,有好多些个的插件,轻量便捷,但是在使用sublime中的一些插件的时候总是会遇到困扰,跟自己想象中的不一样,比如在使用SublimeCodeIntel插件的时候,就会遇 ...

  7. HBuilderx中编译sass文件

    安装scss/sass编译插件 工具 -> 插件安装 -> scss/sass编译插件 将sass编译成css 新建scss文件,编写完成后,(右键scss文件 -> 外部命令/插件 ...

  8. 在 Sublime Text 2 中编译和运行 Java 程序,以及输出中文出错问题解决办法

    Sublime Text 2 是我最喜欢用来编码的文本编辑器,如果你尝试使用后相信你也会喜欢上它的.在这篇文章中我们将讨论如何在 Sublime Text 2 中编译和运行 Java 程序. 第一步: ...

  9. Simptip – 使用 Sass 制作的 CSS Tooltip 效果

    Simptip 是一个简单基于 Sass 的 CSS 工具提示效果.帮助你在网站中加入在不同的方向(上.左.右.下)的工具提示,也可以设置不同的颜色如成功.信息.警告和危险.最后还有其他特性如软边.半 ...

随机推荐

  1. Flex builder4.6激活【转】

    方法一: 1.到Adobe官网下载FlashBuilder 4.6 http://download.adobe.com/pub/adobe/flex/win/FlashBuilder_4_6_LS10 ...

  2. CentOS编译安装PHP常见错误及解决办法

    1.configure: error: No curses/termcap library found yum -y install ncurses-devel 2.configure: error: ...

  3. .NET MVC全局异常处理(二)

    目录 .NET MVC全局异常处理(二) MVC过滤器Filter .NET MVC全局异常处理(二) 对上节的内容进行了补充 MVC过滤器Filter MVC有四种过滤器:Authorization ...

  4. 通过shell命令往android中写入配置

    C:\Users>adb shell setprop "persist.sys.btylevel" 100 C:\Users>adb shell getprop &qu ...

  5. django url分发,视图,模板回顾

    Django基础轮廓 MTV+controller 一 url分发系统: 1 简单使用 url(r'^articles/2003/$', views.special_case_2003), # spe ...

  6. SQL LCASE() 函数

    LCASE() 函数 LCASE 函数把字段的值转换为小写. SQL LCASE() 语法 SELECT LCASE(column_name) FROM table_name SQL LCASE() ...

  7. yum makecache

    $ yum makecache 就是把服务器的包信息下载到本地电脑缓存起来,makecache建立一个缓存,以后用install时就在缓存中搜索,提高了速度.配合yum -C search xxx使用 ...

  8. SpringCloud(3)服务消费者(Feign)

    上一篇文章,讲述了如何通过 RestTemplate+Ribbon 去消费服务,这篇文章主要讲述如何通过Feign去消费服务. 1.Feign简介 Feign是一个声明式的伪Http客户端,它使得写H ...

  9. OracleSql语句学习(一)

    --SQL语句本身是不区分大小写的,每个关键字用空格隔开,为了增加可读性,退出所有关键字--全部大写,非关键字都小写SELECT SYSDATE FROM dual--创建表CREATE TABLE ...

  10. 使用axios post 提交数据,后台获取不到

    https://www.cnblogs.com/yiyi17/p/9409249.html(copy https://www.cnblogs.com/loveyaxin/p/8385694.html( ...