文档章节

不用ruby在webstorm中使用sass

heartwalker
 heartwalker
发布于 2016/06/29 07:20
字数 614
阅读 34
收藏 0
点赞 0
评论 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

© 著作权归作者所有

共有 人打赏支持
heartwalker
粉丝 0
博文 6
码字总数 2375
作品 0
昌平
程序员
WebStorm 2018.1.3 新增与 Angular 6 支持相关的改进

WebStorm 2018.1.3 已发布,请使用 Toolbox App 或 IDE 进行更新,或直接下载 WebStorm 2018.1.3。 官方的发布公告显示,本次更新添加了许多与 Angular 6 支持相关的改进(包括从 IDE 欢迎屏...

局长 ⋅ 05/10 ⋅ 0

Webstorm+Chrome plugins JetBrains IDE Support实现强大的JavaScript调试功能

前言 WebStorm是Jetbrains公司旗下一款JavaScript 开发工具,当你打开这款软件的时候会觉得特别的熟悉,因为它和itellj idea属于同款产品,界面和快捷键基本类似,而且功能非常强大,提示也非...

changyinling520 ⋅ 05/10 ⋅ 0

IntelliJ IDEA和webstorm一直卡在scanning files to index解决方案

最近做新的项目,cnpm install 之后node_modules 中文件暴增,导致webstorm一直卡在“Scanning files to index ......”甚至几度崩溃,切换为IntelliJ IDEA结果一致。无奈+烦躁,在网上找了解...

四小七 ⋅ 05/10 ⋅ 0

WebStorm mac版破解方法(包括下载地址* 支持windows)

//联系人:石虎 QQ:1224614774 昵称:嗡嘛呢叭咪哄 作者通过文章感恩女神的大力支持,感谢!感谢!感谢! 女神图: 女神图: 一、下载并且安装 webStorm 开发软件 1、进入 下载 https://www.newasp...

石虎132 ⋅ 04/19 ⋅ 0

WebStorm mac下如何安装WebStorm + 破解

1、下载软件最好的地址就是官网了 下载地址 选择好系统版本以后点击DOWNLOAD 2、安装 双击下载好的安装包、将WebStromt拖入application文件夹,然后在Launchpad中找到并打开...

sinat_17775997 ⋅ 04/27 ⋅ 0

前端开发: WebStorm局域网手机真机调试

1. 做好准备工作 安装webstorm以及新建一个项目写个demo 确保是同一局域网,同一个路由器下的WiFi或者其他内部网络 安装google二维码插件 (草料二维码) 2. 开始设置 用webstorm打开demo,打开偏...

BoooBooo冰Booo ⋅ 05/22 ⋅ 0

使用MySQL Workbench修改表字符集

问题 MySQL官方网站提供了诸多免费的数据库操作工具,其中, Workbench是一款免费的极佳可视化数据库管理工具,你只需要下载最新版本,即可随心所欲地管理以往许多其他版本的数据库,当然配合...

朱先忠老师 ⋅ 05/09 ⋅ 0

pycharm在安装nodejs后因node_modules目录导致太卡的解决方法

打开项目设置,把node_modules目录设置为Excluded,立马解卡. 同理,适用于jetbrains公司的其他ide,比如phpstorm,webstorm等. 对于项目中其他不需要index的目录也可以这样设置一下,提高速度....

漫步海边小路 ⋅ 04/29 ⋅ 0

手把手教你React Native实战从 React到Rn《二》

了解相关更多技术,可参考《学习React Native必看的几个开源项目》,接下来 我们来聊一聊相关的React。 React简介 Rn是基于React的设计,了解 React有助于我们开发RN应用,React希望将功能分...

codeGoogle ⋅ 06/01 ⋅ 0

less批量转换为css

安装了less之后后, 可以通过 将单个文件转换为, 但less没有提供批量转换为css的命令, 如果不使用sublime, 或者webstorm提供的插件, 就得手动一个一个去转换 懒是第一生产力, 我用python写了一...

木子昭 ⋅ 05/10 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

个人博客的运营模式能否学习TMALL天猫质量为上?

心情随笔|个人博客的运营模式能否学习TMALL天猫质量为上? 中国的互联网已经发展了很多年了,记得在十年前,个人博客十分流行,大量的人都在写博客,而且质量还不错,很多高质量的文章都是在...

原创小博客 ⋅ 今天 ⋅ 0

JavaScript零基础入门——(十一)JavaScript的DOM操作

JavaScript零基础入门——(十一)JavaScript的DOM操作 大家好,欢迎回到我们的JavaScript零基础入门。最近有些同学问我说,我讲的的比书上的精简不少。其实呢,我主要讲的是我在开发中经常会...

JandenMa ⋅ 今天 ⋅ 0

volatile和synchronized的区别

volatile和synchronized的区别 在讲这个之前需要先了解下JMM(Java memory Model :java内存模型):并发过程中如何处理可见性、原子性、有序性的问题--建立JMM模型 详情请看:https://baike.b...

MarinJ_Shao ⋅ 今天 ⋅ 0

深入分析Kubernetes Critical Pod(一)

Author: xidianwangtao@gmail.com 摘要:大家在部署Kubernetes集群AddOn组件的时候,经常会看到Annotation scheduler.alpha.kubernetes.io/critical-pod"="",以表示这是一个关键服务,那你知...

WaltonWang ⋅ 今天 ⋅ 0

原子性 - synchronized关键词

原子性概念 原子性提供了程序的互斥操作,同一时刻只能有一个线程能对某块代码进行操作。 原子性的实现方式 在jdk中,原子性的实现方式主要分为: synchronized:关键词,它依赖于JVM,保证了同...

dotleo ⋅ 今天 ⋅ 0

【2018.06.22学习笔记】【linux高级知识 14.4-15.3】

14.4 exportfs命令 14.5 NFS客户端问题 15.1 FTP介绍 15.2/15.3 使用vsftpd搭建ftp

lgsxp ⋅ 今天 ⋅ 0

JeeSite 4.0 功能权限管理基础(Shiro)

Shiro是Apache的一个开源框架,是一个权限管理的框架,实现用户认证、用户授权等。 只要有用户参与一般都要有权限管理,权限管理实现对用户访问系统的控制,按照安全规则或者安全策略控制用户...

ThinkGem ⋅ 昨天 ⋅ 0

python f-string 字符串格式化

主要内容 从Python 3.6开始,f-string是格式化字符串的一种很好的新方法。与其他格式化方式相比,它们不仅更易读,更简洁,不易出错,而且速度更快! 在本文的最后,您将了解如何以及为什么今...

阿豪boy ⋅ 昨天 ⋅ 0

Python实现自动登录站点

如果我们想要实现自动登录,那么我们就需要能够驱动浏览器(比如谷歌浏览器)来实现操作,ChromeDriver 刚好能够帮助我们这一点(非谷歌浏览器的驱动有所不同)。 一、确认软件版本 首先我们...

blackfoxya ⋅ 昨天 ⋅ 0

线性回归原理和实现基本认识

一:介绍 定义:线性回归在假设特证满足线性关系,根据给定的训练数据训练一个模型,并用此模型进行预测。为了了解这个定义,我们先举个简单的例子;我们假设一个线性方程 Y=2x+1, x变量为商...

wangxuwei ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部