混入mixins

sass语法

定义 :@mixins 名称(参数1[: 默认值], 参数2[: 默认值] ......) {

// 样式

}

引用 :@include 名称(参数1, ...);

示例

css 复制代码
// 定义mixin,$color参数设置默认值为red
@mixins scrollbar($color: red, $width) {
    ::-webkit-scrollbar {
        width: $width;
    }
    ::-webkit-scrollbar-thumb {
        background-color: $color;
    }
}

// 引用mixin,并传参
.container {
    @include scrollbar(blue, 12px);
}

其他支持的特性

  • 定义mixin支持参数变量(类似js的可变参数,三个点...)(@mixins 名称(参数名...)
  • 引用mixin支持关键词参数,这样可以打乱参数的顺序(@include 名称(参数名1: 参数值1...))
css 复制代码
// 参数变量
@mixins shadows($shadow...) {
    box-shadow: $shadows;
}
// 参数变量的mixin引用
.container {
    @include shadows(0px 3px 6px #333, 2px 5px 8px #666);
}

// 关键词参数引用mixin,可以打乱参数顺序
.container {
    @include scrollbar($width: 12px, $color: blue);
}

less语法

定义

1,正常已定义的类或id选择器

2,选择器后面接小括号。也可以传参,支持默认值(参数1[: 默认值], 参数2[: 默认值] ......)

引用 :.类名(参数1...);

示例

css 复制代码
// 普通选择器,可以当做mixin被引用
.scrollbar {
    ::-webkit-scrollbar {
        width: 12px;
    }
    ::-webkit-scrollbar-thumb {
        background-color: red;
    }
}

// 带参数和默认值的mixin选择器
.scrollbar2(@color: red, @width) {
    ::-webkit-scrollbar {
        width: @width;
    }
    ::-webkit-scrollbar-thumb {
        background-color: @color;
    }
}


.container {
    width: 100px;
    .scrollbar(); // 引用普通mixins
    .scrollbar2(blue, 12px);  // 引用带参数的mixins,传参
}

其他支持的特性

  • 引用mixins时设置!important(相当于将mixin选择器中的所有属性都设置成!important)
  • 定义mixins时设置mixins守卫(@mixins when( 表达式 ))(mixins守卫与media查询类似,按需加载,并不是if、else按条件执行)
  • mixin定义时赋值给一个变量,将变量作为别名;整个mixin调用可以使用别名称为变量调用(通过@alias属性名、属性值通过点来调用)
css 复制代码
// 普通选择器,可以当做mixin被引用
.scrollbar {
    ::-webkit-scrollbar {
        width: 12px;
    }
}

// 引用mixins使用important
.container {
    .scrollbar() !important;
}


// mixins守卫
@width: 10;
.scrollbar when(@width < 10) {
    // ...
}
.scrollbar when(@width > 10) {
    // ...
}

// 赋值变量做别名
@scroll: .scrollbar();
// 引用别名的mixin
.container {
    @scroll;
}

// mixin变量调用
#main() {
    .scrollbar() {
        ::-webkit-scrollbar {
            width: 12px;
        }
    }
}
.container {
    @alias: #main.scrollbar();
}
相关推荐
小小小小小惠1 分钟前
Responsetype blob会把接口接收的二进制文件转换成blob格式
前端·javascript
爱电摇的小码农1 分钟前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss
kymjs张涛27 分钟前
零一开源|前沿技术周报 #7
android·前端·ios
爱编程的喵32 分钟前
React入门实战:从静态渲染到动态状态管理
前端·javascript
Tttian62244 分钟前
npm init vue@latestnpm error code ETIMEDOUT
前端·vue.js·npm
患得患失9491 小时前
【前端】【组件库开发】【原理】【无框架开发】现代网页弹窗开发指南:从基础到优化
前端
运维咖啡吧1 小时前
给朋友们分享个好消息 7天时间23.5k
前端·程序员·ai编程
一只毛驴1 小时前
面试:SASS/LESS/SCSS区别
css
chao_7891 小时前
CSS表达式——下篇【selenium】
css·python·selenium·算法
元气小嘉1 小时前
前端技术小结
开发语言·前端·javascript·vue.js·人工智能