Related uses of css preprocessor

Related uses of css preprocessor

Sass preprocessor related syntax and usage tips

1. Variables

Define variables: $变量: 属性值;Define variables
using variables:$变量

$bone_fish_color: #dcdfe6;

/* 使用 */
color: $bone_fish_color;

2. Inherit @extend

Usage scenario: Inherit the code of another selector.
Usage:@extend(.|#)需要继承代码的选择器

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

3. Reuse code block mixins

Usage scenarios: The same piece of code needs to be reused, and only part of the code is different, mixin
usage can be used:

1. Define @mixin method
2. Use @include to call the method defined above.

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. &The identifier of the parent selector;

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

Some commonly used methods in scss

Compatible with IE transparency writing method

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

Modify input placeholder color

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

Multi-line text exceeds display ellipses

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

Ellipses appear when text exceeds one line

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