css 预处理器的相关使用

css 预处理器的相关使用

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

1. 变量

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

$bone_fish_color: #dcdfe6;

/* 使用 */
color: $bone_fish_color;

2. 继承 @extend

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

.class {
    
    
  border: 1px solid #f00;
}
.class1 {
    
    
  @extend.class;
  font-size: 12px;
}

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);
}

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

article a {
    
    
  color: blue;
  &:hover {
    
    
    color: red;
  }
}

scss 一些常用的方法

兼容 IE 透明度写法

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

修改 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;
  }
}

多行文字超出显示省略号

@mixin ellipsisMultiline($number: 1) {
    
    
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  word-break: break-all;
  text-overflow: ellipsis;
  -webkit-line-clamp: $number;
}

文字一行超出显示省略号

%ellipsis {
    
    
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}