技术博客
首页 所有文章 标签 分类 关于
技术博客

目录

Sass开发四

 收录于 未分类
   约 2607 字   预计阅读 6 分钟 
https://bing.ee123.net/img/rand?artid=151955953

Sass开发【四】

目录

@规则

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**使用该成员会报错，因此无法编译：

https://i-blog.csdnimg.cn/direct/afdf6c6a53ef4dff950744981cce34a7.png

部分

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

@import

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

⚠️ 注意！

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

@import 的问题是什么？

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

  • @import 使所有变量、mixin 和函数在全局范围内可用。这使得人们（或工具）很难确定任何东西是在哪里定义的。
  • 由于一切都处于全局范围内，库必须为所有成员添加前缀，以避免命名冲突。
  •  也是全局的，这使得很难预测哪些样式规则会被扩展。
  • 每次导入样式表时都会执行它并发出其 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;
}

报错：

https://i-blog.csdnimg.cn/direct/3aba844a94d34fd59275d54295e78c0b.png

修复方法有两种：

  • 将可选参数都放在普通参数最后
  • 按参数名称传参
@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;
}

效果：

https://i-blog.csdnimg.cn/direct/8814646e7ff74ed6833cd910e751c837.png

@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;
}

控制台效果：

https://i-blog.csdnimg.cn/direct/d2d3353bf7c74f288c4613bc5ff92411.png

@debug

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

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

效果：

https://i-blog.csdnimg.cn/direct/a19c794f29014e69865412d5d8eaabb5.png

流程控制规则

概述

流程控制规则可以控制某些代码块是否应该编译，这允许我们在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;
}

效果：

https://i-blog.csdnimg.cn/direct/3d540bee06d54ee49287e00cfc555b9c.png

其它

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

更新于 2025-09-22
 前端, Sass, Css
返回 | 主页