由于在网上找了一遍没找到如果在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. 理解ECS的概念和Unity中的ECS设计

    组合优于继承 ecs的概念很早就有了,最初的主要目的应该还是为了改善设计. e-c-s三者都有其意义,e-c是组合优于继承,主要用以改善oo的继承耦合过重以及多继承菱形问题. oop常见设计里,每个g ...

  2. C++调用Opencv实践中遇到的问题备忘录

    1.编写一个显示图片的项目,但显示的图片全灰色. 原因:需要在imshow()函数前加一个namedWindow()函数.https://blog.csdn.net/mao_hui_fei/artic ...

  3. python 3.7 安装mysqlclient 错误解决

    安装时出现的问题 >pip3.7 install mysqlclientCollecting mysqlclient  Using cached https://files.pythonhost ...

  4. 打印进度条>>>>

    i+1: 当前的数量 300:  总数量 import sys print("下载中...") def process(curr, count): cursor_count = c ...

  5. requests 进阶用法学习(文件上传、cookies设置、代理设置)

    一.文件上传 1.模拟网站提交文件 提交此图片,图片名称:timg.jpg import requests files={ 'file':open('timg.jpg','rb') } respons ...

  6. Oracle 史上最全近百条Oracle DBA日常维护SQL脚本指令

    史上最全近百条Oracle DBA日常维护SQL脚本指令 https://mp.weixin.qq.com/s?__biz=MjM5MDAxOTk2MQ==&mid=2650281305&am ...

  7. (二)Basic Concepts 基本概念

    Basic Concepts There are a few concepts that are core to Elasticsearch. Understanding these concepts ...

  8. PHP中feof()函数的猜测

    本文环境: OS:Mac OS X 10.8.4 PHP:5.3.15 PHP的官方手册中,函数feof()下面的讨论不少,对此做了一些相关的测试. <?php print <<&l ...

  9. service docker start后docker stop/waiting的解决方法

    在某次强行对机子断电后,再开机后发现docker没启动 运行service docker start显示docker start/running, process xxxx,之后不一会儿就停止了, 再 ...

  10. Django rest framework(6)----序列化(2)

    为什么要序列化 django 查询数据库返回的类型是  queryset 类型 而我们和前端通信使用的大多数是json类型,这个时候我们需要把 queryset的数据类型转换成python的数据类型然 ...