首页 > 代码库 > css预处理scss环境配置

css预处理scss环境配置

css 预处理器

  CSS 预处理器用一种专门的编程语言,进行 Web css编码,然后再编译成正常的 CSS 文件,以供项目使用;说简单点就是在某个环境下写css 可以写变量、表达式、嵌套等,在通过该环境将css预处理的语言编译成正常的css文件;

sass与scss

学习网站:  http://sass.bootcss.com/

sass是采用Ruby语言编写的一款css预处理语言。Sass的缩进语法,对于写惯css前端的web开发者来说很不直观,也不能将css代码加入到Sass里面,因此sass的第三版进行了语法改良,Sass 3就变成了Scss;

 

scss 环境安装

1、安装Scss;

     scss是基于Ruby编写的,所以要先安装Ruby环境, http://rubyinstaller.org/downloads/   类似于要跑.net相关程序要有.Net Framework;

    下载RubyInstaller,运行安装(点击next即可)

技术分享

安装完ruby之后,在开始菜单中,找到刚才我们安装的ruby,打开Start Command Prompt with Ruby

技术分享

然后直接在命令行中输入

gem install sass

按回车键确认,等待一段时间就会提示你sass安装成功。

查看sass版本的命令

sass -v
技术分享

 

升级sass版本的命令

gem update sass

你也可以运行帮助命令行来查看你需要的命令

sass -h

2、Webstorm 配置scss

 在webstrom中新建一个文件,文件类型选择scss 

技术分享

 如果是第一次在文件创建完之后会提示Add watcher 绿色的字体,直接点击ok;

在webstorm 点击文件 ------》设置

技术分享

 

 如图WebStorm自动新建一个scss的‘ File Watchers‘ (实时编译的一个配置)

 编写刚创建的scss 保存的时候会自动在该目录下创建一个.css 文件,当然这个目录是可以改的;

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

css预处理scss环境配置