小洛的前端技术博客Appearance
Sass中mixin的写法
Mixin允许重用CSS代码块，可以通过@include来调用，还可以带参数，特别是当用户需要灵活调整时。比如颜色、内边距这些参数，当然还有@content等写法
基本语法
scss
// 定义一个 mixin
@mixin 名称 {
// CSS 属性
color: red;
font-weight: bold;
}
// 使用 mixin
.class-name {
@include 名称;
}// 定义一个 mixin
@mixin 名称 {
// CSS 属性
color: red;
font-weight: bold;
}
// 使用 mixin
.class-name {
@include 名称;
}示例
scss
@mixin center {
display: flex;
justify-content: center;
align-items: center;
}
.container {
@include center;
}@mixin center {
display: flex;
justify-content: center;
align-items: center;
}
.container {
@include center;
}可带参数
scss
// 定义带参数的 mixin
@mixin 参数名1, 参数名2... {
// 可以使用参数
}
// 使用时传递值
@include 名称(值1, 值2...);// 定义带参数的 mixin
@mixin 参数名1, 参数名2... {
// 可以使用参数
}
// 使用时传递值
@include 名称(值1, 值2...);示例
scss
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
border-radius: $radius;
}
.box {
@include border-radius(10px);
}@mixin border-radius($radius) {
-webkit-border-radius: $radius;
border-radius: $radius;
}
.box {
@include border-radius(10px);
}常用的写法
垂直水平居中
scss
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
// 使用
.container {
@include flex-center;
}@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
// 使用
.container {
@include flex-center;
}绝对居中
scss
@mixin absolute-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
// 使用
.box {
@include absolute-center;
}@mixin absolute-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
// 使用
.box {
@include absolute-center;
}占位符样式
scss
@mixin placeholder {
&::-webkit-input-placeholder {
@content;
}
&:-moz-placeholder {
@content;
}
&::-moz-placeholder {
@content;
}
&:-ms-input-placeholder {
@content;
}
}
// 使用
input[type="text"] {
@include placeholder {
color: #999;
font-style: italic;
}
}@mixin placeholder {
&::-webkit-input-placeholder {
@content;
}
&:-moz-placeholder {
@content;
}
&::-moz-placeholder {
@content;
}
&:-ms-input-placeholder {
@content;
}
}
// 使用
input[type="text"] {
@include placeholder {
color: #999;
font-style: italic;
}
}三角形图标
scss
@mixin triangle($size, $color, $direction: top) {
width: 0;
height: 0;
border: $size solid transparent;
@if $direction == top {
border-bottom-color: $color;
} @else if $direction == right {
border-left-color: $color;
} @else if $direction == bottom {
border-top-color: $color;
} @else if $direction == left {
border-right-color: $color;
}
}
// 使用
.arrow {
@include triangle(10px, red, right);
}@mixin triangle($size, $color, $direction: top) {
width: 0;
height: 0;
border: $size solid transparent;
@if $direction == top {
border-bottom-color: $color;
} @else if $direction == right {
border-left-color: $color;
} @else if $direction == bottom {
border-top-color: $color;
} @else if $direction == left {
border-right-color: $color;
}
}
// 使用
.arrow {
@include triangle(10px, red, right);
}字体设置
scss
@mixin font($size, $weight: normal, $color: #333) {
font-size: $size;
font-weight: $weight;
color: $color;
}
// 使用
.title {
@include font(24px, bold, #222);
}@mixin font($size, $weight: normal, $color: #333) {
font-size: $size;
font-weight: $weight;
color: $color;
}
// 使用
.title {
@include font(24px, bold, #222);
}单行省略
scss
@mixin ellipsis-single {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
// 使用
.title {
@include ellipsis-single;
width: 200px;
}@mixin ellipsis-single {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
// 使用
.title {
@include ellipsis-single;
width: 200px;
}多行省略
scss
@mixin ellipsis-multi($lines: 2) {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $lines;
overflow: hidden;
}
// 使用
.description {
@include ellipsis-multi(3);
max-height: 60px; // 可选，用于限制高度（按行高计算）
}@mixin ellipsis-multi($lines: 2) {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $lines;
overflow: hidden;
}
// 使用
.description {
@include ellipsis-multi(3);
max-height: 60px; // 可选，用于限制高度（按行高计算）
}