sass

变量声明

• $标识变量

$theme: red;

• 变量作用域

具有块级作用域{}

a {
    $width: 100px;   
}
​
div {
    width: $width;
}
​
// Undefined variable.

• 变量采用中划线连字符

$theme-color: red;

sassscript

• 在 CSS 属性的基础上 Sass 提供了一些名为 SassScript 的新功能。 SassScript 可作用于任何属性，允许属性使用变量、算数运算等额外功能。

$theme-color: red; // 变量
$width: 1 + 1px;  // + - * / %
$width: 2 * 1px;
$width: 2 - 1px;
$width: 2 / 1px;

数据类型

SassScript 支持 6 种主要的数据类型：

• 数字，1, 2, 13, 10px
• 字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
• 颜色，blue, #04a3f9, rgba(255,0,0,0.5)
• 布尔型，true, false
• 空值，null
• 数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
• maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

字符串

• #{} 标识符，字符串拼接.，相当于字符串模板

@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}
@include firefox-message(".header");

body.firefox .header:before {
  content: "Hi, Firefox users!"; 
}

数组

• 是一种概念

margin: 10px 15px 0 0; // [10px， 15px, 0, 0]
font-face: Helvetica, Arial, sans-serif; // [Helvetica, Arial, sans-serif]

运算

• 所有数据类型均支持相等运算 == 或 !=，此外，每种数据类型也有其各自支持的运算方式。
• 支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值

p {
  font: 10px/8px;             // Plain CSS, no division
  $width: 1000px;
  width: $width/2;            // Uses a variable, does division
  width: round(1.5)/2;        // Uses a function, does division
  height: (500px/2);          // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
}

p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px;
}

• 如果需要使用变量，同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中，只需要用 #{} 插值语句将变量包裹。

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}
​
p {
  font: 12px/30px;
}

颜色值运算

p {
  color: #010203 + #040506;
}
​
// 计算 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09，然后编译为
p {
  color: #050709;
}

p {
  color: #010203 * 2;
}
p {
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}

$translucent-red: rgba(255, 0, 0, 0.5);
p {
  color: opacify($translucent-red, 0.3);
  background-color: transparentize($translucent-red, 0.25);
}
​
/**  compiler **/
p {
  color: rgba(255, 0, 0, 0.8);
  background-color: rgba(255, 0, 0, 0.25);
}

字符串运算

• + 可用于连接字符串

p {
  cursor: e + -resize;
  w
}
a {
    cursor: "e" + -resize;
}
/** compiler **/
p {
  cursor: e-resize;
}
a {
  cursor: "e-resize";
}

• 注意，如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的，相反
• 无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号。

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}

p:before {
  content: "Foo Bar";
  font-family: sans-serif;
}

&标识符

• &父选择器标识符

nav {
    &:hover {
        color: red;
    }
}
​
/** compiler **/
nav:hover {
  color: red;
}

#content aside {
    color: red;
    body.ie & { color: green }
}
​
/** compiler **/
#content aside {
  color: red;
}
body.ie #content aside {
  color: green;
}

群组选择器

• , + > ~选择都支持
• 属性嵌套，类型嵌套

body, article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}
​
/** compiler **/
body ~ article, article ~ article {
  border-top: 1px dashed #ccc;
}
body > section, article > section {
  background: #eee;
}
body dl > dt, article dl > dt {
  color: #333;
}
body dl > dd, article dl > dd {
  color: #555;
}
nav + body, nav + article {
  margin-top: 0;
}

sass导入

• 省略后缀*.scss,*.sass
• *.css更改*.scss

@import "colors";
@import "mixins";
@import "var";

嵌套导入

• 垮级引用

// base.scss
.mt-10 {
    margin-top: 10px;
}
.mb-10 {
    margin-bottom: 10px;
}

body {
    @import "base"; // 导入
}
​
/** compiler **/
body .mt-10 {
  margin-top: 10px;
}
body .mb-10 {
  margin-bottom: 10px;
}

!default 默认变量值

• !default默认变量值
• 有变量就用变量，没有就使用默认值

$color: green; // 变量声明
$color: red !default; // 无变量，就使用默认值变量
a {
    color: $color;
}
​
/** compiler **/
a {
  color: green;
}

静默注释

• /** css 默认注释 **/， 多行注释会编译到文件
• // javascript java 单行注释语法 为静默注释，不会出现在编译后的文件

body {
  color: #333; // 这种注释内容不会出现在生成的css文件中
  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}
​
/** compiler **/
@charset "UTF-8";
body {
  color: #333;
  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

插值注释

• 字符串模板 + 变量，输出到css
• 将 ! 作为多行注释的第一个字符表示在压缩输出模式下保留这条注释并输出到 CSS 文件中，通常用于添加版权信息。

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

@mixin 混合器

• @mixin 混合器标识符定义
• @mixin 声明
• @include 标识符调用
• 类似函数，重复调用
• 可以传参数

基础使用

@mixin common-box {
    width: 100%;
    border: 1px solide red;
    background: red;
}
​
bod {
    @include common-box;
    div {
       @include common-box;
    }
}
​
/** compiler **/
body {
  width: 100%;
  border: 1px solid red;
  background: red;
}
body div {
  width: 100%;
  border: 1px solid red;
  background: red;
}

传参

• 类似函数声明
• 参数使用$定义

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
​
a {
  @include link-colors(blue, red, green);
}
​
/** complier **/
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

默认参数

• 指定参数默认值

@mixin link-colors($normal, $hover: $normal,$visited: $normal){
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

@extend继承

• css类名继承
• @extend继承调用
• 相对@mixin性能更好

.dots {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
​
.box {
    @extend .dots;
}
​
.title {
    @extend .dots;
}
​
/**  complier **/
.dots, .title, .box {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}