Windows下npm-sass环境搭建和开发

2018年7月21日17:30:50 1 532

Sass介绍

Sass​​ 是对​​ CSS​​ 的扩展,让​​ CSS​​ 语言更强大、优雅。​​ 它允许你使用变量、嵌套规则、​​ mixins、导入等众多功能,​​ 并且完全兼容​​ CSS​​ 语法。​​ Sass​​ 有助于保持大型样式表结构良好,​​ 同时也让你能够快速开始小型项目,​​ 特别是在搭配​​ Compass​​ 样式库一同使用时。

Sass特点

  • Sass​​ 完全兼容个版本的​​ CSS​​ 语法。我们对语法兼容严格把控,你可以放心的使用任何现有的​​ CSS​​ 库。

  • Sass​​ 比其他​​ CSS​​ 扩展语言具有更多的功能和特性,在​​ CSS​​ 语言基础上添加了扩展功能,比如变量、嵌套​​ (nesting)、混合​​ (mixin)。

  • 对颜色和其它值进行操作的{Sass::Script::Functions​​ 函数}

  • 函数库控制指令之类的高级功能

  • 良好的格式,可对输出格式进行定制

  • 支持​​ Firebug

语法

Sass​​ 有两种语法。​​ 第一种被称为​​ SCSS (Sassy CSS),是一个​​ CSS3​​ 语法的扩充版本,这份参考资料使用的就是此语法。​​ 也就是说,所有符合​​ CSS3​​ 语法的样式表也都是具有相同语法意义的​​ SCSS​​ 文件。​​ 另外,SCSS​​ 理解大多数​​ CSS hacks​​ 以及浏览器专属语法,例如IE​​ 古老的​​ filter​​ 语法。​​ 这种语种语法的样式表文件需要以​​ .scss​​ 扩展名。

 

第二种比较老的语法成为缩排语法(或者就称为​​ "Sass"),​​ 提供了一种更简洁的​​ CSS​​ 书写方式。​​ 它不使用花括号,而是通过缩排的方式来表达选择符的嵌套层级,I​​ 而且也不使用分号,而是用换行符来分隔属性。​​ 很多人认为这种格式比​​ SCSS​​ 更容易阅读,书写也更快速。​​ 缩排语法具有​​ Sass​​ 的所有特色功能,​​ 虽然有些语法上稍有差异;​​ 这些差异在{file:INDENTED_SYNTAX.md​​ 所排语法参考手册}中都有描述。​​ 使用此种语法的样式表文件需要以​​ .sass​​ 作为扩展名。

 

任一语法都可以导入另一种语法撰写的文件中。​​ 只要使用​​ sass-convert​​ 命令行工具,就可以将一种语法转换为另一种语法:

 

#​​ ​​ Sass​​ 转换为​​ SCSS

$ sass-convert style.sass style.scss

 

#​​ ​​ SCSS​​ 转换为​​ Sass

$ sass-convert style.scss style.sass

使用Sass

Sass​​ 有三种使用方式:​​ 命令行工具、独立的​​ Ruby​​ 模块,以及包含​​ Ruby on Rails​​ ​​ Merb​​ 作为支持​​ Rack​​ 的框架的插件。

 

这里我们不采用Ruby的方式,而选择下面的Node-sass

Node-sass是什么

Node-sass是一个为Node.js提供绑定到LibSass的库,这是流行的样式表预处理器SassC版本。

它允许您以惊人的速度自动将.scss文件编译为css文件,并自动通过连接中间件进行编译。

Sass环境搭建

本文采用的是结合了npmnode-sass来搭建Sass环境。

安装nodejs

ndoejs官网下载地址:https://nodejs.org/en/download/

首先我们得先安装npm,到官网下载Windows下的安装包,然后Just Next(此处省略安装过程)。

检查安装结果:node –v​​ ,得到如下输出证明安装正确。

node的简单程序:

 

了解npm是什么东东?npm其实是Node.js的包管理工具(package manager),在安装nodejs过程中已经顺带安装完了。

检查安装结果:npm –v,得到如下输出证明安装正确。

 

npm命令

  • npm安装模块

npm install xxx

利用​​ npm​​ 安装xxx模块到当前命令行所在目录;

npm install -g xxx

利用npm安装全局模块xxx;

本地安装时将模块写入package.json

npm install xxx

安装但不写入package.json;

npm install xxx –save

安装并写入package.json的dependencies中;

npm install xxx –save-dev

安装并写入package.json的devDependencies中。

  • npm删除模块

npm uninstall xxx

删除xxx模块;​​ 

npm uninstall -g xxx

删除全局模块xxx;

变更nmp的安装源

为什么?因为安装插件真的慢!最好选择淘宝的安装源,因此我们要安装cnpm,地址是:​​ https://npm.taobao.org/

安装命令:npm install -g cnpm --registry=https://registry.npm.taobao.org

安装node-sass

在命令行下执行:​​ 

cnpm install​​ –g​​ node-sass

不要试图用npm install​​ –g​​ node-sass去安装,会出现莫名的错误

检查安装结果:node-sass –v,如果得到如下信息证明安装正确。

 

建立项目

  • 建立项目目录

建立D:\alcedo-style目录,使用命令行进入该目录,然后执行如下命令初始化项目:

npm init

  • 项目安装node-sass依赖

在工程目录下执行以下命令:

cnpm install --save-dev node-sass

说明:--save-dev自动将node-sass加入到项目文件夹下的package.json

安装后工程目录结构如下:

  • 修改package.json文件

将"scripts": {…}里的​​ "test": "echo \"Error: no test specified\" && exit 1"​​ 

替换为​​ "sass": "node-sass"

 

  • 创建项目结构

在项目alcedo-style目录下分别建立src目录和dist目录,src用来存放源文件,dist存放编译后的css文件。

然后在src下新建style.scss源文件,文件内容为:

 

在命令行下输入如下命令编译:

npm run​​ sass​​ src/style.scss dist/style.css

如果有如下结果证明执行正确:

 

查看编译前后:

在sublime(view-layouts-column:2)中同时查看scss源码和编译后的css文件的结果:

  • node-sass自动编译scss文件

node-sass环境中,执行node-sass –watch <源文件> <目标文件>,具体命令:node-sass --watch src/style.scss dist/style.css

执行命令后,光标会一直在闪烁,不要Ctrl+C强行关闭。

我们可以在sublime下实时编写和查看编译后的结果。

  • 监听文件夹下所有文件

node-sass ​​ -w -r <源文件夹> -o <目标文件夹>​​ //它只会跟踪同名文件,没有则新建

-w, --watch  ​​ ​​ ​​ ​​ ​​ ​​​​ Watch a directory or file //监听

-r, --recursive  ​​ ​​ ​​ ​​​​ Recursively watch directories or files ​​ //递归地查看目录或文件

-o, --output  ​​ ​​ ​​ ​​ ​​​​ Output directory //输出目录

参考:

https://www.npmjs.com/package/node-sass

https://blog.csdn.net/wx11408115/article/details/78032443

https://blog.csdn.net/merciwen/article/details/76762664

 

在命令行下执行:

node-sass ​​ -w -r​​ src​​ -o​​ dist

它会在目标文件夹下新建一个同名的css文件,然后关联,这样源文件夹下所有文件,都和目标文件夹下所有相对应的文件名的css关联起来了,然后任意改动源文件某个scss文件,相对应的css也会改。

weinxin
微信公众号
分享IT信息技术、北海生活的网站。提供北海本地化的信息技术服务。
连线北海

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:1   其中:访客  1   博主  0

    • avatar super 2

      厉害! :wink: