[Sass]混合宏的参数--传一个不带值的参数

A) 传一个不带值的参数

在混合宏中，可以传一个不带任何值的参数，比如：

@mixin border-radius($radius){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

在混合宏“border-radius”中定义了一个不带任何值的参数“$radius”。

在调用的时候可以给这个混合宏传一个参数值：

.box {
  @include border-radius(3px);
}

这里表示给混合宏传递了一个“border-radius”的值为“3px”。

编译出来的 CSS:

.box {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

[Sass]混合宏-调用混合宏

在 Sass 中通过 @mixin 关键词声明了一个混合宏，那么在实际调用中，其匹配了一个关键词“@include”来调用声明好的混合宏。例如在你的样式中定义了一个圆角的混合宏“border-radius”:

@mixin border-radius{
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

在一个按钮中要调用定义好的混合宏“border-radius”，可以这样使用：

button {    @include border-radius;}

[Sass]混合宏-声明混合宏

1、声明混合宏

不带参数混合宏：

其中 @mixin 是用来声明混合宏的关键词，有点类似 CSS 中的 @media、@font-face 一样。border-radius 是混合宏的名称。大括号里面是复用的样式代码。

带参数混合宏：

复杂的混合宏：

[Sass]嵌套-伪类嵌套

避免选择器嵌套：

• 选择器嵌套最大的问题是将使最终的代码难以阅读。开发者需要花费巨大精力计算不同缩进级别下的选择器具体的表现效果。

• 选择器越具体则声明语句越冗长，而且对最近选择器的引用(&)也越频繁。在某些时候，出现混淆选择器路径和探索下一级选择器的错误率很高，这非常不值得。

[Sass]嵌套-属性嵌套

.box {
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}

在 Sass 中我们可以这样写：

.box {
  border: {
   top: 1px solid red;
   bottom: 1px solid green;
  }
}

[Sass]嵌套-选择器嵌套

Sass 的嵌套分为三种：

• 选择器嵌套

• 属性嵌套

• 伪类嵌套

[Sass]局部变量和全局变量

全局变量就是定义在元素外面的变量

而定义在元素内部的变量是一个局部变量。

当在局部范围（选择器内、函数内、混合宏内...）声明一个已经存在于全局范围内的变量时，局部变量就成为了全局变量的影子。基本上，局部变量只会在局部范围内覆盖全局变量。

只有满足所有下述标准时方可创建新变量：

1. 该值至少重复出现了两次；

2. 该值至少可能会被更新一次；

3. 该值所有的表现都与变量有关（非巧合）

sass变量调用

默认变量

sass 的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可。
 

$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
    line-height: $baseLineHeight; 
}

编译后的css代码：

body{
    line-height:2;
}

$brand-primary : darken(#428bca, 6.5%) !default; // #337ab7$btn-primary-color : #fff !default;$btn-primary-bg : $brand-primary !default;$btn-primary-border : darken($btn-primary-bg, 5%) !default;

如果值后面加上!default则表示默认值。

Sass 的变量包括三个部分：

1. 声明变量的符号“$”

2. 变量名称

3. 赋予变量的值

sass 调试

，只要你的浏览器支持“sourcemap”功能即可。早一点的版本，需要在编译的时候添加“--sourcemap”  参数：

sass --watch --scss --sourcemap style.scss:style.css

4. 压缩输出方式 compressed

在编译的时候带上参数“ --style compressed”:

sass --watch test.scss:test.css --style compressed

3、嵌套输出方式 compact

在编译的时候带上参数“ --style compact”:

sass --watch test.scss:test.css --style compact

该方式适合那些喜欢单行 CSS 样式格式的朋友

2、嵌套输出方式 expanded

在编译的时候带上参数“ --style expanded”:

sass --watch test.scss:test.css --style expanded

 1、嵌套输出方式 nested

在编译的时候带上参数“ --style nested”:

sass --watch test.scss:test.css --style nested