sass总结

sass文件后缀为.scss
sass让人们最受益的一个重要特性就是它为css引入了变量。使用$来表示变量。

1、使用样式嵌套

标签嵌套：

div{
	color:#333;
	a{
		font-size:12px;
		&:hover{
			text-decoration:underline;
		}
	}
}

属性嵌套：

div{
	border:{
	style:solid;
	left:{
		width:4px;
		color:#888;
	}
	right:{
		width:2px;
		color:#ff0000;
	}
	}
}

编译后为：

div{
	border-style:solid;
	border-left-width:4px;
	border-left-color:#888;
	border-right-width:2px;
	border-right-color:#ff0000;
}

父选择器的标识符&

在嵌套css规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定hover样式时，可以使用&代表嵌套外层的父选择器。

<template>
  <div class="container">
    <div><a>这个世界真美好！<span>哈哈</span></a></div>
  </div>
</template>
<style lang="scss">
.container a{
  span{
    color: green;
  }
  &:hover{
    color: orange;
  }
}
</style>

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

#main {
  color: black;
  &-sidebar { border: 1px solid; }
}

编译为：

#main { color: black; }
#main-sidebar { border: 1px solid; }

2、声明变量

变量是用$开头，后面紧跟变量名。

$red:red;
div{
	color:$red;
}

编译后结果为：

div{
	color:red;
}

特殊变量

特殊变量，如果变量嵌套在字符串中，则需要写在#{}符合里面，例如:

$top:top;
div{
	margin-#{$top}:10px;
}

默认变量

默认变量，仅需要在值后面加入!default即可。默认变量一般用来设置默认值，当该变量出现另外一个值时，无论定义先后，都会使用另外一个值，覆盖默认值。

$color:red;
$color:blue !default;
div{
	color:$color;/*结果是color:red;读取的是red*//
}

全局!global

如果我们在局部定义了一个变量，如果想要在作用域外面使用，需要在这个变量后面加一个!global即可。
实例：

.d1{
	$n1:#333 !global;
}
.d2{
	color:$n1;
}

上述例子中，变量$n1是在d1中声明的，如果想在d2中使用，那么就在n1后面加上!global

通过@import导入文件

可以将多个scss合并为一个。
导入sass文件：
实例：
现有a.scss，b.scss文件，全部导入main.scss文件

@import 'a';
@import 'b';

多值变量

多值变量分为list类型和map类型，list有点像js对象中的数组，map类型像js中的对象。
list可通过空格，逗号或小括号分割多个值，使用nth( $ 变量名，$ 索引)取值，list数据操作有其他函数。
使用nth语法：
nth($ 变量名，$ 索引)；索引就表示取第几个变量值。
举个例子：
定义一个变量$mypx，它有6个值：
$mypx:10px 20px 30px 40px 50px 60px;

我们想去调用它的值，比如调用它的第3个值30px.

div{
	margin:nth($mypx,$3) 5px 5px 5px;
}

上述的margin编译结果为margin:30px 5px 5px 5px;

例子2：
现在有一个二维数组变量是这样：

$mypx:10px 20px,30px 40px,50px 60px;
也可以用括号来包裹：
$mypx:（10px 20px）（30px 40px）（50px 60px）;

当我们再使用nth取他第一个值时如：

nth($mypx,1);此时得到的值是10px 20px;

由于它分组了，此时得到的就是两个值。

map用法：

map数据以key和value组成.

格式：$map:(key1:value1,key2:value2);通过map-get($map,$key);

用法：

$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}

例如：

/*一维数据*/
$px:5px 10px 20px 30px;
/*二维数据，相当于js中的二维数组*/
$px:5px 10px,20px 30px;
$px:(5px 10px) (20px 30px);
/*例如*/
$px:10px 20px;
div{
	margin:nth($px,1) 0 0 nth($px,2);/*margin:10px 0 0 20px*/
}

例子1：

<template>
  <div class="container">
    <div><p>这个世界真美好！</p></div>
  </div>
</template>
<style lang="scss">
$color001:red;
.container{
  color: $color001;
}
</style>

声明一个字体颜色变量$color001，再给它设置一个颜色值，red。
$color001:red;
调用变量：
color: $color001;
这种变量的好处就是如果我们突然要改变这个字体的颜色，但是我们有多个地方都用到了这个字体颜色，我们使用sass的好处就是，此时只需要修改变量里面的那个色值，所有的文字颜色都会改变。

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

#main {
  $width: 5em !global;
  width: $width;
}
#sidebar {
  width: $width;
}

虽然 $width写在了#main的中，但是它后面加了!global，所以认为它是一个全局变量。所以#sidebar可以调用它。

3.@extend继承

如果一个样式和另一个样式完全相同，但是又额外添加了样式，我们通常在html中给元素定义两个class，一个通用样式，一个特殊样式。
例如,有一个h1和h2，他们两个除了字体颜色，其他都一样。

<template>
  <div class="container">
   <h1>我是大标题</h1>
   <h2>我是小标题</h2>
  </div>
</template>

此时可以给它定义一个公用的样式.hcommon，然后在h1和h2中分别调用@extend .hcommon即可继承hcommon中的样式。

<style lang="scss">
.container{
  .hcommon{
    font-size: 20px;
    border: 1px solid #ddd;
    width: 100px;
    height: 100px;
    text-align:center;
  }
  h1{
    color: red;
    @extend .hcommon;
  }
  h2{
    color: blue;
    @extend .hcommon;
  }
}
</style>

3.数据类型

sass支持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)

4.运算

支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。
例如：
p {
width: 1in + 8pt;
}
编译为：
p { width: 1.111in; }
关系运算 <, >, <=, >= 也可用于数字运算，相等运算 ==, != 可用于所有数据类型。

除法运算符

以下三种情况 / 将被视为除法运算符号：

• 如果值，或值的一部分，是变量或者函数的返回值
• 如果值被圆括号包裹
• 如果值是算数表达式的一部分

p {
  font: 10px/8px;/*不合法，不是算数表达式*/
  $width: 1000px;
  width: $width/2;
  width: round(1.5)/2;
  height: (500px/2); 
  margin-left: 5px + 8px/2px; /*它是算数表达式的一部分*/
}

如果需要使用变量，同时又要确保 / 不做除法运算而是完整地编译到 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;
}

计算结果为：计算 01 * 2 = 02 02 * 2 = 04 03 * 2 = 06，然后编译为p {color: #020406; }
注意：
需要注意的是，如果颜色值包含 alpha channel（rgba 或 hsla 两种颜色值），必须拥有相等的 alpha 值才能进行运算，因为算术运算不会作用于 alpha 值。
p {color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);}
结果为：
p {color: rgba(255, 255, 0, 0.75); }

字符串运算

+可用于连接字符串
例如：
p { cursor: e + -resize;}编译为p {cursor: e-resize; }

注意，如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的:
p:before {content: "Foo " + Bar;}编译结果：p:before {content: “Foo Bar”;}

相反，无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号。
p:before { font-family: sans- + “serif”;}编译结果为p:before{font-family: sans-serif; }

运算表达式与其他值连用时，用空格做连接符：
p {margin: 3px + 4px auto;}编译为p { margin: 7px auto; }

在有引号的文本字符串中使用 #{} 插值语句可以添加动态的值：
p:before {
content: “I ate #{5 + 10} pies!”;
}
编译为：
p:before {
content: “I ate 15 pies!”; }

圆括号

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

p {
  width: 1em + (2em * 3);
}

编译为：
p { width: 7em; }

函数

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

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

编译为：
p.foo { border-color: blue; }

#{} 插值语句也可以在属性值中插入 SassScript，大多数情况下，这样可能还不如使用变量方便，但是使用 #{} 可以避免 Sass 运行运算表达式，直接编译 CSS。

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

编译为
p {font: 12px/30px; }

5.混合(@mixin)

定义一个mixin,可以再mixin中添加任何你想要重复使用的样式。

@mixin button-lager {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
}

mixin可以包含在css和sass中的有效内容：

@mixin link {  
    a {  
        color: blue;

        &:visited {
            color: purple;
        }  
        &:hover {
            color: white;
        }  
        &:active {
            color: red;
        }  
    }
}

调用mixin使用@include
如下：

.greenbutton{
	@include button-lager;
	color:green;
}

注：
我们这里有多个mixin。

@mixin button{
	font-size:16px;
}
@mixin font{
	color:red;
}
@mixin myname{
	@include button;
	@include font;
}

@mixin参数的使用

@mixin可以接收和使用参数。

@mixin button($b){
	font-size:12px;
	padding:10px;
	color:red;
	background:$b;
}

注意到参数被设置为一个变量，并成为background属性的值，如果我们想创建一个绿色的按钮，那么我们可以这么用：

.button-green{
	@include button(#ff0000);
}

当sass被编译时，值#ff0000就被传递给@mixin并成为变量$b的值。
@mixin还可以使用多个参数，中间用逗号隔开：

@mixin mybutton($a,$b){
	font-size:12px;
	color:$a;
	background:$b;
}
.button-green{
	@include mybutton(#ff0000,black);
}

给参数传递默认值。如果我们在使用@include调用时没有传递参数，可以使用默认值。

@mixin mybutton($a:red){
	font-size:12px;
	color:$a;
}

比如我们在调用时忘记传参数,他就会使用默认值：

.button-green{
	@include mybutton;
}

当然，也可以使用一个参数来覆盖默认值。

.button-green{
	@include mybutton(#ff5200);
}

@mixin关键字参数

@include在调用@mixin参数时也可以把变量加上。

@mixin aa($a,$b){
	font-size:$a;
	color:$b;
}

调用：

.button-green{
	@include aa($b:red,$a:12px);//加了关键字参数名后，参数顺序可以调换。
}

多个可变参数

比如有一个div，给它添加多个投影，投影直接可以用逗号隔开：

.container
{
  box-shadow: 2px 2px 2px #333,4px 4px 4px red;
}

在另一个元素上，你可能只想使用一种阴影或者在其他元素上你又想使用三种或四种，这个时候可以创建一个接收数量可变的参数的mixin模块，并在使用@include指令的时候决定传递参数的数量。

@mixin box-shadows($shadow...){
	box-shadow:$shadow;
}
.container{
	@include box-shadows(0px 1px 2px red,3px 4px 5px #333);
}

注：通过在变量后面增加三个点(…)来使mixin模块接收数量可变的参数。需要注意的是这些是三个周期的字符，而不是单一的省略号。当你使用@include传递参数的时候，使用逗号将参数分开。

@content

在使用mixin混合样式的时候，可以先将一段代码导入到混合指令中，然后再输出混合样式，额外导入的部分将出现在@content标志的地方。
如下:

@mixin phone{
	@media(max-width:500px){
		@content;
	}
}
@mixin ipad{
	@media (min-width:501px) and (max-width:1024px){
		@content;
	}
}
//调用：
body{
	@include phone{
		background:red;
	}
	@include ipad{
		background:green;
	}
}

相当于把@include中的额外内容放到@mixin中的@content的位置，上面代码编译后为：

body{
	@media(max-width:500px){
	background:red;
	}
	@media (min-width:501px) and (max-width:1024px){
	background:green;
	}
}

为了便于书写，@mixin可以使用=表示，而@include可以使用+表示。

6.@function函数指令

sass支持自定义函数，并且能在任何属性值或sass script中使用：
如下：

$b:20px;
@function grid($c){
  @return $c*$b;
}
.mystyleone{
  width: grid(40);
}

可以传递若干个全局变量给函数作为参数，一个函数可以包含多条语句，需要调用@return输出结果。
还可以使用关键词参数，上述例子可以这样写：

.mystyleone{
	width:grid($c:40);
}