css 预处理器Sass安装如果安装的慢可以换源创建一个test.scss , 文件内容：编译不同的格式 sass

安装

npm install -g sass

如果安装的慢可以换源

npm install -g cnpm --registry=https://registry.npmmirror.com

$ cnpm install [name]

创建一个test.scss , 文件内容：

$bgColor:red;

$fontColor:black;


$fontSize:15px

body{

backgroundColor:bgColor;

font-size:fontSize;

corlor:fontColor;


}

编译不同的格式

sass代码

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

  li { display: inline-block; }

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

nested 编译出来：

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

expanded 这个输出的 CSS 样式风格和 nested 类似，只是大括号在另起一行，同样上面的代码，编译出来：

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

compact 编译出来：

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

compressed 编译出来：压缩的格式体积更小

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

编译我们可以在后面再跟一个 .css 文件名，将代码保存到文件中：

 sass runoob-test.scss runoob-test.css

@charset "UTF-8";
/* 定义变量与值 */
/* 使用变量 */
body {
  background-color: lightblue;
  color: darkblue;
  font-size: 18px;
}

/*# sourceMappingURL=runoob-test.css.map */

Sass 变量

变量用于存储信息，他可以重复使用Sass变量可以用于存储一下信息：

字符串
数字
颜色值
布尔值
列表
null值

Sass变量用$符号

$variablename: value;

以下实例设置了四个变量：myFont, myColor, myFontSize, 和 myWidth。

$myFont: Helvetica, sans-serif;  
$myColor: red;  
$myFontSize: 18px;  
$myWidth: 680px;  
 
body {  
  font-family: $myFont;  
  font-size: $myFontSize;  
  color: $myColor;  
}  
 
#container {  
  width: $myWidth;  
}

编译之后

body {  
  font-family: Helvetica, sans-serif;  
  font-size: 18px;  
  color: red;  
}  
  
#container {  
  width: 680px;  
}

Saas 作用域 Sass 变量的作用域只能在当前的层级上有效果，如下所示 .box 的样式为它内部定义的 black，.box2 标签则是为 red。

Sass 代码：

$color:red
 
 .box {
 $color:black;
 color:$color;
 }
 .box2 {
 color:$color;
 }
 
 编译之后
 
 .box {
 color:black
 }
  .box2 {
 color:red
 }

Saas !global 设置全局的作用域

$color:red
 
 .box {
 $color:black !global ;
 color:$color;
 }
 .box2 {
 color:$color;
 }
 
 编译之后
 
 .box {
 color:black
 }
 
 .box2 {
 color :black
 }

嵌套规则与属性

Sass 代码


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

编译之后的css代码

nav ul {

}

nav ul li {
 display: inline-block;
}

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

Sass 嵌套属性

很多 CSS 属性都有同样的前缀，例如：font-family, font-size 和 font-weight ， text-align, text-transform 和 text-overflow。

在 Sass 中，我们可以使用嵌套属性来编写它们：

font: {  
  family: Helvetica, sans-serif;  
  size: 18px;  
  weight: bold;  
}  
  
text: {  
  align: center;  
  transform: lowercase;  
  overflow: hidden;  
}

font-family: Helvetica, sans-serif;  
font-size: 18px;  
font-weight: bold;  
  
text-align: center;  
text-transform: lowercase;  
text-overflow: hidden;

Sass @import 与 Partials

@import

@import 指令可以让我们导入其他文件等内容。

CSS @import 指令在每次调用时，都会创建一个额外的 HTTP 请求。但，Sass @import 指令将文件包含在 CSS 中，不需要额外的 HTTP 请求。

Sass @import 指令语法如下：

@import filename;

注意： 包含文件时不需要指定文件后缀，Sass 会自动添加后缀 .scss。

index2.sass
 html, body, ul, ol {  
  margin: 0;  
  padding: 0;  
}

index.sass

@import "index2";  
  
body {  
  font-family: Helvetica, sans-serif;  
  font-size: 18px;  
  color: red;  
}

编译之后
 html, body, ul, ol {  
  margin: 0;  
  padding: 0;  
}

body {  
  font-family: Helvetica, sans-serif;  
  font-size: 18px;  
  color: red;  
}

Sass Partials

如果你不希望将一个 Sass 的代码文件编译到一个 CSS 文件，你可以在文件名的开头添加一个下划线。这将告诉 Sass 不要将其编译到 CSS 文件。但是，在导入语句中我们不需要添加下划线。

注意： 请不要将带下划线与不带下划线的同名文件放置在同一个目录下，比如，_colors.scss 和 colors.scss 不能同时存在于同一个目录下，否则带下划线的文件将会被忽略。

Sass Partials 语法格式：

_filename; 如果要导入该文件，则不需要使用下划线、

@import "colors";  
  
body {  
  font-family: Helvetica, sans-serif;  
  font-size: 18px;  
  color: $myBlue;  
}

Sass 的@minxin @include

 @minxin是指定义一个可以重复使用的样式
 @include 是指引入将定义好的minxin引入
 
 @minxin box3{
 
 backgroundColor:red;
 color:black;
 font-size:20px;
 }
 
 .box4 {
 @include box3;
 
 
 }
 
 
 编译之后：
 
     .box4 {
       backgroundColor:red;
       color:black;
       font-size:20px;
     }

向混入传递变量

@minxin bordered($widthBorder,$borderColor){
       border:$widBorder,$borderColor solid       
}   

.box3 {
@include bordered(1px,red)
}

编译之后 

.box3 {
border:1px  red solid;
}

可变参数

有时，不能确定一个混入（mixin）或者一个函数（function）使用多少个参数，这时我们就可以使用 ... 来设置可变参数。例如，用于创建盒子阴影（box-shadow）的一个混入（mixin）可以采取任何数量的 box-shadow 作为参数。


@mixin box-shadow ($boxsadow...){
    -moz-box-shadow: $shadows;  
    -webkit-box-shadow: $shadows;  
    box-shadow: $shadows;
}

.shadows {  
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);  
}

浏览器前缀使用混入

@mixin transform($property) {  
  -webkit-transform: $property;  
  -ms-transform: $property;  
  transform: $property;  
}  
  
.myBox {  
  @include transform(rotate(20deg));  
}

.myBox {  
  -webkit-transform: rotate(20deg);  
  -ms-transform: rotate(20deg);  
  transform: rotate(20deg);  
}

Sass @extend 与继承

@extend 的选择器从另外一个选择器里边继承

.box { background:red; border: 1px solid blue; font-size:20px;

}

.box1 {

@extend .box; font-size: 10px; }

## Sass 函数