Sass混合器、继承

最新推荐文章于 2024-06-08 01:11:03 发布

sh2001824

最新推荐文章于 2024-06-08 01:11:03 发布

阅读量275

点赞数

文章标签： sass 前端 css

本文链接：https://blog.csdn.net/sh2001824/article/details/125977999

版权

本文详细介绍了Sass中的混合器（Mixins）和继承特性。混合器部分涵盖了无参数、带参数及带默认值的混合器用法，并通过实例展示其效果。继承部分讲解了如何使用@extend进行样式继承，包括占位符的使用及多继承的支持，帮助读者深入理解Sass的高级特性。

摘要由CSDN通过智能技术生成

一、混合器

1.没有参数的混合器

定义混合器使用@mixin
调用混合器使用@include

一个简单的实例（他们有相同的样式又有自己独特的样式）

//混合器（scss）
@mixin a {
    text-decoration: none;
    font-family: "微软雅黑";
    font-size: 28px;
}

.nav {
    color: blue;
    @include a;
}

.list {
    color: aquamarine;
    @include a;
}


//html代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.min.css">
</head>

<body>
    <a href="#" class="nav">导航</a>
    <a href="#" class="list">列表</a>

</body>

</html>

效果：

2.带有参数的混合器

sass在定义混合器时，不可能总是有一样的样式，所以就要用到传参了，传参的方法：可以提前定义好形参，然后在引用时，传递参数（这种方式和js很像）

实例（scss代码）

//混合器
@mixin a {
    text-decoration: none;
    font-family: "微软雅

最低0.47元/天解锁文章

sh2001824

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Sass混合器、继承

Sass混合器、继承
复制链接

扫一扫

Sass混合器、继承

一、混合器

1.没有参数的混合器

定义混合器使用@mixin

调用混合器使用@include

一个简单的实例（他们有相同的样式又有自己独特的样式）

效果：

2.带有参数的混合器

​ sass在定义混合器时 ，不可能总是有一样的样式，所以就要用到传参了，传参的方法：可以提前定义好形参，然后在引用时，传递参数（这种方式和js很像）

实例（scss代码）

sass在定义混合器时，不可能总是有一样的样式，所以就要用到传参了，传参的方法：可以提前定义好形参，然后在引用时，传递参数（这种方式和js很像）