认识sass

一、认识sass

SASS（Syntactically Awesome Stylesheet）是一个CSS预处理器，有助于减少CSS的重复， 节省时间。它是更稳定和强大的CSS扩展语言，描述文档的样式干净和结构。 扩展了 CSS3，增加了规则、变量、混入、选择器、继承、内置函数等等特性。生成良好格式化的 CSS 代码，易于组织和维护，Sass 文件后为.Sass和.Scss。

.sass和.scss区别是什么(了解性内容)

简言之可以理解scss是sass的一个升级版本，完全兼容sass之前的功能，又有了些新增能 力。语法形式上有些许不同，最主要的就是sass是靠缩进表示嵌套关系，scss是花括号。

Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下

两点：

• 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展 名
• 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分 号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似

例如：Sass语法 

$font-stack: Helvetica, sans-serif //定义变量 
$primary-color: #333 //定义变量 
body
  font: 100% $font-stack 
  color: $primary-color 

Scss 语法：

$font-stack: Helvetica, sans-serif; 
$primary-color: #333; 
body { 
  font: 100% $font-stack; 
  color: $primary-color; 
}

编译成
body { 
  font: 100% Helvetica, sans-serif; color: #333; 
}

二、Sass安装

Sass的运行依赖Ruby环境。下载Rudy

我们可以使用npm来安装 Sass，这是最常用的安装方式。为了提高下载速度，一般都使用淘宝 NPM 镜像定制的 cnpm。

只需要安装 以下命令就会自动下载安装一个包。

• npm install -g cnpm --registry=https://registry.npm.taobao.org

就可以使用cnpm命令使用这个包，这下就可以通过cnpm安装sass啦

• cnpm install -g sass

三、sass的使用方法

3.1 sass 监听

 

 

首先要建立2个文件夹，文件夹名称可以随便起，再启动以下命令监听

• sass --watch sass:css //（sass:css为文件夹名称，可以自设定）

3.2 sass 变量

sass文档代码：

$a:#fff; 
$b:#000; 
body {
  color: $a; 
  background: $b; 
  width: 500px; 
  height: 100px; 
}

会在.css文档出现以下执行代码
body { 
    color: #fff; 
    background: #000; 
    width: 500px; 
    height: 100px; 
}

 

3.3 sass注释

多行注释是在 /* */ 的两个星号中间来编写注释内容，

以 /* 开头，换行的话每一行都以 * 号开头，最终以 */ 结尾，多行注释是会被编译到 CSS 中的

单行注释是在 // 后面跟你的注释内容，直到行尾， 单行注释是不会被编译到 CSS 中的

3.4 sass嵌套和属性

Sass 嵌套 CSS 选择器类似于 HTML 的嵌套规则。 如下我们嵌套一个导航栏的样式

nav{
  ul{
    margin:0; 
    padding:0; 
    list-style:none; 
  }
  li{
    display:inline-block; 
  }
  a{
    display:block; 
    padding:6px 12px; 
    text-decoration:none; 
  } 
}

再如：

.father { 
  color: red; 
    .child { 
    color: green; 
      &:hover { 
      	color: red; 
      }
      &-item { 
      	color: orange; 
      } 
  } 
}

在sass的嵌套的过程中，如果需要用到父元素，在 SASS 中通过&符号引用父属性

3.5 sass 插值

插值也就是可以在特定的区域插入一段表达式或者插入一个变量，以此来实现内容动态变

换的需求。

$name: color;  
$position: top;
body { 
   background-#{$name}: red; 
   border-#{$name}: blue; 
   padding-#{$position}: 5px; 
   margin-#{$position}: 10px; 
   #{$position}: 20px;
 }
 
 --------------------------
 body { 
      background-color: red; 
      border-color: blue; 
      padding-top: 5px; 
      margin-top: 10px; 
      top: 20px; 
}

3.6 sass 继承

.a {
   width: 10px; 
 }
 .b {
     @extend .a; 
     height: 10px; 
     color: red; 
  }
  
  -----------------------------
  
  .a, .b { 
    width: 10px; 
  }
  .b {
     height: 10px; 
     color: red; 
   }

3.7 sass 导入

在 CSS 中我们可以通过 @import 来导入一个样式文件，Sass 扩展了 CSS 的 @import 规 则，使得可以导入 CSS 后缀的样式文件和 Scss 后缀的样式文件，并且提供了对 mixin 、函 数和变量的访问。

// _a.scss 
. item { 
    width: 100px; 
    height: 200px; 
}

我将在 style.scss 中导入上面的 _a.scss 文件

// style.scss 
.box {
   @import '_a.scss'; 
}