SCSS学习

说明：一款css预处理语言，语法完全兼容 CSS3，SCSS 和 CSS 写法无差别；

sass和scss的关系：

一样都是css预处理语言，SCSS 是 Sass 3 引入新的语法；
SASS版本3.0之前的后缀名为.sass，而版本3.0之后的后缀名.scss。

// sass
#sidebar
  width: 30%
  background-color: #faa

// scss
#sidebar {
  width: 30%;
  background-color: #faa;
}

1.变量：$ 符号来标识变量；把反复使用的css属性值定义成变量；

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color; // 变量中可存在变量

$link-color: blue;
a {
  color: $link_color; // 中划线和下划线等价，包括对混合器和Sass函数的命名
}

$side : left;
.rounded {
  border-#{$side}-radius: 5px; // 如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
}

$nav-color: #F90;// 当前样式表都可以使用
nav {
  $width: 100px; // 只有nav{}里面才可以使用，当前样式表其他地方可以重复定义和使用
  width: $width;
  color: $nav-color;
}
//编译后
nav {
  width: 100px;
  color: #F90;
}

总结：
    1. 变量中可存在变量；
    2. 中划线和下划线等价；
    3. 变量使用#{}镶嵌在字符串之中；
    4. 局部变量写在一个样式容器中包裹；

2.嵌套：

// 选择器嵌套
#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}
 /* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

// 属性也可以嵌套，比如border-color属性，可以写成：
p {
    border: {   // 注意，border后面必须加上冒号。
        color: red;
    }
}

// 在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成
a {
    &:hover { color: #ffb3ff; }
}

总结：
    1. 选择器嵌套类似对象的结构形式；
    2. 属性嵌套，在需要的嵌套属性后中加冒号（:）;
    3. 嵌套的子内容可以使用&引用父类；

3.计算能力：

// 数字运算: 支持数字的加减乘除、取整等运算 (+, -, *, /, %)“
$var: 20px;
body {
  margin: (14px/2);
  top: 50px + 100px;
  right: $var * 10%;
}

// 字符串运算： + 可用于连接字符串：
p {cursor: e + -resize;} //编译后 p {cursor: e-resize; }
p:before { 
    content: "Foo " + Bar;  
    font-family: sans- + "serif";}
// 编译为
p:before {
  content: "Foo Bar"; // 有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的
  font-family: sans-serif; // 无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号
}

4.继承：@extend className, 模块复用；

继承是基于类class的（有时是基于其他类型的选择器）
允许一个选择器，继承另一个选择器。比如，现有class1：
.class1 { border: 1px solid #ddd; }

// class2要继承class1，就要使用@extend命令：
.class2 {
     @extend .class1;
     font-size:120%;
 }

5.混合器 Mixin: 核心：指定参数和缺省值;

// 使用@mixin命令，定义一个代码块。
@mixin left {
    float: left;
    margin-left: 10px;
}
//使用@include命令，调用这个mixin。
div {
    @include left;
}

// mixin的强大之处，在于可以指定参数和缺省值。
@mixin left($value: 10px) {
  float: left;
  margin-right: $value;
}
// 使用的时候，根据需要加入参数：
div {
    @include left(20px);
}

总结：
    1. @mixin定义模块，@include 调用定义好的模块；
    2. 核心：指定参数和缺省值；