sass学习总结

Sass 是一个 CSS 的扩展，它在 CSS 语法的基础上，允许使用变量 (variables), 嵌套规则 (nested rules), 混合 (mixins), 导入 (inline imports) 等功能，令 CSS 更加强大与优雅。使用 Sass 以及 Compass 样式库 有助于更好地组织管理样式文件，以及更高效地开发项目。—sass中文文档

---

以下是个人摘抄的sass的一些常用的知识点：

• 嵌套规则 ：Sass 允许将一个 CSS 样式嵌套进另一个样式中
• 引用父选择器:& ，在css嵌套中使用&来明确地表示插入指定父选择器

例如：

.tab {
	color: #ccc;
	&:hover {
		color: blue;
	}
	&.is-active {
		color: blue;
	}
}

编译为：

.tab {
	color: #ccc;
}
.tab:hover {
	color: blue;
}
.tab.is-active {
	color: blue;
}

• 嵌套属性
  例如：

.tab {
  font: {
    family: fantasy;
    size: 18px;
    weight: bold;
  }
}

编译为：

.tab {
  font-family: fantasy;
  font-size: 18px;
  font-weight: bold;
 }

SassScript

• **变量: $ **

/* 定义sass变量 */
$width: 100px;
$height: 50px;
/* 属性中引用变量 */
.box1 {
	width: $width;
	heiht: $height;
}
.box2 {
	width: $width;
	height: 100px;
}

编译为：

.box1 {
	width: 100px;
	heiht: 50px;
}
.box2 {
	width: 100px;
	height: 100px;
}

变量的作用域：
变量仅在它定义的选择器嵌套层级的范围内可用。不在任何嵌套选择器内定义的变量则在可任何地方使用。定义变量的时候可以后面带上!global标志，在这种情况下，变量在任何地方可见。

• **运算 **

1、数字运算

p {
  font: 10px/8px;             // 原生的CSS，不作为除法
  $width: 1000px;
  width: $width/2;            // 使用了变量, 作为除法
  width: round(1.5)/2;        // 使用了函数, 作为除法
  height: (500px/2);          // 使用了括号, 作为除法
  margin-left: 5px + 8px/2px; // 使用了 +, 作为除法
  font: (italic bold 10px/8px); // 在一个列表（list）中，括号可以被忽略。
}

编译为：

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

2、字符串运算：+ 运算可用于连接字符串

p {
  cursor: e + -resize;
}

编译为：

p {
  cursor: e-resize;
}

控制指令和表达式

• if(): 内置的if()函数可在一个条件处理分支并返回两种可能结果,if函数只判断相对应的一个参数并且返回

if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px

• **@if: ** @if 指令需要一个SassScript表达和嵌套在它下面要使用的样式，如果表达式返回值不为 false 或者 null ，那么后面花括号中的内容就会返回：

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

编译为：

p {
  border: 1px solid;
}

@if 语句后面可以跟多个@else if语句和一个 @else 语句。 如果@if语句失败，Sass 将逐条尝试@else if 语句，直到有一个成功，或如果全部失败，那么会执行@else语句。 例如：

$type: monster;
    p {
      @if $type == ocean {
        color: blue;
      } @else if $type == matador {
        color: red;
      } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

编译为：

p {
  color: green;
}

• @for：@for指令重复输出一组样式。对于每次重复，计数器变量用于调整输出结果。该指令有两种形式：@for $var from through 和 @for $varfrom<start>to<end>。注意关键字through和to的区别。$var可以是任何变量名，比如$i;<start>和<end>是应该返回整数的SassScript表达式。当<start>比<end>大的时候，计数器将递减，而不是增量。@for语句将设置$var为指定的范围内每个连续的数值，并且每一次输出的嵌套样式中使用$var的值。对于from … through的形式，范围包括和的值，但from … to的形式从开始运行，但不包括的值。使用through语法，
  例如：

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

编译为：

.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}

• @each： @each指令通常格式是@each $varin<listormap>。$var可以是任何变量名，像$length 或者 $name，和<listormap>是一个返回列表（list）或map的SassScript表达式。@each规则将$var设置为列表（list）或 map 中的每个项目，输出样式中包含使用$var的值。 例如：

@each $animal in puma, sea-slug, egret, salamander {
      .#{$animal}-icon {
        background-image: url('/images/#{$animal}.png');
  }
}

编译为：

.puma-icon {
  background-image: url('/images/puma.png');
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
}
.egret-icon {
  background-image: url('/images/egret.png');
}
.salamander-icon {
  background-image: url('/images/salamander.png');
}

#混入指令#
混入(mixin)允许定义可以在整个样式表中重复使用的样式，而避免了使用无语意的类（class），比如 .float-left。混入(mixin)还可以包含所有的CSS规则，以及任何其他在Sass文档中被允许使用的东西。甚至可以带arguments，引入变量，只需少量的混入(mixin)代码就能输出多样化的样式。

定义混入样式

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

引入混入样式

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

编译为：

.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px;
}

混入（mixin）可以用 SassScript 值作为参数，给定的参数被包括在混入（mixin）中并且作为为变量提供给混入（mixin）。当定义一个混入（mixin）的时候，参数被作为变量名，写到混入（mixin）名字后面的括号内，多个参数可以用逗号分隔。然后，当调用混入的时候，值通过对应的参数顺序被传递。 例如：

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
        width: $width;
    style: dashed;
  }
}

p { @include sexy-border(blue, 1in); }

编译为：

p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed;
}

#函数指令#
Sass 支持自定义函数，并能在任何值或脚本上下文中使用。例如

$grid-width: 40px;
    $gutter-width: 10px;

@function grid-width($n) {
      @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }

编译为：

#sidebar {
  width: 240px;
}

函数可以访问任何全局定义的变量，以及接受参数，就像一个混入（mixin）。函数可以包含语句，并且必须调用@return来设置函数的返回值

》》》end：也抄的七七八八了١١(❛ᴗ❛)