scss学习

参考scss中文教程官网

介绍：Sass (Syntactically Awesome StyleSheets)
Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

一.特色功能

· 完全兼容 CSS3
· 在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能
· 通过函数进行颜色值与属性值的运算
· 提供控制指令 (control directives)等高级功能
· 自定义输出格式

二.语法格式

第一种：SCSS (Sassy CSS)—CSS3—.scss 作为拓展名
第二种：缩进格式Sass—.sass 作为拓展名

三. 使用 Sass (Using Sass)

四. CSS 功能拓展

1.嵌套规则
内层的样式将它外层的选择器作为父选择器

<style>
	#main p {
	  color: #00ff00;
	  width: 97%;
	
	  .redbox {
	    background-color: #ff0000;
	    color: #000000;
	  }
	}
	#main {
	  width: 97%;
	
	  p, div {
	    font-size: 2em;
	    a { font-weight: bold; }
	  }
	  pre { font-size: 3em; }
	}
</style>

2.父选择器&
在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器

<style>
	a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}
</style>

编译后：

<style>
	a {
  		font-weight: bold;
  		text-decoration: none; }
  a:hover {
    	text-decoration: underline; }
  body.firefox a {
    	font-weight: normal; }
</style>

编译后的 CSS 文件中 & 将被替换成嵌套外层的父选择器，如果含有多层嵌套，最外层的父选择器会一层一层向下传递

<style>
	#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}
</style>

编译为

<style>
	#main {
  color: black; }
  #main a {
    font-weight: bold; }
    #main a:hover {
      color: red; }
</style>

& 必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器

<style>
	#main {
  color: black;
  &-sidebar { border: 1px solid; }
}
</style>

编译为

<style>
	#main {
  color: black; }
  #main-sidebar {
    border: 1px solid; }
</style>

3.属性嵌套
Sass 允许将属性嵌套在命名空间中（例如：font-family, font-size, font-weight 都以 font 作为属性的命名空间）

<style>
	.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}
</style>

编译为

<style>
	.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; }
</style>

4. 占位符选择器 %foo：与常用的 id 与 class 选择器写法相似，只是 # 或 . 替换成了 %
5. 注释 /* */ 与 //
6. SassScript
   SassScript 可作用于任何属性，允许属性使用变量、算数运算等额外功能。

<style>
	$width: 5em;
	#main {
	  width: $width;
	}
</style>

变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global 声明：

<style>
	#main {
	  $width: 5em !global;
	  width: $width;
	}
	
	#sidebar {
	  width: $width;
	}
</style>

编译为

<style>
	#main {
	  width: 5em;
	}
	
	#sidebar {
	  width: 5em;
	}
</style>

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)
SassScript 也支持其他 CSS 属性值，比如 Unicode 字符集，或 !important 声明。
然而Sass 不会特殊对待这些属性值，一律视为无引号字符串。

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

<style>
	p {
	  width: 1in + 8pt;
	}
</style>

编译为

<style>
p {
  width: 1.111in; }
  </style>

关系运算 <, >, <=, >= 也可用于数字运算，相等运算 ==, != 可用于所有数据类型。

<style>
	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
	}
</style>

编译为

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

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

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

编译为

<style>
	p {
  		font: 12px/30px; 
  	}
</style>

字符串运算
+ 可用于连接字符串

<style>
	p {
  cursor: e + -resize;
}
</style>

编译为

<style>
	p {
  cursor: e-resize; }
</style>

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

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

编译为

<style>
	p:before {
  content: "Foo Bar";
  font-family: sans-serif; }
</style>

运算表达式与其他值连用时，用空格做连接符：

<style>
	p {
  margin: 3px + 4px auto;
}
</style>

编译为

<style>
	p {
  margin: 7px auto; }
</style>

在有引号的文本字符串中使用 #{} 插值语句可以添加动态的值

<style>
	p:before {
  content: "I ate #{5 + 10} pies!";
}
</style>

编译为

<style>
	p:before {
  content: "I ate 15 pies!"; }
</style>

圆括号:可以用来影响运算的顺序

<style>
	p {
  width: 1em + (2em * 3);
}
</style>

编译为

<style>
	p {
  width: 7em; }
</style>

插值语句 #{}:通过 #{} 插值语句可以在选择器或属性名中使用变量

<style>
$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}
</style>

编译为

<style>
	p.foo {
  border-color: blue; }
</style>

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

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

#main {
  content: $content;
  new-content: $new_content;
}
</style>

编译为

<style>
	#main {
  content: "First content";
  new-content: "First time reference"; }
</style>

变量是 null 空值时将视为未被 !default 赋值。

七. @-Rules 与指令

1. @import
2. @media
3. @extend
4. @at-root
5. @debug
6. @warn

八. 控制指令

1. if()
2. @if

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

编译为

<style>
p {
  border: 1px solid; }
</style>

@if 声明后面可以跟多个 @else if 声明，或者一个 @else 声明。如果 @if 声明失败，Sass 将逐条执行 @else if 声明，如果全部失败，最后执行 @else 声明，例如

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

编译为

<style>
p {
  color: green; }
</style>

3. @for

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

编译为

<style>
.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }
</style>

4. @each

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

编译为

<style>
.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'); }
</style>

5. @while
   @while 指令重复输出格式直到表达式返回结果为 false。这样可以实现比 @for 更复杂的循环，只是很少会用到。例如：

<style>
$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}
</style>

编译为

<style>
.item-6 {
  width: 12em; }

.item-4 {
  width: 8em; }

.item-2 {
  width: 4em; }
</style>

九. 混合指令 (Mixin Directives)

混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的 class，比如 .float-left。混合指令可以包含所有的 CSS 规则，绝大部分 Sass 规则，甚至通过参数功能引入变量，输出多样化的样式。

十. 函数指令

<style>
$grid-width: 40px;
$gutter-width: 10px;

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

#sidebar { width: grid-width(5); }
</style>

编译为

<style>
#sidebar {
  width: 240px; }
</style>