This is a series that takes you to encapsulate a pure CSS framework and learn SASS syntax from scratch.

Code repository points I transfer

Because of its simplicity, relying heavily on native Javascript is not friendly to the virtual DOM (React, Vue, Angular) and using the virtual DOM is not friendly to programming with native Javascript (JQuery). No code is the best code, deployed anywhere, running anywhere.

Will I tell you my name is IE?

Would I lie to you?

Copy the knife open

First you have to prepare a design. What? You don’t have?

The first step is to choose some basic colors for the UI, which is really the core. When you change some of the basic color schemes, you will find that the frame is completely different.

Setting up the development environment

Initialize a Nodejs project, install parcel packaging, and have Parcel handle your compilable files for you. It’s so easy and fast to use that Parcel is a miracle for small projects.

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

Create start file

touch index.html index.sass
Copy the code

In index.html, we introduced the index.sass file, which we developed using Sass and eventually compiled into CSS. I searched a large circle of Github front-end projects, most of which are SASS. Although the author personally uses Stylus, SASS syntax is used here for better cooperation in the company.

Create SRC /vars/_color.sass to define the color variables and import them in index.sass

@import './src/vars/_color.sass'
Copy the code

Beautiful colors, like a rainbow. Sass variables start with $and are assigned the same value as CSS. Default means it is overwritable.

Add a reset style, to ensure the consistency of all browsers default styles, can be found on https://github.com/jgthms/minireset.css the most concise one version. Copy the sass file, save it to SRC, and import it to index.sass.

Initialize the

Initialization of global styles, such as base line height, text size, font style, etc. Create a new SRC /initinal.sass file and import itin index.sass.

HTML set the background color and font size, body set the font size to 1rem, REM represents the root based EM size, and 1rem represents the $body-size (16px) size.

$body-background-color: #fff ! default $body-size: 16px ! default $body-color: $dark ! The 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: .8remCopy the code

button

Create a new SRC /button.sass. First set the basic style of the button, because the style can be used by button or a tag, we want a tag, mouse is a hand, button is not. The ampersand can refer to the selector at the next level, but if you want to place it after it, as a string, it is wrapped in #{}.

.btn
	a# {and}
Copy the code

Will be compiled into

.btn a.btn
Copy the code

while

.btn
	@at-root a# {and}
Copy the code

Will be compiled into

a.btn
Copy the code

According to the design, we add the border and color, as well as the color deepening of hover. Darken is a built-in function of SASS. The first parameter is the color, and the second parameter is the percentage of deepening.

.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# {and}
    cursor: pointer

  &:hover
    color: darken($gray, 20%)
    border: 1px solid darken($lightLarge font size:.9REM padding:.7rem 1.2rem &. Small font size:.7REM PADDING:.3rem.7rem &. Text border: NoneCopy the code

And then we’re going to add color to the button, so let’s write one.

.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
Copy the code

Once we’ve done that, we’re going through a loop to complete all the colors. $colors is a dictionary, a key-value pair, and can be understood as an object in JavaScript. Walk through the dictionary at @each, get the key and value, and set the corresponding values.

$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
Copy the code

Add some nodes to the HTML corresponding to the class and see what happens.

Note: all high quality content will be released at the same time, including Jianshu, Zhihu, Nuggets, Big Fish, Wechat, nuggets, etc.

Scan the following QR code, pay attention to wechat public number, free access to boutique front-end small lessons serialized every week, weekly update, what are you waiting for? Pay attention.