sass 混合指令 (Mixin Directives)详解

更新日期: 2022-07-15阅读: 962标签: sass

混合指令(Mixin)用于定义可重复使用的样式,避免了使用无语意的 class,比如 .float-left。混合指令可以包含所有的 css 规则,绝大部分 Sass 规则,甚至通过参数功能引入变量,输出多样化的样式。

mixin是可以重用的一组CSS声明。mixin有助于减少重复代码,只需声明一次,就可在文件中引用。

可以看出,mixin类似变量,不同的是变量存储值,mixin存储一组css声明。mixin可以传入参数。

定义与使用混合指令 @mixin

@mixin mixin-name([param1,[param2...]]) {
	/* css 声明 */
}

例1:标准形式

// 定义页面一个区块基本的样式
@mixin block {
    width: 96%;
    margin-left: 2%;
    border-radius: 8px;
    border:1px #f6f6f6 solid;
}
// 使用混入
.container{
    .block{
        @include block;
	}
}

生成结果

.container .block { 
    width: 96%; 
    margin-left: 2%; 
    border-radius: 8px; 
    border: 1px #f6f6f6 solid; 
}

例2:嵌入选择器

// 定义警告字体样式,下划线(_)与横线(-)是一样的
@mixin warning-text {
    .warn-text{
        font-size: 12px;
        color: rgb(255, 253, 123);
        line-height: 180%;
    }
}
// 使用混入
.container{
    @include warning-text;
}

编译结果

.container .warn-text { 
    font-size: 12px; 
    color: #fffd7b; 
    line-height: 180%; 
}

例3:使用变量

// 定义flex布局元素纵轴的排列方式
@mixin flex-align($aitem){
    -webkit-box-align:$aitem;
    -webkit-align-items:$aitem;
    -ms-flex-align:$aitem;
    align-items:$aitem;
}
// 只有一个参数,直接传递参数
.container{
    @include flex-align(center);
}
// 给指定参数指定值
.footer{
    @include flex-align($aitem:center);
}

例4:使用变量(多参数)

// 定义块元素内边距
@mixin block-padding($top,$right,$bottom,$left){
    padding-top: $top;
    padding-right: $right;
    padding-bottom: $bottom;
    padding-left: $left;
}

使用一

// 按照参数顺序赋值
.container{
    @include block-padding(10px,20px,30px,40px);
}

使用二

// 可指定参数赋值
.container{
    @include block-padding($left:20px, $top:10px, $bottom: 10px, $right:30px);
}

只想设置两个边:

// 可指定参数赋值
.container{
    @include block-padding($left:10px, $top:10px, $bottom:0, $right:0);
}

问题:必须指定4个值?????

例5:指定默认值

// 定义块元素内边距,参数指定默认值
@mixin block-padding($top:0,$right:0,$bottom:0,$left:0){
    padding-top: $top;
    padding-right: $right;
    padding-bottom: $bottom;
    padding-left: $left;
}

灵活使用

// 可指定参数赋值
.container{
    // 不带参数
    //@include block-padding;

    //按顺序指定参数值
    //@include block-padding(10px,20px);

    //给指定参数指定值
    @include block-padding($left:10px,$top:20px)
}

例6:可变参数

参数不固定的情况

** 
    *定义线性渐变
    *@param $direction  方向
    *@param $gradients  颜色过度的值列表
 */
@mixin linear-gradient($direction, $gradients...) {
    background-color: nth($gradients,1);
    background-image: linear-gradient($direction, $gradients);
}

使用

.table-data{
    @include linear-gradient(to right,#F00, orange, yellow);
}

这就是“老姚”给大家整理的scss中混入@mixin指令的一些使用,希望对你有帮助。

来源:https://www.cnblogs.com/top8/archive/2022/07/15/16480579.html

链接: https://fly63.com/article/detial/11890

Sass简单、快速上手_Sass快速入门学习笔记总结

Sass是世界上最成熟、稳定和强大的专业级CSS扩展语言 ,除了Sass是CSS的一种预处理器语言,类似的语言还有Less,Stylus等。 这篇文章关于Sass快速入门学习笔记。

SASS简介及使用方法

Sass是css的一个扩展开发工具,它允许你使用变量、条件语句等,使开发更简单可维护。这篇文章介绍:基本语法(变量、计算功能、嵌套、注释、继承、混合、颜色函数、引入外部文件)、高级用法(函数 function、if条件语句、循环语句)

SCSS提取和懒加载

本节课讲解在webpack v4中的 SCSS 提取和懒加载。值得一提的是,v4和v3在 Scss 的懒加载上的处理方法有着巨大差别。本节课主要涉及 SCSS 在懒加载下提取的相关配置和插件使用。

webpack配置sass模块的加载

webpack管理的项目,我们希望用sass定义样式,为了正常编译,需要做如下配置。这里不讲webpack的入门,入门的文章,我推荐这篇《webpack入门》。为了使用sass,我们需要安装sass的依赖包

4种灵活的Scss编译输出风格整理

很多人从使用Scss的那一刻起,就被别人告诉了如何编译。所以,基本上也就只会一种命令编译方式。其实Scss提供了4种风格输出CSS,以满足更多人的需求。不同的输出方式如下:

Vue-cli 3.0 使用Sass Scss Less预处理器

项目中使用预处理器,可以有效减少css代码量,使用Sass||Scss||Less;你可以在创建项目的时候选择预处理器 (Sass/Less/Stylus)。如果当时没有选好,内置的 webpack 仍然会被预配置为可以完成所有的处理。

sass和less的优缺点

sass和less都是css的预编译处理语言,他们引入了mixins,参数,嵌套规则,运算,颜色,名字空间,作用域,JavaScript赋值等 加快了css开发效率,当然这两者都可以配合gulp和grunt等前端构建工具使用

原生 CSS “杀死” 预处理器 Sass!

我也无意中(至少在开始时)从我的代码库中删除了所有Sass的痕迹。这不是我打算做的事情,但是我看到我的旧Sass文件的次数越多,我就会更加地质疑它是否为我的网站增加了价值,或者只是增加了额外的复杂性和依赖性

Sass和Less的区别?

这篇文章主要解答以下几个问题,供前端开发者的新手参考。1、什么是Sass和Less?2、为什么要使用CSS预处理器?3、Sass和Less的比较4、为什么选择使用Sass而不是Less?

SCSS 常用属性合集

Scss 文档太多了,但还是耐心看完了,总结自己常用的一些语法。Sass 允许将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!