✋5 параграфов справки для начинающего фронтенда 🚀код css (scss mixin)

CSS

Инкапсулирован в миксин для повторного использования

При написании 🔥css используется множество стилей.Очень распространенный, но громоздкий для записи, Хотя существует много зрелых фреймворков пользовательского интерфейса, у нас не может быть ни одного 🐰простая страница активностиТакже ввести такую ​​большую рамку, не так ли?

На работе я также сохранил много часто используемых CSS, я инкапсулировал их какmixin, я выбрал ✋5, чтобы поделиться с вами, надеюсь, вам понравится.

Быть квалифицированным инженером "CV", "копировать/вставить" шаттл

undefined

переполнение показывает многоточие

Параметры могут быть только одной/несколькими строками.

/**
* 溢出省略号
* @param {Number} 行数
*/
@mixin ellipsis($rowCount: 1) {
  @if $rowCount <=1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  } @else {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $rowCount;
    -webkit-box-orient: vertical;
  }
}

Истинная граница .1px

Из-за проблемы с соотношением плотности пикселей на мобильной стороне фактическая граница в 1 пиксель выглядит толще. Если вы хотите быть более «тонкой», вы можете использовать следующий код.Совместимость с устройствами с разным соотношением плотности пикселей (ПК/мобильный телефон) и поддержка любого количества закругленных углов..

/**
* 真.1px边框
* {List}: 多个方向边框, 默认值为bottom, 你可以根据需要传入(top, left, bottom, right) 4个方向;
* {Color} 边框的颜色, 默认#ccc;
* {List} 4个圆角半径, 默认0;
* {String} 一个高级设置, 一般都不需要改动, 由于细边框的实现使用了css的伪类, 所以为了规避可能出现的样式冲突, 我们可以自己指定使用:after还是:before, 默认after;
*/
@mixin thinBorder(
  $directionMaps: bottom,
  $color: #ccc,
  $radius: (
    0,
    0,
    0,
    0
  ),
  $position: after
) {
  // 是否只有一个方向
  $isOnlyOneDir: string==type-of($directionMaps);

  @if ($isOnlyOneDir) {
    $directionMaps: ($directionMaps);
  }

  @each $directionMap in $directionMaps {
    border-#{$directionMap}: 1px solid $color;
  }

  // 判断圆角是list还是number
  @if (list==type-of($radius)) {
    border-radius: nth($radius, 1)
      nth($radius, 2)
      nth($radius, 3)
      nth($radius, 4);
  } @else {
    border-radius: $radius;
  }

  @media only screen and (-webkit-min-device-pixel-ratio: 2) {
    & {
      position: relative;

      // 删除1像素密度比下的边框
      @each $directionMap in $directionMaps {
        border-#{$directionMap}: none;
      }
    }

    &:#{$position} {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 200%;
      height: 200%;
      transform: scale(0.5);
      box-sizing: border-box;
      padding: 1px;
      transform-origin: 0 0;
      pointer-events: none;
      border: 0 solid $color;

      @each $directionMap in $directionMaps {
        border-#{$directionMap}-width: 1px;
      }

      // 判断圆角是list还是number
      @if (list==type-of($radius)) {
        border-radius: nth($radius, 1) *
          2
          nth($radius, 2) *
          2
          nth($radius, 3) *
          2
          nth($radius, 4) *
          2;
      } @else {
        border-radius: $radius * 2;
      }
    }
  }

  @media only screen and (-webkit-min-device-pixel-ratio: 3) {
    &:#{$position} {
      // 判断圆角是list还是number
      @if (list==type-of($radius)) {
        border-radius: nth($radius, 1) *
          3
          nth($radius, 2) *
          3
          nth($radius, 3) *
          3
          nth($radius, 4) *
          3;
      } @else {
        border-radius: $radius * 3;
      }

      width: 300%;
      height: 300%;
      transform: scale(0.3333);
    }
  }
}

Равносторонний треугольник

Он часто используется в качестве указателя направления в раскрывающемся меню. Если страница, которую вы создаете, представляет собой простую страницу действий, вводить такой пользовательский интерфейс, как «Eleme», немного излишне. С помощью «треугольника» вы можно сделать простой самому.

/**
* 等边三角形
* @param {String} 尺寸
* @param {Color} 颜色
* @param {String} 方向
*/
@mixin triangle($size: 5px, $color: rgba(0, 0, 0, 0.6), $dir: bottom) {
  width: 0;
  height: 0;
  border-style: solid;

  @if (bottom==$dir) {
    border-width: $size $size 0 $size;
    border-color: $color transparent transparent transparent;
  } @else if (top==$dir) {
    border-width: 0 $size $size $size;
    border-color: transparent transparent $color transparent;
  } @else if (right==$dir) {
    border-width: $size 0 $size $size;
    border-color: transparent transparent transparent $color;
  } @else if (left==$dir) {
    border-width: $size $size $size 0;
    border-color: transparent $color transparent transparent;
  }
}

loading

undefinedЭто вращающаяся загрузка «полукруглая граница», вы можете указать радиус круга в соответствии с потребностями вашего бизнеса.

@mixin loading-half-circle($width: 1em) {
  display: inline-block;
  height: $width;
  width: $width;
  border-radius: $width;
  border-style: solid;
  border-width: $width/10;
  border-color: transparent currentColor transparent transparent;
  animation: rotate 0.6s linear infinite;
  vertical-align: middle;
}

шахматная доска

Если вы пользуетесь некоторыми инструментами для создания интерфейсов (например, Yiqixiu), вы будете использовать файлы .

1.png

/**
* 棋盘背景
* @param {Color} 背景色
*/
@mixin bgChessboard($color: #aaa) {
  background-image: linear-gradient(
      45deg,
      $color 25%,
      transparent 25%,
      transparent 75%,
      $color 75%,
      $color
    ),
    linear-gradient(
      45deg,
      $color 26%,
      transparent 26%,
      transparent 74%,
      $color 74%,
      $color
    );
  background-size: 10vw 10vw;
  background-position: 0 0, 5vw 5vw;
}

Суммировать

Я разместил приведенный выше код на github, исходный код:GitHub.com/easy86/5ah, В это время…

Я так много обобщил. Надеюсь, это будет полезно для всех. Написание может быть не исчерпывающим, и я дам вам подсказку. Пожалуйста, потерпите меня и спасибо за чтение.

Братцы, 🚆Начинающий фронтенд не паникуйте!Я дам вам ✊10 спасительных соломинок🍃

nuggets.capable/post/684490…

🚀 курсы машинописного цикла

Если вы заинтересованы в ts, добро пожаловать в мой базовый учебник по ts.

Первый урок, опыт машинописи

Урок 2, Основные типы и вводные расширенные типы

Урок 3, Общие сведения

Урок 4. Интерпретация расширенных типов

Урок 5. Что такое пространство имен

Специальная статья, изучайте машинопись в исходном коде vue3🔥🦕 - "есть"

Урок 6, что такое файл декларации? 🦕 - Глобальная декларация

Группа WeChat

Спасибо за чтение, если у вас есть какие-либо вопросы, вы можете добавить меня в WeChat, я приглашу васГруппа WeChat(Из-за ограничения Tencent на 100 участников в группах WeChat после того, как более 100 участников должны быть привлечены участниками группы)

Категории