Sass开发【四】

目录

@规则

@use

加载成员

@use别名

私有成员

部分

@import

@mixin和@include

参数

可选参数

@function

可选参数

@error

@warn

@debug

流程控制规则

概述

[@if、@else if、@else](#@if、@else if、@else)

@each

@for

@while

其它

---

@规则

Sass 的许多额外功能都以**@** 的形式出现，@ 是Sass 独有的，经过编译后不会生成CSS代码块

Sass 共有11 个**@**规则：

• @use：加载来自其他Sass文件的样式
• @forward：加载Sass样式表
• @import：扩展CSS@规则
• @mixin和@include：Sass模板，使Sass代码复用
• @function：定义SassScript函数
• @extend：Sass继承
• @at-root：将内部样式放置在CSS文件根部
• @error：人为触发编译失败并显示错误消息
• @warn：打印警告，但不完全停止编译
• @debug：打印用于调试的信息
• @流程控制规则(@if、@each、@for、@while)：控制样式流程

@use

@use 规则加载其它Sass 文件样式到当前Sass 文件(类似于JS 里的export 与import )，通过**@use** 加载的Sass 文件成为模块，Sass也提供了一些内置模块，里面包含了许多有用的函数

@use格式：

// @use语法
@use "<url>";
// 例如有一个test2.scss文件,可以使用下面语法导入
@use "test2.scss";

下面是一个**@use**使用的例子：

test.scss文件：

@use "test2";
// test.scss
.div {
    font-weight: bold;
}

test2.scss文件：

// test2.scss
.p {
    font-weight: bold;
}

编译后的test.css文件：

.p {
  font-weight: bold;
}

.div {
  font-weight: bold;
}

加载成员

@use 某个模块后，可以搭配**@include** 导入该模块的某个mixin或变量或函数

test.scss文件：

@use "test2";
// test.scss
.div {
    @include test2.rounded;
    font-weight: bold;
}

test2.scss文件：

// test2.scss
$radius:5px;

@mixin rounded {
    border-radius: $radius;
}

编译后的test.css文件：

.div {
  border-radius: 5px;
  font-weight: bold;
}

@use别名

@use 也允许我们使用别名，通过as语法设置

@use "test2" as T;
// test.scss
.div {
    @include T.rounded;
    font-weight: bold;
}

甚至还可以使用"*"通配符

@use "test2" as *;
// test.scss
.div {
    @include rounded;
    font-weight: bold;
}

私有成员

如果不想让某个变量被导出，可以使用"-"或"_"开头的名称，这样的成员就是私有成员，通过**@use**无法导入该成员

test.scss文件：

@use "test2" as T;
// test.scss
.div {
    @include T.rounded;
    font-weight: bold;
    width: T.$-width;
}

test2.scss文件：

// test2.scss
$radius:5px;
$-width:10px;

@mixin rounded {
    border-radius: $radius;
}

编译后的test.css文件：

因为**$-width** 是私有成员，所以在test.scss使用该成员会报错，因此无法编译：

部分

仅用于作为模块加载而不能独立编译 的Sass 文件以"_"开头(例如_code.scss)，这些被称为部分 ，它们告诉Sass 工具不要尝试独立编译 这些文件，导入部分时，可以省略"_"

@import

@import已被Sass官方宣布淘汰，目前不推荐使用，具体信息如下：

⚠️ 注意！

Sass 团队不鼓励继续使用 @import 规则。Sass 将在未来几年 逐步淘汰它，最终完全从语言中删除它。建议改为使用 @use 规则。（请注意，目前只有 Dart Sass 支持 @use。其他实现的使用者必须使用 @import 规则。）

@import 的问题是什么？

@import 规则存在一些严重问题

• @import 使所有变量、mixin 和函数在全局范围内可用。这使得人们（或工具）很难确定任何东西是在哪里定义的。

• 由于一切都处于全局范围内，库必须为所有成员添加前缀，以避免命名冲突。

• @extend 规则 也是全局的，这使得很难预测哪些样式规则会被扩展。

• 每次导入样式表时都会执行它并发出其 CSS，这会增加编译时间并产生臃肿的输出。

• 以前无法定义私有成员或对下游样式表不可访问的占位符选择器。

新的模块系统和 @use 规则解决了所有这些问题。

@mixin和@include

@mixin 允许我们在整个Sass文件中重复使用样式，@mixin 和**@include**的基础使用，这里就不再赘述

参数

mixin允许接收参数，这允许在每次调用它们时自定义它们的行为

test.scss文件：

@mixin rtl($property, $value) {
    #{$property}: $value;
}

.div {
    @include rtl(float, left);
    font-weight: bold;
}

test.css文件：

.div {
  float: left;
  font-weight: bold;
}

可选参数

mixin 声明的每个参数都必须在**@include** 时传递，也可以通过定义一个默认值，使参数变为可选参数，当不传递该参数时，参数将使用默认值

@mixin rtl($property: float, $value: left) {
    #{$property}: $value;
}

.div {
    @include rtl;
    font-weight: bold;
}

@function

函数可以在SassScript值上定义复杂操作，可以在样式表中重复使用这些操作

函数使用**@function** 定义，名称可以是不以 -- 开头的Sass 标识符，返回调用结果使用**@return**

test.scss文件：

@function add($a, $b) {
    @return $a + $b;
}
.div {
    width: add(1, 2) + px;
}

test.css文件：

.div {
  width: 3px;
}

可选参数

函数也允许添加可选参数：

@function add($a, $b:2) {
    @return $a + $b;
}
.div {
    width: add(1) + px;
}

当可选参数 与普通参数 混用时，可选参数 必须放在所有普通参数 的最后，否则会报错

@function add($a:1, $b) {
    @return $a + $b;
}
.div {
    width: add(1) + px;
}

报错：

修复方法有两种：

• 将可选参数都放在普通参数最后
• 按参数名称传参

@function add($a:1, $b) {
    @return $a + $b;
}
.div {
    width: add($b:1) + px;
}

@error

@error允许我们人为停止Sass编译，常用于@if判断出错的情况下，强制停止编译

@function add($a:1, $b) {
    @return $a + $b;
}
.div {
    @error "这是一个测试错误";
    width: add($b:1) + px;
}

效果：

@warn

@warn打印一串字符串，但是不会停止Sass编译，常用来作为一个提醒

test.scss文件：

@function add($a:1, $b) {
    @return $a + $b;
}
.div {
    @warn "这是一个测试警告";
    width: add($b:1) + px;
}

test.css文件：

.div {
  width: 2px;
}

控制台效果：

@debug

@debug 打印一串字符串，常用于调试，不会中断Sass编译

@function add($a:1, $b) {
    @return $a + $b;
}
.div {
    @debug "这是一个测试警告";
    width: add($b:1) + px;
}

效果：

流程控制规则

概述

流程控制规则可以控制某些代码块是否应该编译，这允许我们在Sass 编写某些简单算法来控制Sass的编译

• @if控制是否执行代码块
• @each对列表中的每个元素或映射中的每对元素控制
• @for控制代码块执行次数
• @while控制代码块，直到满足某个条件

@if、@else if、@else

类似于JS里的if、else if、else

test.scss文件：

@mixin test($direction, $width) {
    @if ($direction == "left") {
        border-left: $width;
    }
    @else if ($direction == "right") {
        border-right: $width;
    }
    @else if ($direction == "top") {
        border-top: $width;
    }
    @else{
        border-bottom: $width;
    }
}
.div {
    @include test("left", 1px);
    @include test("right", 1px);
    @include test("top", 1px);
    @include test("bottom", 1px);
}

test.css文件：

.div {
  border-left: 1px;
  border-right: 1px;
  border-top: 1px;
  border-bottom: 1px;
}

@each

@each相当于JS里的forEach方法

test.scss文件：

$sizes: 10px,20px,30px;

@each $size in $sizes {
  .div-#{$size} {
    width: $size;
    height: $size;
  }
}

test.css文件：

.div-10px {
  width: 10px;
  height: 10px;
}

.div-20px {
  width: 20px;
  height: 20px;
}

.div-30px {
  width: 30px;
  height: 30px;
}

@for

@for相当于JS里的for方法

test.scss文件：

@for $i from 1 through 3 {
  .div-#{$i} {
    width: $i;
    height: $i;
  }
}

test.css文件：

.div-1 {
  width: 1;
  height: 1;
}

.div-2 {
  width: 2;
  height: 2;
}

.div-3 {
  width: 3;
  height: 3;
}

@while

@while相当于JS里的while方法

test.scss文件：

$i: 1;
@while ($i <= 3) {
    @debug $i;
    $i: $i + 1;
} 

效果：

其它

更多Sass学习可以参考我的专栏：

CSS_是洋洋a的博客-CSDN博客