文档章节

不用ruby在webstorm中使用sass

heartwalker
 heartwalker
发布于 2016/06/29 07:20
字数 614
阅读 41
收藏 0

最近新入了一家公司 以前都是这样写css

    nav ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    nav li {
      display: inline-block;
    }
    nav a {
      display: block;
      padding: 6px 12px;
      text-decoration: none;
    }

多好啊,简单易懂,清晰明了 现在要求这样

    nav ul { margin: 0; padding: 0; list-style: none; }
    nav li { display: inline-block; }
    nav a { display: block; padding: 6px 12px; text-decoration: none; }

虽然最后都要压缩,但没办法那就只能这样写了,可是以前使用emmet语法,会自动换行,这可怎么办,幸亏我大部分项目都是使用强大的webstorm写的,经过不断尝试终于在

File-->Settings-->Editor-->Code Style-->CSS

目录下的选项卡 Other 下找到了 Keep single-line blocks ,只要把此项勾选从此智能提示不换行, 顿时喜笑颜开

但是还不能满足,我要用 Less, 用Less啊,自动生成的 CSS 样式还是要换行,这可怎么办,网上各种查资料,最后发现没有办法啊没有办法,这他么是在逗我呢.

我明明记得能控制输出 CSS 的样式,难道我记错了么?这不可能!哦,真的是我记错了,支持控制输出CSS样式的是 Sass. 其实用Sass一开始我是拒绝的,虽然说比Less强大,但是我们用得着那些强大的功能么,我平时只要只用嵌套好吧,而且要装 ruby, 好烦,我只是个小前端,到底要做到哪一步啊,我记得学习 ionic 的时候还装了 Python 还有 Java Android 环境什么的,心好塞... 就在这时我发现了一个好物

node-sass

webstorm 是支持 node-sass,额至少 webstorm11 是支持的

首先你需要全局安装

npm install node-sass -g

然后在

File-->Settings-->Tools-->File Watchers

目录下点击右上角的 + ,选择 SCSS 就可以了,然后配置

Program: C:\Users\Administrator\AppData\Roaming\npm\node-sass.cmd(输入你的node-sass.cmd的路径)
Arguments: $FileName$ $FileNameWithoutExtension$.css
Working directory: $FileDir$
Output paths to refresh: $FileNameWithoutExtension$.css
'Create output from stdout' should be off(不要勾选该选项)

然后找到

C:\Users\Administrator\AppData\Roaming\npm\node_modules\node-sass\bin\node-sass (你自己的全局npm模块下)

打开在 default下(第100行)有个 output-style ,将它的值改为 compact 就可以实现我需要的输出效果了. 如果你想了解更多可以访问
来自stackOverflow

当然如果你不用 webstorm 并且有需要的话 gulp 是一个非常好的选择

果然身为程序员有问题还是要上 stack Overflow

© 著作权归作者所有

共有 人打赏支持
上一篇: line-height之height
下一篇: HTML5API之全屏
heartwalker
粉丝 0
博文 6
码字总数 2375
作品 0
昌平
程序员
私信 提问
Webstorm功能详解及插件推荐

Web前端开发神器——Webstorm不用多介绍,强大的智能提示只是它的一个功能特性,它还具有许多有用的特性,比如版本控制、本地历史、即时模板等。Webstorm还内置了对 SASS、NodeJS、CoffeeScr...

达斯雷马
2016/12/27
5.2K
0
WebStorm 2017.2.2 发布,JavaScript 编辑器

WebStorm 2017.2.2 发布了。WebStorm 是 JetBrains 推出的一款商业的 JavaScript 开发工具。 主要更新内容: 在使用 webpack 时支持在 SCSS 和 Less 中进行输入 (WEB-23707 and WEB-25321) ...

达尔文
2017/08/16
1K
5
大家觉得WebStorm如何,分析分析····

不知道大家觉得WebStorm 怎么样,我个人还比较喜欢这个IDE···· 感觉WebStorm就是为前端而生,专门为 JS 开发做了很多优化,有许多令前端工程师眼前一亮的地方,图片宽高提示、 标签重构与...

愤怒的outman
2013/07/04
724
2
WebStorm 5 发布,JavaScript 集成开发工具

WebStorm 5 发布了,WebStorm 是 JetBrains 推出的一款商业的 JavaScript 开发工具。 该版本新特性和改进包括: 1. 支持 JSDoc注解 2. JavaScript 编辑器的各种改进 3. 支持 Jade 模板 4. 支...

oschina
2012/09/07
6.3K
11
WebStorm 7 发布,集成 Web 开发工具

WebStorm 7 发布,提供对最新的 TypeScript 0.9 的支持,包括泛型和枚举。改进对 CoffeeScript 和 Dart 的支持;新的 Less CSS 和 Sass 的结构化视图。详细介绍请看这里。 WebStorm 是 JetB...

打杂程序猿
2013/09/29
4.7K
6

没有更多内容

加载失败,请刷新页面

加载更多

JavaScript执行环境及作用域(三)——没有块级作用域

JavaScript中没有块级作用域经常会导致理解上的困惑,在其他类C的语言中,由花括号封闭的代码都有自己的作用域,因而支持根据条件来定义变量。但是在JavaScript中下面的代码并不会得到想象中...

Bob2100
16分钟前
3
0
Kafka流式处理

Kafka Streams 初识流式处理 什么是数据流 数据流(也叫事件流)是无边界数据集的抽象表示。无边界意味着无限和持续增长。无边界数据集之所以是无限的,是因为随着时间的推移,新记录会不断加...

东都大狼狗
20分钟前
2
0
Mysql主从复制(拓展博客文章扩充知识面)

#不停库不锁表在线主从配置 使用 Xtrabackup 在线对MySQL做主从复制 1.数据量大的话还是建议使用工具例如xtrabackup,mysqldump比较适合操作10G以下的数据备份复制。 2.做业务之前考虑清楚具...

robertt15
25分钟前
1
0
docker快速搭建几个常用的第三方服务

本次和大家分享的内容是使用docker快速搭建工作中常用的第三方的服务,对于有一些互联网背景的公司来说,以下几个服务都是很需要的:redis,rabbit,elasticsearch; 如果想学习Java工程化、...

编程SHA
58分钟前
7
0
我的Linux系统九阴真经

在今天,互联网的迅猛发展,科技技术也日新月异,各种编程技术也如雨后春笋一样,冒出尖来了。各种创业公司也百花齐放百家争鸣,特别是针对服务行业,新型互联网服务行业,共享经济等概念的公...

linuxprobe16
今天
24
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部