成长（17/2000）——SASS1

配套

• sass中文网
• sass是写css的工具，它可以简化我们的css编写，将css当做js编写，最后进行预编译生成我们想要的css
• sass有两种编写语法，sass和scss，其中scss更符合我们编写css的习惯
• SassScript:在 CSS 属性的基础上 Sass 提供了一些名为 SassScript 的新功能。 SassScript 可作用于任何属性，允许属性使用变量、算数运算等额外功能
• SassScript支持6中主要的数据类型（数字、字符串、颜色、布尔值、空值null、数组(list)，用空格或逗号作分隔符、maps）

安装

1.安装 进入官网安装指南，windows安装ruby
2.安装完ruby可能会在运行时碰到ruby不是内部指令，这可能和你的安装路径有关，先在你的安装目录下运行ruby -v，如果出现版本号说明安装成功；如果想在全局可以运行，那么需要进行环境变量配置：

• 在windows中配置环境变量
  1.RUBY_HOME=rubyinstaller_dir （实际的ruby所在路径）
  2.在path中添加 %RUBY_HOME%\bin
  cmd运行ruby -v可查看是否成功，之前打开的cmd建议重打开一个

常用语法

编译配置

• 我们在编写sass时候可以在命令行运行

1. sass --watch in.scss out.css(监听单个sass文件，修改保存后自动编译到out.css)
2.sass --watch folder/in.scss:folder/out.css(监听整个文件夹)

• 我们可以在package.json文件中配置编写script脚本

1.在项目下运行npm init -y 生成package.json文件
2.在script下添加脚本
"scripts":{
   "dev:sass": "sass --watch in.scss:out.css"
}

变量$ 、 占位符%foo 、变量定义 !default

• 变量的定义与使用

$primary-color:#fff;
a{
 color:$primary-color
}

• 占位符是为继承提供的
• 占位符不编译，可以避免生成不必要的css

#context a%box{
    background:burlywood;
    border: 1px solid burlywood;
}

.box{
    @extend %box;
}
//编译后
#context a.box {
  background: burlywood;
  border: 1px solid burlywood; 
}

• 变量定义 !default
  1.可以在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。
  2.变量是 null 空值时将视为未被 !default 赋值。

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  content: $content;
  new-content: $new_content;
}
编译为
#main {
  content: "First content";
  new-content: "First time reference"; 
}

Partial

• sass文件前加_表明文件不完整；
  我们可能会将一部分文件提取出来单独管理；比如可能将变量从各个sass中抽离出来，命名为_var.scss，然后再各个文件中引入

@import './var.scss'; //引入可省略_

嵌套规则

1.基础

• 允许嵌套编写
• &父选择器
• & 必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器
• &前可添加上层选择器

#main {
  color: black;
  &-sidebar { border: 1px solid; }
  body.ie & { color:blue}
}
编译后
#main {
  color: black;
 }
#main-sidebar {
    border: 1px solid;
 }
body.ie #main {
    color: blue; 
}

2.属性嵌套

• 有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中
  -命名空间也可以包含自己的属性值

.funky {
   font: 20px/24px { //命名空间自己的属性值
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}
编译后
.funky {
  font: 20px/24px;
  font-family: fantasy;
  font-weight: bold; 
}

注释

• 注释 /* / 与 // (Comments: / */ and //)
• 将 ! 作为多行注释的第一个字符表示在压缩输出模式下保留这条注释并输出到 CSS 文件中，通常用于添加版权信息。
• 插值语句 (interpolation) 也可写进多行注释中输出变量值：

$version: "1.2.3";
/* This CSS is generated by My Snazzy Framework version #{$version}. */
编译为
/* This CSS is generated by My Snazzy Framework version 1.2.3. */

数组lists

maps

1.map方法

$my-map:("big":20px,"small":14px); //定义key：value列表
$my-map:map-merge( $my-map, ("normal":18px));  //1.合并方法
.title{
    font-size: map-get($my-map,'big'); //根据key取值
}
编译为
.title {
  font-size: 20px; 
}

运算

循环遍历@each in /@for /@while

$my-btn-list:('success','warn','info','error');

@each $key,$value in $my-btn-list{
    .btn-#{$key}{
        color: beige;
    }
}
编译为
.btn-success {
  color: beige; }

.btn-warn {
  color: beige; }

.btn-info {
  color: beige; }

.btn-error {
  color: beige; }

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
编译为
.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}
编译后
.item-6 {
  width: 12em; }

.item-4 {
  width: 8em; }

.item-2 {
  width: 4em; }

if() /@if

.title{
    border-width: if(true,1px,2px);
}
编译后
.title {
  border-width: 1px;
}

p {
  @if 1 + 1 == 2 { border: 1px solid; }
  @if 5 < 3 { border: 2px dotted; }
  @if null  { border: 3px double; }
}
编译后
p {
  border: 1px solid; 
}

IE 滤镜

• IE 滤镜要求所有的颜色值包含 alpha 层，而且格式必须固定 #AABBCCDD，使用 ie_hex_str 函数可以很容易地将颜色转化为 IE 滤镜要求的格式

$translucent-red: rgba(255, 0, 0, 0.5);
$green: #00ff00;
div {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', 
startColorstr='#{ie-hex-str($green)}',
 endColorstr='#{ie-hex-str($translucent-red)}');
}

2.函数

3.插值语句 #{} (Interpolation: #{})

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}
编译为
p.foo {
  border-color: blue; 
}

4.& in SassScript

&作为父选择器的变量

.foo.bar .baz.bang, .bip.qux {
  $selector: &; //&指代父选择器.foo.bar .baz.bang, .bip.qux
}

mixin

• 定义mixin函数
• 传参（可变参数...）
• 为便于书写，@mixin 可以用 = 表示，而 @include 可以用 + 表示

@mixin transform($property...){
    -webkit-transform: $property;
    -ms-transform: $property;
    transform: $property;
}
.box {
    @include transform(rotate(30deg))
}
编译后
.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg); 
}

• 向混合样式中导入内容

@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}
编译后
* html #logo {
  background-image: url(/logo.gif);
}