Loading [MathJax]/jax/input/TeX/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Sass中带参数混合

Sass中带参数混合

原创
作者头像
程序员NEO
发布于 2023-09-28 23:32:22
发布于 2023-09-28 23:32:22
2930
举报

SASS 中带参数的混合和 LESS 中也一样

  • 不带默认值形参
代码语言:scss
AI代码解释
复制
@mixin whc($w, $h, $c) {
  width: $w;
  height: $h;
  background: $c;
}

.box1 {
  @include whc(300px, 300px, red);
}

.box2 {
  @include whc(200px, 200px, blue);
}
image-20210814232951800
image-20210814232951800
  • 带默认值形参
代码语言:scss
AI代码解释
复制
@mixin whc($w: 100px, $h: 100px, $c: #000) {
  width: $w;
  height: $h;
  background: $c;
}

.box1 {
  @include whc();
}

.box2 {
  @include whc(200px, 200px, blue);
}
image-20210814233107306
image-20210814233107306
  • 给指定参数赋值
代码语言:scss
AI代码解释
复制
@mixin whc($w: 100px, $h: 100px, $c: #000) {
  width: $w;
  height: $h;
  background: $c;
}

.box1 {
  @include whc(300px, 300px, red);
}

.box2 {
  @include whc($c: blue);
}
image-20210814233533093
image-20210814233533093

我正在参与2023腾讯技术创作特训营第二期有奖征文,瓜分万元奖池和键盘手表

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
SASS第六篇 混合
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> </title> <style> /* SASS中混合定义: @mixin 混合名称{}; 或者 @mixin 混合名称(){}; SASS中混合调用: @include 混合名称; 或者 @include 混合名称();*/ /*@mixin center() { position: absolute; lef
贵哥的编程之路
2020/10/28
2500
SASS第六篇  混合
详解:24 圆角的变化,对你的加深margin理解可能会有可能
核心:margin:100px auto;核心在于有两个参数,第一个为上下,第二个为左右,,上下代表上下都为100哈, 问题?为什么下也为100px呢,因为你看哈
贵哥的编程之路
2020/10/28
3630
详解:24   圆角的变化,对你的加深margin理解可能会有可能
(2019)[前端]面试题[1]:CSS BFC是什么【BFC详解】
BFC(Block Formatting Context)格式化上下文,是盒模型的一种渲染布局,简言之可以理解为 一个独立的容器,不受外部影响,不影响外部。
无道
2019/11/13
1.8K0
(2019)[前端]面试题[1]:CSS BFC是什么【BFC详解】
SASS第七篇 SASS中带参数混合
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*scss代码,如下*/ /*@mixin whc($w:100px,$h:100px,$c:#000) { width: $w; height: $h; background: $c; } .box1 { @include whc(300px,300px,red)
贵哥的编程之路
2020/10/28
3830
SASS第七篇  SASS中带参数混合
LESS第三课
less的混合: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*混合名称的核心是:是定义一个名称,名称里面是双方都具备的代码 注意一下:如果加括号代码 */ /*.center { position: absolute; left: 50%; top: 50%; tran
贵哥的编程之路
2020/10/28
2790
LESS第三课
Sass初体验
企业开发中推荐使用 .scss 结尾,注意点:如果需要使用考拉编译 sass 文件,项目目录结构中(包含文件名)不能出现中文和特殊字符,就拿着之前在 less 文章当中的一个示例,一个父子结构的 div 元素,用 less 文件的方式设置它们的样式现在换成用 sass 来进行编写代码如下,首先来看以 .sass 后缀结尾的方式:
程序员NEO
2023/09/29
1760
Sass初体验
九、less
less是一门css的预处理语言, less是一个css的增强版,通过less可以编写更少的代码实现更强大的样式 - 在less中添加了许多的新特性:像对变量的支持、对mixin的支持... ... - less的语法大体上和css语法一致,但是less中增添了许多对css的扩展, 所以浏览器无法直接执行less代码,要执行必须向将less转换为css,然后再由浏览器执行
小海怪的互联网
2021/11/24
3470
less中带参数混合
首先我来通过一个小小的示例来引出这个带参数的混合,如下代码有两个 div 一个为 box1、另一个为 box2 接下来我利用 less 代码分别为这两个元素设置宽度高度与背景颜色,如下
程序员NEO
2023/09/29
2840
less中带参数混合
Less学习笔记
视频教程地址:http://www.imooc.com/learn/102 一、什么是Less     css的Less好比是js的Jquery,可以让人们更方遍快捷的使用css,使css代码更简洁,可以减少重复的代码,减少开发人员的工作量。   Less CSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。    Less中文手册:less.bootcss.com 二、编译工具   1.Koala
阿炬
2018/05/11
5470
LESS学习笔记 —— 入门
今天在网上完成了LESS的基础学习,下面是我的学习笔记。总共有三个文件:index.html、main.less、mian.css,其中 mian.css 是 main.less 经过Koala编译之后自动生成的。下面是代码:
他叫自己MR.张
2019/07/01
4240
css中float
注意点: 1.浮动流中没有居中对齐, 也就是没有center这个取值 2.在浮动流中是不可以使用margin: 0 auto;
贵哥的编程之路
2020/10/28
1K0
SASS第三篇 变量
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /* 1.SASS中的变量 SASS中的变量和LESS中一样, 只是定义格式不同 LESS中定义变量 @变量名称: 值; SASS中定义办理 $变量名称: 值; */ /* 2.SASS中变量特点 SASS中变量特点和LESS中几乎一
贵哥的编程之路
2020/10/28
3040
Sass中的层级结构
SASS 中的层级结构,和 LESS 一样支持嵌套,默认情况下嵌套的结构会转换成后代选择器,和 LESS 一样也支持通过 & 符号不转换成后代选择器
程序员NEO
2023/09/29
2350
Sass中的层级结构
2小时-带你实现-360官网-主题换肤功能
然后要注意的事,重点吸收的部分是less,原生的css变量 只是作为一个了解即可。
万少
2025/02/11
730
2小时-带你实现-360官网-主题换肤功能
测试开发进阶(十二)
![鼠标放上去之后](../../../Library/Application Support/typora-user-images/image-20190830211642177.png)
zx钟
2019/09/03
5410
测试开发进阶(十二)
前端面试(4)less,sass,stylus
注意,border 后面必须加上冒号。 在嵌套的代码块内,可以使用&引用父元素。比如 a:hover 伪类,可以写成:
leader755
2022/03/08
1.4K0
CSS预处理器【Less】
less是css预编译语言,和其类似的预编译器还有: sass, stylus等,所谓的预编译,其实是把css这种标记语言按照面向对象(编程语言的方式)进行编写(有变量,函数,判断等操作),但是这种写法浏览器是不能正常识别的,需要我们把其再编译为正常的css代码才可以。
HelloWorldZ
2024/03/20
1000
HTML基础第五课(冲浪笔记5)
transform: translate(200px,200px) rotate(45deg) scale(0.5);
申小兮
2022/11/19
2900
HTML基础第五课(冲浪笔记5)
less中的层级结构
基于 less 初体验 这篇文章,在该文章当中其实已经出现了 less 中的层级结构,我将该代码贴在了下方
程序员NEO
2023/09/29
2520
less中的层级结构
Sass中的可变参数
SASS 中的可变参数和 LESS 中也一样,只不过由于 SASS 不是使用 JS 实现的,所以不能直接在混合中使用 arguments,必须通过 $args... 的格式来定义可变参数,然后通过 $args 来使用,注意点:和 LESS 一样可变参数必须写在形参列表的最后:
程序员NEO
2023/09/29
3130
Sass中的可变参数
相关推荐
SASS第六篇 混合
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档