Разработайте свой собственный CSS-фреймворк (1)

внешний интерфейс JavaScript Parcel CSS

В этой серии вам предстоит инкапсулировать чистый фреймворк CSS и изучить синтаксис SASS с нуля.

репозиторий кода нажмите на меня, чтобы отправить

Из-за простоты сильная зависимость от собственного Javascript не подходит для виртуального DOM (например, React, Vue, Angular), а использование виртуального DOM не подходит для собственного программирования Javascript (JQuery). Никакой код не является лучшим кодом, развертывайте где угодно, запускайте где угодно.

Скажу ли я, что меня зовут IE?

Глядя на это выражение, стал бы я вам лгать?

нож для сушки

Сначала нужно подготовить эскизный проект, что? вы не?

Прежде всего, вам нужно выбрать несколько основных цветов для пользовательского интерфейса, который на самом деле является ядром. После того, как вы измените некоторые основные цвета, вы обнаружите, что рамка совершенно другая.

Создайте среду разработки

Инициализируйте проект Nodejs, установите инструмент для упаковки пакетов и позвольте пакету обрабатывать для нас компилируемые файлы. Он прост в использовании и чрезвычайно быстр. Parcel — находка для небольших и микропроектов.

mkdir NicoUI && cd NicoUI
npm init -y
npm i parcel-bundler -D

Создать стартовый файл

touch index.html index.sass

Введите файл index.sass в index.html, мы используем sass для разработки и, наконец, скомпилируем его в css. Я перерыл много фронтенд-проектов на github, большинство из них sass, хотя автор лично использует стилус, но для того, чтобы в компании все могли лучше кооперироваться, здесь используется sass-синтаксис.

Создайте src/vars/_color.sass, чтобы определить цветовые переменные и импортировать их в index.sass.

@import './src/vars/_color.sass'

Красивые цвета, как радуга. Переменные sass начинаются с $, назначение такое же, как и в css, а следующий !default означает, что его можно переопределить.

Добавьте стиль сброса, чтобы обеспечить единообразие стиля по умолчанию для всех браузеров.Самую краткую версию можно найти на странице https://github.com/jgthms/minireset.css. Скопируйте внутри файл sass, сохраните его в каталоге src и импортируйте в index.sass.

инициализация

Инициализация глобальных стилей, таких как базовая высота строки, размер текста, стиль шрифта и т. д. Создайте новый файл src/initinal.sass и импортируйте его в index.sass.

html задает цвет фона и размер шрифта, body задает размер шрифта равным 1rem, rem представляет размер em на основе корня, а 1rem — это размер $body-size, равный 16px.

$body-background-color: #fff !default
$body-size: 16px !default
$body-color: $dark !default
$line-height: 1.6 !default
$font: BlinkMacSystemFont, -apple-system !default

html
  background: $body-background-color
  font-size: $body-size
  min-width: 375px

body
  font-size: 1rem
  color: $body-color
  font-family: $font
  line-height: $line-height

a
  color: $blue
  text-decoration: none
  &:hover
    color: $deep-blue

.meta
  color: $gray
  font-size: .8rem

кнопка

Новый src/button.sass, для начала задайте базовый стиль кнопок, стиль можно использовать как кнопку или метку, мы хотим метку, мышь это маленькая рука, а не кнопка. Вы можете ссылаться на предыдущий уровень и селектор, а если & нравится на задней панели, как строку, через # {} обернутую.

.btn
	a#{&}

будет скомпилирован в

.btn a.btn

а также

.btn
	@at-root a#{&}

будет скомпилирован в

a.btn

По дизайну добавляем рамку и цвет, и добавляем углубление цвета при наведении, затемнение это встроенная функция sass, первый параметр это цвет, а второй параметр процент углубления.

.btn
  color: $gray
  border: 1px solid $light
  outline: none
  padding: .5rem 1rem
  cursor: default
  border-radius: 4px
  font-size: .8rem
  display: inline-block
  
  &.block
    display: block
    
  @at-root a#{&}
    cursor: pointer

  &:hover
    color: darken($gray, 20%)
    border: 1px solid darken($light, 5%)

  &.large
    font-size: .9rem
    padding: .7rem 1.2rem
  &.small
    font-size: .7rem
    padding: .3rem .7rem

  &.text
    border: none

Затем мы добавим цвет к кнопке, так что давайте напишем его сейчас.

.btn
  &.green
    color: #fff
    background: $green
    border-color: $green
    &:hover
      background: darken($green, 4%)
    &.outline
      color: $green
      background: transparent
      border-color: $green
      transition: background .2s
      &:hover
        background: $green
        color: #fff

После написания мы завершаем все цвета через цикл $colors — это словарь, пара ключ-значение, которую можно понимать как объект в JavaScript. Пройдитесь по словарю через @each, получите ключ и значение и установите соответствующее значение.

$colors: ('green': $green, 'blue': $blue, 'yellow': $yellow, 'red': $red)
.btn
  @each $name, $color in $colors
    &.#{$name}
      color: #fff
      background: $color
      border-color: $color
      &:hover
        background: darken($color, 4%)
      &.outline
        color: $color
        background: transparent
        border-color: $color
        transition: background .2s
        &:hover
          background: $color
          color: #fff

Добавьте несколько узлов, соответствующих классу в html, и посмотрите на эффект.

Примечание. Весь высококачественный контент выпускается одновременно во всей сети, включая Jianshu, Zhihu, Nuggets, Big Fish, WeChat, Nuggets и т. д.

Отсканируйте QR-код ниже, обратите внимание на общедоступную учетную запись WeChat и получите серию высококачественных небольших курсов по интерфейсу бесплатно каждую неделю, которые обновляются каждую неделю, чего вы ждете? Обратите внимание сейчас.

Категории