css利器之sass

前言：Sass为web前端开发而生，它解决了直接进行css编写时权重难以控制，嵌套层级多导致代码编写不方便的问题。并且加入了变量定义，循环，判断等类似编程语言的代码模式。极大的提高了编写样式的效率。

sass 配置及基础语法

• 首先去node官网[ http://nodejs.cn/download/ ]，根据不同系统选择不同版本，下载之后进行安装，node -v查看node版本
  

  

  image.png

  
  

• 全局安装 npm install  node-sass  -g

• 新建文件夹 npm init （初始化项目）

• 初始化好了后，该空文件夹就会多一个package.json 的文件

  
  

  

  image.png

image.png

• 在文件夹中新建个a.scss

  
  

  

  image.png

• npm run sass a.scss b.css 结果如下

  
  

  

  image.png

sass 语法高亮插件

在sublime 里按住ctrl +shift+p，出现弹窗，选择install Package，等待一会，会再次出现一个弹窗，输入sass，选择sass，按住回车即可（我已安装sass，所以不会在出现）

image.png

image.png

sass与css同步

• npm-sass --watch (sass文件名) （css文件名）

基础语法

• sass 提供了 & 用于引用父选择器。

  
  

  

  image.png

• 群组选择器

  
  

  

  image.png

• sass声明变量以$开头

  
  

  

  image.png

定义属性时，其写法为#{  定义的属性变量 }

image.png

• 全局变量和局部变量

  
  

  

  image.png

目前还没有发现sass在sublime里面提示功能，如有知道的，可在评论区指点，谢谢

作者：jia林
链接：https://www.jianshu.com/p/e6731dadfab6