背景
以往写媒体查询可能是这样的：
.header {
display: flex;
width: 100%;
}
@media (width >= 320px) and (width <= 480px) {
.header {
height: 50px;
}
}
@media (width > 480px) and (width <= 768px) {
.header {
height: 60px;
}
}
@media (width > 768px) and (width <= 1024px) {
.header {
height: 70px;
}
}
@media (width > 1024px) and (width <= 1200) {
.header {
height: 80px;
}
}
@media (width > 1200) {
.header {
height: 100px;
}
}
以上写法可以看到写起来非常不方便，可读性也很差。因此希望用 sass 优化一下写法。
目标
希望可以这样写媒体查询：
.header {
display: flex;
width: 100%;
手机: {
height: 50px;
}
平板: {
height: 60px;
}
...
}
sass 混合功能
sass/scss 快速入门
/* 定义混合函数 */
@mixin flexCenter($jus_c: center, $ali_i: center) {
display: flex;
justify-content: $jus_c;
align-items: $ali_i;
}
/* 使用混合函数 */
.header {
width: 100%;
@include flexCenter(space-between, flex-end);
}
sass if判断和插槽
混合函数中使用 @if判断区分不同设备，@content类似于 vue 插槽接收使用者在方法体中插入的内容。
@mixin respond-to($breakpoint) {
@if $breakpoint == mobile {
@media screen and (width <= 767px) {
@content;
}
} @else if $breakpoint == tablet {
@media screen and (width >= 768px) and (width <= 1023px) {
@content;
}
} @else if $breakpoint == desktop {
@media screen and (width >= 1024px) {
@content;
}
} @else if $breakpoint == wide {
@media screen and (width >= 1200px) {
@content;
}
}
}
使用：
.header {
width: 100%;
height: 100vh;
@include respond-to(mobile) {
height: 100px;
}
@include respond-to(tablet) {
height: 200px;
}
...
background-color: rgb(139 133 133);
}
上面代码已经基本达到书写媒体查询的目标。但是 if else 太多了，不好看。还可以用策略模式优化一下。
进阶：sass 定义对象优化代码结构
用 hash 映射优化 if，也就是定义一个对象。sass 中可以定义对象。
注意：sass 中()括号就代表 js 的花括号{}和方括号[]。
以下就是一个对象，这 5 个属性设置 5 个断点，除最后一个大屏外，其他断点属性值为数组。
之前的代码设置了 4 个断点，区别不大。
/* 定义断点对象 */
$breakpoints: (
phone: (320px,480px),
pad: (481px,768px),
notebook: (769px,1024px),
desktop: (1025px,1280px),
tv: 1281px
);
sass 读取对象中的值：
map-get(obj, prop)：获取对象的属性值
sass 判断数据类型：
type-of($var)- 数组类型：list
- 数值类型：number
@mixin respond-to($breakname) {
/* 1. 读取断点对象属性值 */
$bp: map-get($breakpoints, $breakname);
/* 2. 类型判断是否为数组 */
@if type-of($bp) == "list" {
/* 3. 取出数组中的数据 */
$min: nth($bp, 1);
$max: nth($bp, 2);
@media screen and (min-width: $min) and (max-width: $max) {
@content;
}
/* 4. tv 大屏 */
} @else if type-of($bp) == "number" {
@media screen and (min-width: $bp) {
@content;
}
} @else {
@warn "`$breakname` is not a valid breakpoint name.";
}
}
vite 配置全局使用
直接在组件中 @include 使用混合函数，可能会报错：
[vite] Internal server error: [sass] Undefined mixin.
这是因为 minix 需要预编译，在 vite 中配置：
Vite
export default defineConfig({
css: {
preprocessorOptions: {
scss: {
javascriptEnabled: true,
additionalData: `@use "@/styles/minix.scss" as *;`
}
}
}
});
组件中使用：
.header {
width: 100%;
height: 100vh;
@include respond-to(phone) {
height: 100px;
}
@include respond-to(tv) {
height: 200px;
}
background-color: rgb(139 133 133);
}
完整代码
$breakpoints: (
phone: (
320px,
480px
),
pad: (
481px,
768px
),
notebook: (
769px,
1024px
),
desktop: (
1025px,
1280px
),
tv: 1281px
);
@mixin respond-to($breakname) {
/* 1. 读取断点对象属性值 */
$bp: map-get($breakpoints, $breakname);
/* 2. 类型判断是否为数组 */
@if type-of($bp) == "list" {
/* 3. 取出数组中的数据 */
$min: nth($bp, 1);
$max: nth($bp, 2);
@media screen and (min-width: $min) and (max-width: $max) {
@content;
}
/* 4. tv 大屏 */
} @else if type-of($bp) == "number" {
@media screen and (min-width: $bp) {
@content;
}
} @else {
@warn "`$breakname` is not a valid breakpoint name.";
}
}
