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 の
使用法を使用できます。

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

入力プレースホルダーの色を変更する

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

テキストが 1 行を超える場合は省略記号が表示されます

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