webstorm和intellij idea下如何自动编译sass和scss文件
前言
学过css的人都知道,css他不是一个编程语言。虽然你可以用css去写网页样式,但是你却没法使用它进行编程。所以有一句话来描述css我个人觉得再合适不过了,”CSS基本上是设计师的工具,不是程序员的工具。”由于它没有变量,也没有条件语句,只是一行行单纯的描述,写起来相当费事。于是,后来就有一些“偷懒者”给css加入一些编程元素,做成了“css预处理器”,使得css具有了编程的能力。现如今css预处理有恨多种,在这里我们主要介绍sass。
sass和scss的区别
说到sass,可能会有小伙伴提到scss。这两者之间到底存在什么关系呢?或者说它们之间有什么区别。这里我说一下我个人的看法,仅供参考。我个人认为scss是sass的加强版,如果用sass的话需要非常严格的缩进,没有大括号,没有分号。而scss则跟我们平时使用的css差不多,用起来更加顺手一些。当然要是装比的话还是sass比较好,不过对于我们这些新手前端还是乖乖的用scss比较好,别到时候逼没装成,自己先一脸懵逼了。珍爱生命,远离装逼!
手动编译sass或者scss
//单文件转换命令
sass style.scss style.css
//单文件监听命令
sass --watch style.scss:style.css
//文件夹监听命令
sass --watch sassFileDirectory:cssFileDirectory
手动命令来sass和scss的编译,在使用过程中有些复杂,虽然有监听命令,但是这只会在切换窗口的时候才会触发,失去焦点不再编辑的时候并不会,这就给我们开发带来的很多的不便。好在webstorm和intellij idea有自动编译sass和scss功能,极大便捷我们的开发,下面我们就说一下如何去配置。
webstorm和intellij idea下自动编译sass和scss文件配置
第一步 检查是否安装了sass
利用sass -v这条命令查看是否安装了sass,出现版本号即为安装成功。如果没有安装,可自行搜索度娘查看如何安装,这里就不在赘述。
第二步 安装File Watchers
打开webstorm或intellij idea,查看是否有File Watchers这个工具。如果没有则需要到Plugins中下载。
第三步 新建watcher
点击“+”按钮,选择所要监听的文件类型,这里我们选择scss,小伙们需要写sass文件可以选择sass。
第四步 watcher配置
选择自己的sass安装目录,如果windows的话默认是C:Ruby23binscss.bat,这里需要注意一点如果你是要自动编译sass,则需要选中sass.bat,可别选错了哦。如果是mac下,默认目录是/usr/local/bin/scss。如果需要自动sass也是一样。
第五步 检查是否配置成功
新建一个scss或者sass文件就可以看到底下会多两个文件,我们写代码的时候引入其中的css文件即可
原文地址:https://www.cnblogs.com/baimeishaoxia/p/12900102.html
- flex布局——回顾
- WordPress 网站开发“微信小程序”实战(五)
- Windows Runtime(WinRT) 揭秘
- WeApp-Workflow: 基于Gulp 的微信小程序前端开发工作流
- 如何安装Windows Phone SDK 7.1 Release Candidate (RC)
- 微信与支付宝回应央行新规:认同央行规范!
- Gulp 工作流中Sass 增量编译功能的探索
- Sass与Compass——回顾
- 苹果就“降速门”致歉;央行批扫码支付不正当竞争;王健林旗下公司遭集体裁员
- 姚期智教授:量子计算是千亿万亿级别的产业,或成为科技创新的引擎
- Powershell中禁止执行脚本解决办法
- 使用AsyncTask异步更新UI界面及原理分析
- 商家为何要做小程序?
- Android中关于dip和px以及转换的总结
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 项目实践|基于Flink的用户行为日志分析系统
- 手把手教你用Matplotlib画一个小清新配色的商业图表
- 高并发场景下锁的使用技巧
- Struts2第四天:Struts2的拦截器和标签库
- kubernete编排技术八:使用operator管理有状态应用
- Spring第一天:Spring的概述、SpringIOC入门(XML)、Spring的Bean管理、Spring属性注入
- Flink的处理背压原理及问题-面试必备
- Spring第二天:Spring的IOC的注解方式、Spring的AOP开发(XML)
- OpenCV还能实现这种效果? | 视频防抖技术
- 迁移到 Go Modules
- 使用docker 搭建redis的哨兵机制
- 使用docker 搭建redis的主从复制
- 使用Python判断文件下是否有空文件夹
- MySQL 设置用户可以远程连接
- MySQL关于character_set 设置为uft8问题