From 1bd2c493c9cbe47d10e4ba045d5c4635fd4eccef Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Mon, 29 Mar 2021 11:17:01 +0800
Subject: [PATCH] 批量增加中文注释
---
common/sassMixin.scss | 106 ++++++++++++++++++++++++++++++++---------------------
1 files changed, 64 insertions(+), 42 deletions(-)
diff --git a/common/sassMixin.scss b/common/sassMixin.scss
index 888c160..669b3f8 100644
--- a/common/sassMixin.scss
+++ b/common/sassMixin.scss
@@ -3,17 +3,11 @@
* @author Tevin
*/
-/* ---------- transition ---------- */
-@mixin transition($time:0.2s, $rate:ease-in-out) {
- @if ($rate=="ease-in-out-2") {
- $rate: cubic-bezier(0.645, 0.045, 0.355, 1);
- }
- -webkit-transition: all $time $rate;
- -moz-transition: all $time $rate;
- transition: all $time $rate;
-}
-
-/* ---------- clearfix ---------- */
+/**
+ * clearfix - 清除浮动
+ * 示例
+ * @include clearfix;
+ */
@mixin clearfix() {
&:after {
clear: both;
@@ -25,7 +19,14 @@
}
}
-/* ---------- ellipsis ---------- */
+/**
+ * ellipsis - 省略号
+ * 示例
+ * @include ellipsis;
+ * @include ellipsis(100%);
+ * 参数
+ * $width 宽度
+ */
@mixin ellipsis($width:false) {
overflow: hidden;
text-overflow: ellipsis;
@@ -35,29 +36,25 @@
}
}
-/* ---------- prefixer ---------- */
-@mixin prefixer ($property, $value...) {
- -webkit-#{$property}: $value;
- -moz-#{$property}: $value;
- #{$property}: $value;
-}
-
-@mixin prefixer-val ($property, $value) {
- #{$property}: -webkit-#{$value};
- #{$property}: -moz-#{$value};
- #{$property}: #{$value};
-}
-
-/* ---------- position ---------- */
+/**
+ * position 元素定位的简写
+ * 示例
+ * @include position(absolute, 0 0);
+ * @include position(absolute, 0 n n 0, 100);
+ * 参数
+ * $type 定位类型
+ * $values 定位值
+ * $zindex 定位层级
+ */
@mixin position($type, $values:(), $zindex:false) {
position: $type;
- // 1个值：上
+ // 当 1 个值时：上
@if (length($values)==1) {
@if (nth($values, 1) !=n) {
top: nth($values, 1);
}
}
- // 2个值：上、左
+ // 当 2 个值时：上、左
@else if (length($values)==2) {
@if (nth($values, 1) !=n) {
top: nth($values, 1);
@@ -66,7 +63,7 @@
left: nth($values, 2);
}
}
- // 3个值：上、左右、下
+ // 当 3 个值时：上、左右、下
@else if (length($values)==3) {
@if (nth($values, 1) !=n) {
top: nth($values, 1);
@@ -79,7 +76,7 @@
bottom: nth($values, 3);
}
}
- // 4个值：上、左、下、右
+ // 当 4 个值时：上、左、下、右
@else if (length($values)==4) {
@if (nth($values, 1) !=n) {
top: nth($values, 1);
@@ -100,17 +97,24 @@
}
/**
- * ---------- flex ----------
- * @include flexbox();
- * $mode:
+ * flex 适应布局
+ * 示例
+ * @include flexbox(flex, center center);
+ * 参数
+ * $mode 布局类型
* flex / inline
- * $align: <justify-content> <align-items> <align-content>
- * flex-start / flex-end / center / space-between / space-around
- * flex-start / flex-end / center / baseline / stretch
- * flex-start / flex-end / center / space-between / space-around / stretch
- * $flow: <flex-direction> <flex-wrap>
- * row / row-reverse / column / column-reverse
- * nowrap / wrap / wrap-reverse
+ * $align 对齐方式
+ * <justify-content> 主轴对齐方式
+ * flex-start / flex-end / center / space-between / space-around
+ * <align-items> 交叉轴对齐方式
+ * flex-start / flex-end / center / baseline / stretch
+ * <align-content> 多轴对齐方式（把每根轴视为一个单元，指定所有单元的对齐方式）
+ * flex-start / flex-end / center / space-between / space-around / stretch
+ * $flow 排列方式
+ * <flex-direction> 主轴方向
+ * row / row-reverse / column / column-reverse
+ * <flex-wrap> 换行方式
+ * nowrap / wrap / wrap-reverse
*/
@mixin flexbox ($mode:flex, $align:(), $flow:()) {
@if ($mode=="flex") {
@@ -162,7 +166,14 @@
}
}
-/* ---------- keyframes ---------- */
+/**
+ * keyframes - css 动画简写
+ * 示例
+ * @include keyframes(fade-out) {
+ * 0% { opacity: 1 }
+ * 100% { opacity: 0 }
+ * }
+ */
@mixin keyframes($name) {
@-webkit-keyframes #{$name} {
@content;
@@ -175,7 +186,18 @@
}
}
-/* ---------- media ---------- */
+/**
+ * media - 媒体查询简写
+ * 示例
+ * @include media(phone) {
+ * .logo {
+ * display: none;
+ * }
+ * }
+ * 参数
+ * $type 指定媒体类型生效，print、pc、padpro、padmini、phone
+ * $only 是否只在此媒体类型生效
+ */
@mixin media($type, $only:"") {
$title: "";
// 打印媒体
--
Gitblit v1.9.1