当前位置: 首页 > news >正文

sass中@mixin与 @include

@mixin与 @include

  • 一、定义与使用混入
    • 定义混入语法:
    • 使用混入语法:
    • 定义与使用混入demo
  • 二、混入中也可以包含混入
  • 三、向混入传递变量
    • 定于带变量的混入
    • 使用带变量的混入
  • 四、混入变量可变参数
    • 定义可变参数混入
    • 使用可变参数混入

定义混入@mixin与 使用混入@include。

一、定义与使用混入

定义混入语法:

@mixin mixin-name样式名 {//...各属性
}

使用混入语法:

selector { @include mixin-name
}

定义与使用混入demo

// 定义混入demo:
@mixin important-text {color: red;font-size: 25px;font-weight: bold;border: 1px solid blue;
}//使用混入:	
.danger {@include important-text;background-color: red;
}

上面代码转为css代码为:

.danger {color: red;font-size: 25px;font-weight: bold;border: 1px solid blue;background-color: green;
}

二、混入中也可以包含混入

@mixin special-text {@include important-text;@include link;@include special-border;
}

三、向混入传递变量

定于带变量的混入

@mixin bordered($color, $width) {border: $width solid $color;
}

使用带变量的混入

.myArticle {@include bordered(blue, 1px);
}

四、混入变量可变参数

当不能确定一个混入或者一个函数的参数个数,就可使用...来设置可变参数。

定义可变参数混入

@mixin box-shadow($shadows...) {-moz-box-shadow: $shadows;-webkit-box-shadow: $shadows;box-shadow: $shadows;
}

使用可变参数混入

.shadows {@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
http://www.lryc.cn/news/597044.html

相关文章:

  • 云效CICD教程(PHP项目)
  • go语言数据结构与排序算法
  • Http证书体系及证书加密流程(通信流程)
  • Web开发基础与RESTful API设计实践指南
  • kafka动态配置详解
  • 基于Kafka实现动态监听topic功能
  • 变频器实习DAY12
  • (一)从零搭建unity3d机械臂仿真-unity3d导入urdf模型
  • Kafka——Kafka中的位移提交
  • git 修改最近一次 commit 信息
  • 【2025】使用vue构建一个漂亮的天气卡片
  • Dify实战,获取禅道需求,编写测试用例到禅道
  • [AI8051U入门第八步]硬件IIC驱动AHT10温湿度传感器
  • Web 服务器和Web 中间件
  • 主流软件开发方法综述:从敏捷到开源
  • 利用中间件实现任务去重与分发精细化:股吧舆情数据采集与分析实战
  • 如何高效合并音视频文件
  • 设计模式九:构建器模式 (Builder Pattern)
  • echarts【实战】饼状图点击高亮,其他区域变暗
  • flutter使用CupertinoPicker绘制一个传入数据源的省市区选择器
  • [Bug | Cursor] import error: No module named ‘data‘
  • C++刷题 - 7.23
  • 【C++】类和对象(中)构造函数、析构函数
  • nrm指南
  • 二级建造师学习笔记-2025
  • 2025 成都航空装备展供需发布:精准匹配,高效成交
  • 货车手机远程启动功能的详细使用步骤及注意事项
  • C#值类型属性的典型问题
  • 基于.Net Core开源的库存订单管理系统
  • 【NLP舆情分析】基于python微博舆情分析可视化系统(flask+pandas+echarts) 视频教程 - 主页-微博点赞量Top6实现