frontend:scss

差别

这里会显示出您选择的修订版和当前版本之间的差别。

到此差别页面的链接

--- frontend:scss [2016/09/09 09:46] – 创建 memory
+++ frontend:scss [2023/12/03 10:24] (当前版本) – 外部编辑 127.0.0.1
@@ 行 1: / 行 1: @@
 ====== SCSS / SASS ======
+{{tag>frontend css}}
 ===== Tricks =====
@@ 行 24: / 行 26: @@
     }
   }
+}
+</code>
+==== AutoPrefix ====
+以下是为一些不会被[[https://github.com/postcss/autoprefixer|autoprefixer]]覆盖的CSS属性[(cite:>[[https://github.com/postcss/autoprefixer/issues/167|不是web标准属性，不会被autoprefix]])]自动添加浏览器前缀的mixin：
+<code css _prefix.scss>
+/* autoprefixer will not auto prefix user-select */
+@mixin user-select($select) {
+  -webkit-user-select: $select;
+  -moz-user-select: $select;
+  -ms-user-select: $select; /* IE10+ */
+  user-select: $select;
+}
+@mixin placeholder($color) {
+  /* Firefox */
+  &::-moz-placeholder {
+    color: $color;
+    opacity: 1; /* Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526 */
+  }
+  &:-ms-input-placeholder { color: $color; } /* Internet Explorer 10+ */
+  &::-webkit-input-placeholder  { color: $color; } /* Safari and Chrome */
+}
+</code>
+==== CSS实现折行 ====
+From [[https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/mixins/_text-overflow.scss|Bootstrap sass]]
+<code css text-overflow.scss>
+/*
+ * Text overflow
+ * Requires inline-block or block for proper styling
+ */
+@mixin text-overflow() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 </code>

frontend/scss.1473385613.txt.gz · 最后更改: 2023/12/03 10:24 (外部编辑)