css 预处理器的相关使用

css 预处理器的相关使用

sass 预处理器相关语法及使用技巧

1. 变量

定义变量：$变量: 属性值; 的方式定义变量
使用变量：$变量

$bone_fish_color: #dcdfe6;

/* 使用 */
color: $bone_fish_color;
1
2
3
4

2. 继承 @extend

使用场景: 继承另一个选择器的代码.
使用方式: @extend(.|#)需要继承代码的选择器

.class {
  border: 1px solid #f00;
}
.class1 {
  @extend.class;
  font-size: 12px;
}
1
2
3
4
5
6
7

3. 重用代码块 mixin

使用场景: 同一块代码需要重复使用,只有部分代码不同可以使用 mixin
使用方式:

1. 定义 @mixin 方法
2. 使用 @include 调用 上面定义的方法.

mixin 可以当作一个方法,传入不同的参数

@mixin randomAttr($attr, $value: 1s) {
  -webkit-#{$attr}: $value;
  -moz-#{$attr}: $value;
  -ms-#{$attr}: $value;
  -o-#{$attr}: $value;
  #{$attr}: $value;
}
div {
  @include randomAttr(animation);
}
1
2
3
4
5
6
7
8
9
10

4. & 父选择器的标识符;

article a {
  color: blue;
  &:hover {
    color: red;
  }
}
1
2
3
4
5
6

scss 一些常用的方法

兼容 IE 透明度写法

@mixin opacity($number: 0.5) {
  opacity: $number;
  filter: alpha(opacity=#{$number * 100});
}
1
2
3
4

修改 input placeholder 颜色

@mixin placeholderColor($color: #fff) {
  &::-webkit-input-placeholder {
    color: $color;
  }

  &::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: $color;
  }

  &:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: $color;
  }

  &:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: $color;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

多行文字超出显示省略号

@mixin ellipsisMultiline($number: 1) {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  word-break: break-all;
  text-overflow: ellipsis;
  -webkit-line-clamp: $number;
}
1
2
3
4
5
6
7
8

文字一行超出显示省略号

%ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
1
2
3
4
5