由于在网上找了一遍没找到如果在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. python3操作MySQL数据库,一次插入多条记录的方法

    这里提供一个思路,使用字符串拼接的方法,将sql语句拼接出来,然后去执行: l = ["] s = '-' print(s.join(l))

  2. chrome打开收藏夹的网站在新的标签页

    chrome浏览器在新的标签页打开收藏夹的网址,现在设置不了,而且右键,在新标签页中打开有点烦..下面说说直接打开的方式. 方法1: 鼠标滚轮,直接点击收藏夹的网址,即可 方法2: ctrl + 鼠标 ...

  3. 我认知的javascript之函数调用

    今天刚好周六没事,又由于工作的原因导致早上醒来就睡不着,无聊之下,就想到了 js 的function调用问题.当然,网上也是对javascript的一些事情说得很透了,但我觉得还是有必要把自己的想法说 ...

  4. android菜鸟,了解android工程目录结构

  5. 【笔记】基于Python的数字图像处理

    [博客导航] [Python相关] 前言 基于Python的数字图像处理,离不开相关处理的第三方库函数.搜索网络资源,列出如下资源链接. Python图像处理库到底用哪家 python计算机视觉编程— ...

  6. Flink Event Time Processing and Watermarks(文末有翻译)

    If you are building a Realtime streaming application, Event Time processing is one of the features t ...

  7. js 批量替换

    html = html.replace(new RegExp(title,"gm"), "<span style='color:red;'>"+ti ...

  8. wxWidgets 和 QT 之间的选择

    (非原创,网络摘抄) 跨平台的C++ GUI工具库很多,可是应用广泛的也就那么几个,Qt.wxWidgets便是其中的翘楚这里把GTK+排除在外,以C实现面向对象,上手相当困难,而且Windows平台 ...

  9. .Net Core应用框架Util介绍(五)

    上篇简要介绍了Util在Angular Ts方面的封装情况,本文介绍Angular封装的另一个部分,即Html的封装. 标准组件与业务组件 对于管理后台这样的表单系统,你通常会使用Angular Ma ...

  10. .Net Core应用框架Util介绍(二)

    Util的开源地址 https://github.com/dotnetcore/util Util的开源协议 Util以MIT协议开源,这是目前最宽松的开源协议,你不仅可以用于商业项目,还能把Util ...