Sass混合器、继承

最新推荐文章于 2023-11-17 11:11:55 发布

VIP文章 sh2001824

最新推荐文章于 2023-11-17 11:11:55 发布

阅读量246

点赞数

文章标签： sass 前端 css

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

版权

一、混合器

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混合器、继承
复制链接

扫一扫

深入解析CSS的Sass框架中混合宏的使用

09-24

主要介绍了CSS的Sass框架中混合宏的使用,文中对混合宏所支持的参数特别是Null参数有较为详细的讲解,需要的朋友可以参考下

Sass基础方法使用( @mixin、@include、@function、@if、@while、@for 、@each)

qq_40591925的博客

03-16

1539

数据类型：数字：1，2，3，11，10px (可以带单位) 字符串："asd",'asd',asd (有引号和无引号都是字符串类型) 如name:zhangsan;name:zhangsan;name是一个字符串颜色：blue,#fff,rgba(0,0,0,1); 布尔值：true,false 空值：null 数组：10px 10px 10px 10px 或者 10px,10px,10px,10px 最好用括号"()"包起来区分数据类型如(10px,10px,10px,10px)...

参与评论您还未登录，请先登录后发表或查看评论

Sass @mixin 与 @include

m0_74433188的博客

04-21

464

混入(mixin)通过 @mixin 指令来定义。... }

sass入门（混合器、数据类型）

weixin_64042638的博客

12-27

230

8.2:如果颜色值包含 alpha channel（rgba 或 hsla 两种颜色值），必须拥有相等的 alpha 值才能进行运算，因为算术运算不会作用于 alpha 值。5.选择器继承：一个选择器继承另一个选择器的样式，若error和seriouserror有共同样式会在一块，不同不会再一块。4.传参：(按照变量的格式，通过逗号分隔，将参数写进圆括号里,引用指令时，按照参数的顺序，再将所赋的值对应写进括号)4.混合器中的css规则：包含css规则，以及选择器和属性。css显示为：透明度不能算出。

SCSS 进阶之道：探索更多样式表达的可能性

最新发布

fafafaz的博客

11-17

157

通过@mixin关键词定义混合器，后跟一个名称和一组样式规则。例如：scss复制代码@mixin button {首先，需要定义一个父选择器，其中包含需要被复用的样式规则。例如：scss复制代码.btn {声明函数：使用@function关键字来声明一个 SCSS 函数，并定义函数名和参数。例如：scss复制代码@function add($a, $b) {使用自定义函数：在样式表中使用定义的函数，并传入参数。例如：scss复制代码.box {// 使用自定义函数。

Sass-1-基础

xxzjwyql的博客

07-18

299

一、什么是SASS(Syntactically Awesome Stylesheets Sass) 1.SASS是一套利用Ruby实现的, 最早最成熟的CSS预处理器, 诞生于2007年;它扩展了 CSS 语言，增加了变量、Mixin(混合)、嵌套、函数和运算等特性，使 CSS 更易维护和扩展; 2.如何学习SASS? LESS是一套利用JavaScript实现的CSS预处理器, 诞生于2009年...

jekyll-sass-converter：用于Jekyll的Sass转换器

02-05

Jekyll Sass转换器让Jekyll构建您的Sass和SCSS！安装 Jekyll Sass Converter需要Jekyll 2.0.0或更高版本，并且与Jekyll捆绑在一起，因此如果您已经在使用Jekyll，则无需安装它。将此行添加到您的应用程序的...

Sass解析器libsass.zip

07-19

libsass 是一个用 C 语言实现的 Sass 解析器。特点是简单、速度快而且易于集成。标签：libsass

node-sass.zip

06-10

【用于解决 failed Error: not found: python2 node-sass】报错信息如下： ``` npm WARN prefer global [email protected] should be installed with -g > node-sass@4.5.2 install E:\workspace_vscode\ww\node...

css 如何继承某个类,CSS类可以继承一个或多个其他类吗？

weixin_39796652的博客

08-04

1720

我作为一个网络程序员已经这么长时间了，而且不知道这个问题的答案，这让我感到很愚蠢。我实际上希望这是可能的，我只是不知道答案，而不是我认为答案是什么(那是不可能的) 。我的问题是，是否有可能使一个CSS类从另一个CSS类(或多个CSS类)“继承”。例如，假设我们有：.something { display:inline }.else { background:red }我想做的是这样的：....

sass基础--混合器

sweet__queen的博客

06-26

578

2. 混合器中可以传参进行修改，写法类似函数。1.多出用到重复性代码时，可以用混合器。来调用定义过的混合器样式。

【sass】@mixin/@include/@extend使用

小小笨南瓜

09-18

290

【sass】@mixin/@include/@extend使用。

Sass混合器的使用与继承的使用

gx01013的博客

07-25

206

Sass混合器的使用与继承的使用

Sass混合器

MX22724的博客

12-30

190

Sass混合器

sass教程

weixin_30656145的博客

07-27

350

sass教程 1. 使用变量; sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。或者，对于仅使用过一次的属性值，你可以赋予其一个易懂的变量名，让人一眼就知道这个属性值的用途。 sass使用$符号来标识变量(老版本的sass使用!来标识变量。改成$是多半因为!highlight-colo...

Sass--基础：变量、嵌套、导入、注释、混合、继承、运算、可变参数、条件判断、循环语句

小白小白从不日别的博客

07-18

625

特别说明因为sass的环境安装比较复杂，而在我们日后的开发过程中，是不需要这样一个环境的，所以就跳过了安装步骤，那大家可能奇怪如何编译sass，这里我们可以使用其他方式编译sass，例如：考拉软件、构建工具和编辑器都可以做到。如果大家还是希望安装一个sass环境，可以参考官网(opens new window) 使用变量： sass让人们受益的一个重要特性就是它为css引入了变量可以把反复使用的css属性值定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值或者，对于仅使

SASS（混合器，继承，运算方式）

m0_68169119的博客

07-25

478

SASS（混合器，继承，运算方式）

sass混合器

weixin_54443782的博客

07-25

173

sass的混合器

sass 混入（@mixin 与 @include的使用）

jclee95的个人博客

03-08

1335

sass 混入作者：李俊才邮箱：[email protected] CSDN 主页：https://blog.csdn.net/qq_28550263?spm=1001.2101.3001.5343 本文地址：https://blog.csdn.net/qq_28550263/article/details/123350343 目录 [1. 混入的概念](#1) 1. 混入的概念在传统的普通CSS语法中，为了描述某个目标的样式我们需要对我们选择的目标分别描述他们的样式，很多时候我们的工作是

Sass教程

05-25

Sass（Syntactically Awesome Style Sheets）是一种CSS预处理器，它扩展了CSS并使其更加灵活和易于维护。以下是一些基本的Sass知识和语法： 1. 变量：使用$符号来定义一个变量，例如：`$primary-color: #333;`。然后可以在代码中使用这个变量来代替颜色值。 2. 嵌套：Sass允许嵌套CSS规则，例如： ``` nav { ul { margin: 0; padding: 0; list-style: none; li { display: inline-block; } } } ``` 这将编译为以下CSS： ``` nav ul { margin: 0; padding: 0; list-style: none; } nav ul li { display: inline-block; } ``` 3. Mixins（混合器）：Mixins是一种可重用的代码块，可以在代码中多次使用。例如： ``` @mixin center { display: flex; justify-content: center; align-items: center; } .btn { @include center; background-color: $primary-color; color: white; padding: 10px 20px; } ``` 这将在.btn类中使用center mixin，并编译为以下CSS： ``` .btn { display: flex; justify-content: center; align-items: center; background-color: #333; color: white; padding: 10px 20px; } ``` 4. 继承：使用@extend关键字来继承一个CSS规则。例如： ``` .btn { background-color: $primary-color; color: white; padding: 10px 20px; } .btn-primary { @extend .btn; border-radius: 5px; } ``` 这将使.btn-primary类继承.btn类，并添加一个圆角边框。 5. 条件语句：使用@if和@else关键字来创建条件语句。例如： ``` @if lightness($primary-color) > 50 { background-color: black; color: white; } @else { background-color: white; color: black; } ``` 这将根据$primary-color变量的亮度来设置背景颜色和文本颜色。以上是一些Sass的基本知识和语法。了解这些后，你就可以开始使用Sass来编写更好维护和可重用的CSS代码。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交

Sass混合器、继承

一、混合器

1.没有参数的混合器

定义混合器使用@mixin

调用混合器使用@include

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

效果：

2.带有参数的混合器

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

实例（scss代码）

“相关推荐”对你有帮助么？

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