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文件即可
webstorm和intellij idea下如何自动编译sass和scss文件相关推荐
- 使用 Nginx 编译 Sass 和 Scss
前端的小伙伴对于 Sass 或 Scss(以下统称 Sass) 应该并不陌生,他是一种 CSS 预处理语言,使用 Sass 可以极大简化 CSS 代码的编写和维护. 通常情况下,我们在开发环境下使用 ...
- maven 打包时缺少文件_解决Intellij Idea下使用Maven项目打包时部分文件缺失问题
问题 Idea被越来越多的java开发者青睐,特别是丰富的插件极大方便了开发者.Idea虽然没有Eclipse的繁琐配置,但也会出现一些问题.问题如下: 一.在进行Maven项目打包的时候,会发现有的 ...
- [ant]通过Android命令自动编译出build.xml文件
用途: 做自动集成编译环境. 环境搭配我就不说了(SDK/环境变量等). 进入cmd界面. 进入项目目录. 输入: android.bat list target 来查询我们现有的版本list有哪些 ...
- 在Eclipse中配置NDK自动编译环境builders
对于NDK的编译,切换到目标目录下,运行ndk-build脚本即可. 对于使用Eclipse开发,我们希望EC能自动的编译我们的NDK,那么只需要为工程添加一个Builders即可. 对于Window ...
- Xcode自动编译、打包、上传到蒲公英应用分发平台
xcode_autobuild 项目地址:https://github.com/SimonCY/xcode_autobuild 因为公司最近人员变动,只有我一个人懂iOS开发,有时不在公司又遇到需要给 ...
- intellij 关闭自动保存和标志修改文件为星号
关闭自动保存 首先,声明一点,intellij 默认是不自动编译的 ,这一点跟Eclipse不同. By default, IntelliJ IDEA doesn't automatically co ...
- 关于webpack编译scss文件
css加载器文件通常和extract-text-webpack-plugin一块使用,我们可以在源文件src目录下写scss文件,然后通过webpack编译成css文件到输出目录public,这个目录 ...
- cython代码编译和setup.py文件编写
Cython 官方文档: https://cython.readthedocs.io/en/latest/ 中文文档:https://www.bookstack.cn/read/cython-doc- ...
- COMSOL java API——编译comsol模型java文件
在Windows系统下编译comsol模型的java文件(确保jdk安装成功,并且设置好环境变量). 本文以comsol案例库文件馈线夹的变形(feeder_clamp)为例. 1.打开feeder_ ...
最新文章
- jenkins 中 Poll SCM 和 Build periodically 的区别
- C#中使用ProtoBuf提高序列化速度对比二进制序列化
- 改变数据类型的装饰器_用装饰器改变收藏
- a的n次方的最后三位数c语言,求13的n次方(12n≤130000000000)的最后三位数,用c++编程...
- 高并发系统中的限流应该如何做?
- C# .Net ListT中Remove()、RemoveAt()、RemoveRange()、RemoveAll()的区别,ListT删除汇总
- 7-7 字符转换 (15 point(s))
- 【笔记】Loop曲面细分算法c++实现
- java方法重载的好处_Java方法重载浅谈
- 机器学习教程 - 分步指南
- VS使用教程(使用visual studio编写C语言程序),编写c的入门教程
- 计算机硬盘上的文件打不开,电脑硬盘打不开怎么办
- JAVA安卓植物大战僵尸主题四子棋游戏
- 禁止收录与跟踪-- Robots 文件优化和Nofollow 优化
- 与计算机相关的伟人,计算机发展史上最有影响的伟人
- 【阿里云高校计划】在线Linux学习
- 2020年区块链行业十大趋势
- Django-Templates模板语法(二)
- html怎么自动导入数据并排序,jQuery html表格排序插件:tablesorter
- 2021 China Open Source Annual Report
热门文章
- 临床重症医学数据库MIMIC、eICU、PIC介绍
- 重磅!全网最全13010本SCI2020最新影响因子下载!CA+四大神刊!预警期刊最新影响因子一览!
- 如何用Graphpad Prism 9作时间轴图
- sqlserver date转nvarchar_数据库干货:整理SQLServer非常实用的脚本
- 数据结构学习笔记(六):二叉树(Binary Tree)
- 在python IDLE里执行py文件
- android 自定义分区,android 自定义预制APP分区
- mybatis foreach 错误_MyBatis高级结果映射之一对一映射
- micropython开发环境_micropython开发者指南
- python3源码精要(1)-C源代码取得与基本特征