由于在网上找了一遍没找到如果在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. 如何设置Oracle数据库客户端字符集以及系统中的NLS_LANG环境变量

    概述: 本地化是系统或软件运行的语言和文化环境.设置NLS_LANG环境参数是规定Oracle数据库软件本地化行为最简单的方式. NLS_LANG参数不但指定了客户端应用程序和Oracle数据库所使用 ...

  2. windows 为qt5.7.1 安装openssl

    本人使用qt5.7.1+msvc2015写一个https的客户端程序,但是用到解析https协议时,报出如下错误 qt.network.ssl: QSslSocket: cannot call unr ...

  3. 使用Java反射优化多个方法调用

    有段时间没来写博客了,心里一直念叨空了来,今天有时间来记录一篇.前段时间领导提出优化部分系统模块,根据业务要求系统中有很多产品,产品下面有N个指标,一个指标就对应一个方法,所以系统代码中就是这样一个情 ...

  4. Extjs 解决grid分页bug问题

    //从后端获取数据加载到grid中var mainStore = new HeJsonStore({ url:'xxx', autoLoad:true, pageSize:20 }) //此方法最好放 ...

  5. 012_py之证书过期监测及域名使用的py列表的并集差集交集

    一.由于线上域名证书快要过期,需要进行监测,顾写了一个方法用于线上证书过期监测,如下: import ssl,socket,pprint def check_domain_sslexpired(dom ...

  6. hotspot目录结构

    Hotspot的目录结构 ├─agent Serviceability Agent的客户端实现 ├─make 用来build出HotSpot的各种配置文件 ├─src HotSpot VM的源代码 │ ...

  7. iOS开发基础-九宫格坐标(1)

    一.功能分析 1)以九宫格展示图片信息,每一个 UIView 包含一个 UIImageView .一个 UILabel 和一个 UIButton . 2)加载App数据,根据数据长度创建对应的格子数: ...

  8. OSGI插件(plugin)web工程建设步骤

     所有资源下载(汇总) 底包的下载地址:https://pan.baidu.com/s/15JxHOHf0AyZaLKPJUkpeXA 提取码: bujz web-target.war下载地址: ht ...

  9. docker WARNING: IPv4 forwarding is disabled 问题解决

    问题: [yuyongxr@localhost ~]$sudo docker run -d --name nginx -p : nginx WARNING: IPv4 forwarding is di ...

  10. AI要被祭天了!删Bug,删着删着把全部代码都删了

    近日,美国版的“大众点评”,本想训练 AI 来消除 bug,结果它把所有内容删除了... Yelp 在其最新更新的 App 中写道: “我们为本周使用该app遇到问题的用户致歉.我们训练了一个神经网络 ...