scss学习 01

基础

1、变量

• 使用 $ 进行变量声明

// 示例
$primary: blue;

• 变量名可使用短横线连接

// 示例
$box-primary: blue;

• 变量可包含多个值

// 示例
$border-success:  1px solid #40bb5a;

• 声明时可同时使用其他变量

// 示例
$border-primary:  1px solid $primary;

2、嵌套

• 设置样式时，scss 可以根据页面结构嵌套关系进行书写
  结构如下

  <div class="box1">
    <div class="box2">
      <div class="box3"></div>
    </div>
  </div>

• css中的写法

div {
  width: 100px;
  height: 100px;
}
.box1 .box2 {
  border:  1px solid #40bb5a;
}
.box1 .box2 .box3 {
  background-color: blue;
}

• scss中与上述相同的写法可写为

div {
  width: 100px;
  height: 100px;
  .box2 {
    border:  $border-success; // 此处变量见上述变量模块中示例
    .box3 {
       background-color: $primary;
    }
  }
}

• 嵌套时调用父选择器
  页面结构

<div class='box1'><div>

.box1 {
  width: 100px;
  height: 100px;
  background-color: $primary;
  &:hover {  // 这里 & 被解析为 .box1
    cursor: pointer;
  }
}
// 补充
.box {
  &1 { // 此处解析为 .box, css 中整体显示为 .box1
    width: 100px;
  }
}

3、嵌套属性

页面结构

<div class='box1'><div>

css 写法如下

.box1 {
  font-size: 16px;
  font-weight: 700;
  font-family: Arial;
}

等价的scss 写法

.box1 {
  font:  {  // 此处有冒号
    size: 16px;
    weight: 700;
    family: Arial;
  }
}

补充：另外的用法

.box1 {
  border: 1px  solid #999 {  // 此处没有分号
    left: 4px;
    right: 0;
  }
}

等价的 css 写法

.box1 {
  border: 1px solid #999;
  border-left: 4px;
  border-right: 0;
}

4、混合(@mixin)

• 创建方式:
  @mixin 名字(参数1, 参数2, …) { … }

• 使用方式:
  @include 名字(参数1, 参数2, …)

// 示例1  文字溢出替换为省略号
@mixin Omit {
  white-space: nowrap; // 禁止换行
  overflow: hidden;
  text-overflow: ellipsis; // 超出的文字用省略号代替
}
.box1 {
  @include Omit();
  width: 50px;
  height: 30px;
}

// 示例2 指定子元素样式
@mixin alert {
  color: #333;
  a {
    color: #999;
  }
}
.box1 {
  @include alert();
}

// 示例3 含参数
@mixin btn($color, $background) {
    color: darken($color, 10%); // 比 $color 颜色深10%
    background-color: $background;
}
.btn-primary {
    @include btn(#ffffff,#409eff)
}

// 示例4 含默认参数
@mixin default($color: #6cb4ff, $background: #fff) {
    color: $color;
    background-color: $background;
}
.btn-info {
    @include default($background: ##909399)
}

5、继承/扩展（@extend）

**作用：**用一个选择器去继承另一个选择器所有的样式
页面结构如下：

  <div class="box1"></div>
  <div class="box2"></div>

// 示例
.box1 {
  width: 50px;
  height: 50px;
  background-color: blue;
}
.box2 {
  @extend .box1
}

6、@import

Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。
通常，@import 寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。

• 文件拓展名是 .css；
• 文件名以 http:// 开头；
• 文件名是 url()；
• @import 包含 media queries。

// 示例
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);