摘要:语法使用它带来的好处,就不再这里做介绍了,主要看怎么在里配置自动编译。因为国内网络的问题导致源间歇性中断因此我们需要更换源。也就是说,任何标准的样式表都是具有相同语义的有效的文件。参考文档官网设置自动编译及参数配置
sass语法、使用它带来的好处,就不再这里做介绍了,主要看怎么在webstorm里配置自动编译。
sass编译是需要Ruby环境的,可以到这里去下载 : https://rubyinstaller.org/downloads/ ,安装时选择加入Path
安装完成后需测试安装有没有成功,运行CMD
输入以下命令:
ruby -v //如安装成功会打印 ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32]
如上已经安装成功,Ruby
自带一个叫做RubyGems
的系统,用来安装基于Ruby
的软件。因为国内网络的问题导致gem
源间歇性中断因此我们需要更换gem
源。(使用淘宝的gem源https://ruby.taobao.org/ )
//1.删除原gem源 gem sources --remove https://rubygems.org/ //2.添加国内淘宝源 gem sources -a https://ruby.taobao.org/ //3.打印是否替换成功 gem sources -l //4.更换成功后打印如下 *** CURRENT SOURCES *** https://ruby.taobao.org/
我的机器上由于https的问题加无法访问淘宝源,我把它换成了腾讯源 ,腾讯源地址: http://gems.ruby-china.com/
我们下面来安装Sass
和Compass
。要安装最新版本的Sass
和Compass
,你需要输入下面的命令:
//安装如下(如mac安装遇到权限问题需加 sudo gem install sass) gem install sass gem install compass
在每一个安装过程中,你都会看到如下输出:
Fetching: sass-3.x.x.gem (100%) Successfully installed sass-3.x.x Parsing documentation for sass-3.x.x Installing ri documentation for sass-3.x.x Done installing documentation for sass after 6 secon 1 gem installed
安装完成之后,你应该通过运行下面的命令来确认应用已经正确地安装到了电脑中:
//更新sass gem update sass //查看sass版本 sass -v //查看sass帮助 sass -h
下面打开webstorm, File -> Settings -> Tools -> File Watchers + -> SCSS
在这里 File Type 配置为 Scss Style Sheet ,不要配置为 SASS style sheet 。SCSS 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能。也就是说,任何标准的 CSS3 样式表
都是具有相同语义的有效的 SCSS 文件。另外,SCSS 还能识别大部分 CSS hacks(一些 CSS 小技巧)和特定于浏览器的语法
Progarm: Ruby SaSS 扩展路径
C:Ruby25-x64binsass.bat
Arguments:配置编译参数
--no-cache --update -t compact $FileName$:$FileNameWithoutExtension$.css
-t 后面有4种参数可选:
Output paths to refresh:文件输出路径
$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map
配置完毕,添加一个 .scss文件,果然自动编译成了.css文件。
参考文档: Sass官网
webstorm设置sass自动编译,及参数配置
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/1607.html
摘要:现如今预处理有恨多种,在这里我们主要介绍。好在和有自动编译和功能,极大便捷我们的开发,下面我们就说一下如何去配置。和下自动编译和文件配置第一步检查是否安装了利用这条命令查看是否安装了,出现版本号即为安装成功。如果需要自动也是一样。 前言 学过css的人都知道,css他不是一个编程语言。虽然你可以用css去写网页样式,但是你却没法使用它进行编程。所以有一句话来描述css我个人觉得再合适不...
摘要:需要运行在环境,所以需要安装安装命令中,测试是否安装回车,出现版本号则是安装成功安装命令测试是否安装成功回车,出现版本号则是安装成功方法一命令转化问文件监听在文件目录中,打开命令行的方法右击在命令行中输入命令,可以把文件编译为文件监听编 saas 需要运行在 ruby 环境,所以需要安装 ruby 32 / 64 1、安装 ruby 2、DOS命令中,测试ruby是否安装:r...
摘要:声明声明本篇内容梳理自以下几个来源网站的文档中文网感谢大佬们的分享。这个时候,预处理器就出现了,其实应该是说和这类语言出现了。声明 本篇内容梳理自以下几个来源: Github:smyhvae/web Bootstrap网站的 less 文档 Sass中文网 感谢大佬们的分享。 正文-CSS预处理(less&Sass) CSS预处理 什么是 CSS 预处理?为什么要有 CSS 预处理? 这...
摘要:重装了,一升不要紧,打开老项目,开启,然后改代码,发现浏览器不会自动刷新了这可急死我了,各种卸载,安装各种版本,调试。各种查资料查文档,都讲的是参数配置启动就会自刷新,参数都是其它用途。 重装了 webstorm ,一升不要紧,打开老项目,开启webpakc-dev-server,然后改代码,发现浏览器不会自动刷新了!!! 这可急死我了,各种卸载webpack、webpack-dev-...
阅读 792·2021-10-13 09:48
阅读 3555·2021-09-22 10:53
阅读 2963·2021-08-30 09:41
阅读 1752·2019-08-30 15:55
阅读 2729·2019-08-30 15:55
阅读 1725·2019-08-30 14:11
阅读 2075·2019-08-29 13:44
阅读 633·2019-08-26 12:23