Sass混合器及运算符

文章目录

• 前言
• 一、Sass混合器
• 二、Sass运算符
• 总结

---

前言

---

一、混合器

Sass @mixin 和 @include

@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。

Sass @mixin 语法:

@mixin name {
  property: value;
  property: value;
  ...
}

@include 指令可以将混入（mixin）引入到文档中。

Sass @include 混入语法:

selector {
  @include mixin-name;
}

Sass 支持 @import 指令。

@import 指令可以让我们导入其他文件等内容。

CSS @import 指令在每次调用时，都会创建一个额外的 HTTP 请求。但，Sass @import 指令将文件包含在 CSS 中，不需要额外的 HTTP 请求。

Sass @Import 指令语法:

@import filename;

Sass @extend 指令

@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。

Sass 代码:

.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  @extend .button-basic;
  background-color: red;
}

.button-submit  {
  @extend .button-basic;
  background-color: green;
  color: white;
}

二、运算符

1.简单运算符

数学运算符 + - * /

逻辑运算符 and or not

关系运算符 >< =

示例如下

p {
    // width: 1+2;
    // width: 10+20px;
    // width: 10+20%;
    // width: 20-10;
    // width: 20-10px;
    // width: 20-10%;
    widht：50%-10px;//%不可以单位进行计算，会报错的
    //运算符/:1.用作数学运算  2.分隔符
    /border-radius: 10px/20px; //当两个单位用/进行隔开，不计算
    // border-radius: 10/20px;
    // border-radius: 10/20;
    $num_1: 1000px;
    $num_2: 20;
    //当变量与数字用/连接，此时/代表除法运算
    border-radius: $num_1/$num_2;
    // border-radius: (10/5);
    // border-radius: 10+10/5;
    //不想让两个变量进行出发时
    border-radius:#{$num_1}/#{$num_2};
}

判断语句

p{

$num_3: 100;

    $c: red;

    @if $num_3>200 or $c!=red {

        background-color: #fff;

    }

    @else {

        background-color: green;

    }

}

结果如下：

p {

    background-color: green；

}

---

总结

以上就是今天要讲的内容。