sass入门

1、sass安装

先甩个连接,按照这个步骤安装就能够了http://www.w3cplus.com/sassguide/install.html,或者去官网找下载方法.

 

2、预编译sass的所有流程

首先要有一个项目,项目名字随便取,我这里就把项目名字取为sass,个人文件目录以下:

而后进入sass文件下下面(此处须要注意,若是不进入这个文件下则预编译scss的时候须要写所有路径) -> ctrl+shift+鼠标右键打开cmd ->选择在此处打开命令窗口 (以下图显示)

-> 输入命令 sass --watch --style compressed test.scss:test.css --style expanded ->就会发现sass文件下面多了两个文件test.css和test.css.map(以下图)

->而后再html里面用link引用就能够了

 

 

Tips:

 若是没有进入sass项目下就在cmd里面写sass --watch --style compressed test.scss:test.css --style expanded命令是不会起做用的,须要写全文件路径路径,即:

sass --watch --style compressed F:/manlili/sass/css/test.scss:F:/manlili/sass/css/test.css --style expanded

 

三 、原理

 慕课网的视频作的挺好,有兴趣能够看看http://www.imooc.com/learn/311

 

第一步:分清Sass 和 SCSS

Sass 和 SCSS 实际上是同一种东西，咱们平时都称之为 Sass，二者之间不一样之处有如下两点：

(1)文件扩展名不一样，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名,可是编译出来的是同一个.css文件

(2)语法书写方式不一样，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和咱们的 CSS 语法书写方式很是相似。

 

那么问题来了,为何有了sass还要有scss?

回答: 来看一个例子

看出来了吧,css主要是前端负责书写,sass的语法让习惯写分号和大括号闭合的前端工程师不舒服,并且容易出错,因此scss应运而生.

 

第二步:用命令将Sass 或者SCSS编译为css

编译语法总结以下:

(1)一次性单文件编译 

sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

(2)一次性多文件编译 

sass <要编译的Sass文件路径>/:<要输出CSS文件路径>/

(3)实时进行编译 

sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

第三步:设置编译后的css的格式

四种格式:

1. 嵌套输出方式 nested
2. 展开输出方式 expanded  
3. 紧凑输出方式 compact 
4. 压缩输出方式 compressed

分别以下图:

对同一个scss文件:(代码以下)

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

输入不一样的命令参数,以下图:

 

四 、介绍一款可自动编译SASS的IDE

首先声明这里不是广告,用Hbulider编辑器能够实现SASS自动编译.很方便,这里只是提供一种方法,你能够不采纳,步骤以下:

点击工具 -> 选择预编译器设置 以下图:

 

- > 下一步:进入首选项

 

 

->下一步设置

 

-> 接着去本身的*.scss里面写代码,就会自动生成*.css文件了