预编译器配置说明

开头语,发挥CSS预处器的作用是一种很有挑战性的事情。CSS预处器有不同的语言,就有不同的语法和功能。

  语法

    在使用CSS预处器之前最重要的是对语法的理解,幸运的是,这三种CSS预处器的语法和CSS都差不多。

  1. Sass和LESS都使用的是标准的CSS语法。这使用CSS预处器非常容易的将预处器代码转换成CSS代码。默认Sass使用“.scss”扩展名,而LESS使用“.less”扩展名;
  2. 重要的一点是,Sass也同时支持老的语法,就是不使用花括号和分号,而且文件使用“.sass”扩展名;
  3. Stylus的语法花样多一些,它使用“.styl”的扩展名,Stylus也接受标准的CSS语法,但是他也接受不带花括号和分号的语法。

SASS预编译器配置

首先介绍的是.scss的配置:

根据实际操作的过程,总结以下步骤:(限window系统)

1、下载RubyInstaller,运行安装(只管点击next即可)。

本文下载的是下图的的文件

然后直接双击,进行安装,选择安装目录,顺便勾选上添加到环境变量(个人建议)如下图

2、安装完成

打开命令行,ruby -v查看下吧,安装成功

现在ruby安装成功了,接下来就是配置scss开发环境了:

打开cmd,在命令行中输入:

gem insall sass

出现下图中第一个红框中的内容,说明sass安装成功。

如果你还不放心,可以输入如下命令看下sass的版本号。

sass -v

如上图中第二个红框中的内容。
至此sass安装成功。

配置webstorm中scss:

先在菜单栏选择File   ---->>>> Settings....    如下图

在settings中搜索file watchers工具,在此工具中添加一个scss的watcher,按照下图设置各项。点击ok

这样webstorm中scss配置好了。

建个scss文件试试如下图,写个简单的scss代码进行测试如下图

会自动生成对应的css文件。如下图:

刚才如果没修改Output paths,那么按照默认的路径会在.scss文件同目录下实时产生修改过的.css文件。

ps:项目所在的路径中请不要出现中文,不然sass在编译是会出现编码错误的哦。

下面讲解配置SASS(这是老的语法)

首先不用安装其他软件了,因为其实刚才在配置scss的时候已经将老版本的sass安装到ruby  下面的bin目录下了,如下截图

其他不用配置,我们直接进入Webstorm   File   ------------->>>> Settings...   -------->>>>File Wachers   按下图进行配置

好了,到这儿SCSS和SASS的开发环境就已经搭建成功了。

搭建好了还不行,最好进行测试一下,建立一个.sass的文件:

接着我们可以实时看到同级目录下有个同名的css文件生成,这个文件就是sass文件编译生成的,如下图

下面进行讲解Stylus预编译环境的搭建:

要搭建这个环境,我们首先是要先安装nodeJs

我们先下载安装文件下载地址:官网http://www.nodejs.org/download/

根据自己电脑配置下载对应的版本进行安装

步骤 1 : 双击下载后的安装包 v0.10.26,如下所示:

步骤 2 : 点击以上的Run(运行),将出现如下界面:

步骤 3 : 勾选接受协议选项,点击 next(下一步) 按钮 :

步骤 4 : Node.js默认安装目录为 "C:\Program Files\nodejs\" , 你可以修改目录,并点击 next(下一步):

步骤 5 : 点击树形图标来选择你需要的安装模式 , 然后点击下一步 next(下一步)

步骤 6 :点击 Install(安装) 开始安装Node.js。你也可以点击 Back(返回)来修改先前的配置。 然后并点击 next(下一步):

安装过程:

点击 Finish(完成)按钮退出安装向导。

检测PATH环境变量是否配置了Node.js,点击开始=》运行=》输入"cmd" => 输入命令"path",输出如下结果:

PATH=C:\oraclexe\app\oracle\product\10.2.0\server\bin;C:\Windows\system32;
C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;
c:\python32\python;C:\MinGW\bin;C:\Program Files\GTK2-Runtime\lib;
C:\Program Files\MySQL\MySQL Server 5.5\bin;C:\Program Files\nodejs\;
C:\Users\rg\AppData\Roaming\npm

我们可以看到环境变量中已经包含了C:\Program Files\nodejs\

检查Node.js版本

然后我们进行  Stylus的安装,在cmd中输入以下命令:

npm install stylus

此时,表示Stylus安装成功,如果你还有疑问的话,请在安装目录下可以找到下图中红色区域中的文件

接下来我们就可以在WebStorm中对Stylus的开发环境进行配置了

我们直接进入Webstorm   File   ------------->>>> Tools...   -------->>>>File Wachers   按下图进行配置

接下来就是测试我们大家的Stylus环境是否生效,首先新建一个  .stylus 的文件  如下图

接着我们可以实时看到同级目录下有个同名的css文件生成,这个文件就是 .stylus文件编译生成的,如下图

好了,大功告成,这个配置我们就做好了。

最后我们搭建LESS的编译环境

less和Stylus的安装一样,同样依赖于Node JS的环境,也就是说也要先安装Node Js(如果安装Node JS请参考前面的介绍)。唯一不同的是在Node JS的Command控制面板输入的命令不一样:

npm install less

这样就安装完LESS的编译命令,可以在本地正常编译LESS源文件。如果您想下载最新稳定版本的LESS,还可以尝试在Node JS的Command控制面板输入:

$ npm install less@latest

当安装完了以后,可以在安装目录下找到下图中我文件

然后就是在WebStorm中搭建Less编译环境如下图

接着还是老规矩,测试一下,如下图创建一个   .less文件

接着我们可以实时看到同级目录下有个同名的css文件生成,这个文件就是 .less文件编译生成的,如下图

到此,大功告成,三种主流的CSS预编译语言开发环境搭建成功。

如有不好的地方,欢迎各位提建议意见。

===========================================================================

如果觉得对您有帮助,微信扫一扫支持一下:

参考文章:

http://caibaojian.com/sass-less-stylus.html

http://www.runoob.com/nodejs/nodejs-install-setup.html

http://blog.csdn.net/ernijie/article/details/51672346

http://www.cnblogs.com/fxair/p/3708099.html

https://segmentfault.com/q/1010000001915391

CSS预编译器配置-------LESS Sass Stylus webstorm的更多相关文章

  1. CSS预编译器

    零.CSS预编译器 CSS预处理器是指对生成CSS前的某一语法的处理.CSS预处理器用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,供项目使用 CSS预处理器为CSS增加一 ...

  2. 在 CSS 预编译器之后:PostCSS

    提到css预编译器(css preprocessor),你可能想到Sass.Less以及Stylus.而本文要介绍的PostCSS,正是一个这样的工具:css预编译器可以做到的事,它同样可以做到. “ ...

  3. CSS预处理器的对比 — Sass、Less和Stylus

    本文根据Johnathan Croom的<sass vs. less vs. stylus: Preprocessor Shootout>所译,整个译文带有我们自己的理解与思想,如果译得不 ...

  4. CSS预处理器实践之Sass、Less大比拼[转]

    什么是CSS预处理器? CSS可以让你做很多事情,但它毕竟是给浏览器认的东西,对开发者来说,Css缺乏很多特性,例如变量.常量以及一些编程语法,代码难易组织和维护.这时Css预处理器就应运而生了.Cs ...

  5. Css预处理器实践之Sass、Less大比拼

    xwei | 2012-07-07 | 网页重构 什么是CSS预处理器? Css可以让你做很多事情,但它毕竟是给浏览器认的东西,对开发者来说,Css缺乏很多特性,例如变量.常量以及一些编程语法,代码难 ...

  6. CSS预处理器实践之Sass、Less比较

    什么是CSS预处理器? CSS可以让你做很多事情,但它毕竟是给浏览器认的东西,对开发者来说,Css缺乏很多特性,例如变量.常量以及一些编程语法,代码难易组织和维护.这时Css预处理器就应运而生了.Cs ...

  7. CSS预处理器(less 和 sass)

    CSS预处理器 1.基于CSS的另一种语言 2.通过工具编译成CSS 3.添加了很多CSS不具备的特性 4.能提升CSS文件的组织 提供功能:1.嵌套 反映层级和约束 2.变量和计算,减少重复戴拿 3 ...

  8. css预编译器——Less的使用

      方法一:仅介绍在客户端环境下使用的方法 1 新建test.less并引入.less该文件(和css一样在head处引入),注意rel="stylesheet/less": &l ...

  9. CSS预编译器:Sass(入门),更快的前端开发

    SASs是由美国注册会计师协会(AICPA)下属审计准则委员会(ASB)发布,是为了便于注册会计师执行和落实一般公认审计准则(GAAS). Sass 扩展了 CSS3,增加了规则.变量.混入.选择器. ...

随机推荐

  1. [AIR] AIR 应用程序的调用和终止

    本节讨论几种对已安装的 Adobe® AIR® 应用程序进行调用的方法,以及关闭运行中的应用程序的选项和注意事项. 注: NativeApplication.InvokeEvent 和 Browser ...

  2. IE报错:模块"scrrun.dll"已加载,但对DllRegisterServer的调用失败,错误代码为0x80004005

    在我的win10系统上打开某内部网页登录的时候弹出'模块"scrrun.dll"已加载,但对DllRegisterServer的调用失败,错误代码为0x80004005'报错信息, ...

  3. 导入 RecyclerView 控件 的过程(Android 6.0)

    由于本人不熟悉Android Studio和java的思维方式,开发android studio的同事告诉我不太推荐使用ListView 而google 建议使用RecycleView ,经过了一顿查 ...

  4. C/C++二维数组分配内存

    //C++方式 double **Q=new double*[row];    //初始化Q矩阵 for(int i=0;i<row;++i) Q[i]=new double[POS_NUM]( ...

  5. 解决windows 2003 无法安装vss2005的问题

    1.打开vss2005  进行安装提示 未安装 sp1 2.下载了sp1 英文版本,与服务器语言对不上,删除,再下个 简体中文版 3.提示 无法识别 key,百度搜索 Windows XP/2003序 ...

  6. 简单的java socket 示例

    一.搭建服务器端 a).创建ServerSocket对象绑定监听端口. b).通过accept()方法监听客户端的请求. c).建立连接后,通过输入输出流读取客户端发送的请求信息. d).通过输出流向 ...

  7. Xcode7打包,iOS9真机闪退,如何解决?

    问:有些项目用xcode7打开运行,打包安装到iOS9设备上程序会闪退. 如果用xcode7以下编译,然后打包到iOS9的设备上就是正常的.这是为什么,关键是,怎么解决? 答:iOS9发布之后,有些a ...

  8. PS Web切图界面设置

    界面为移动工具时(快捷键V),选中左上角的图层. 点击视图,选中显示→智能参考线,与标尺. 点击窗口,把"库" "颜色"去掉,把屏幕右上角的"通道&q ...

  9. TCP连接的三次握手和四次解散过程

    客户端和服务器在使用TCP连接传输数据的过程中,需要经过三次握手建立连接和四次握手断开连接操作. 具体如下图所示 上图描述了TCP连接从建立到断开的详细过程,以下就其中的具体报文细节展开讨论. 在TC ...

  10. android Spinner的简单用法

    上代码: spinner = (Spinner) findViewById(R.id.spinner); tv = (TextView) findViewById(R.id.tv); final Ar ...