Use less and sASS

Less Framework Application

1 the reuse

The @ prefix can be reused

@mycolor: red;
@width  : 200px;
@hight  : 200px;
Copy the code
.box2 {
    width           : @width ;
    height          : @hight ;
    background-color: @mycolor;
    @font-size      : 20px;
    font-size       : @font-size;
}
​
Copy the code

2 Local use: Local use can only be used in curly braces

.box2 {
    width           : @width ;
    height          : @hight ;
    background-color: @mycolor;
    @font-size      : 20px;
    font-size       : @font-size;
}
Copy the code

Three nested

.box3 { width : @width; height: @hight; div { width : 100px; height : 100px; background-color: pink; } a { text-decoration: none; }}Copy the code

3Mixins mixed with technology

.border{
   border: 3px solid;
}
.box4{
    width : @width;
    height: @hight;
    .border
}
Copy the code
.li(@radius,@padding,@sie,@color:pink){
    border-radius: @radius;
    padding: @padding;
    font-size: @sie;
    color: @color;
}
.box5{
    width : @width;
    height: @hight;
    background-color: @mycolor;
    .li(100%,20px,100px)
}
Copy the code

You can compute numbers you can add, subtract, multiply, divide and divide and you have to put parentheses and Spaces for the minus sign

.box6{
    width : (@width/2);
    height: @hight;
    background-color: @mycolor;
}
Copy the code

Differences between SCSS and LESS

The variable symbol is $

When mixed in, import with @minxin and @incluble

@mixin border { border-radius: 20%; } @include border {@include border; }Copy the code

The inherited classes use @extend

.box{
    height:$width ;
    width:$height ;
    background-color: red;
}
.box2{
    @extend.box;
}
Copy the code

Placeholders with % less are different from CSS

1: Comments are different

2: can be nested, nested according to the DOM mechanism

3: can perform operations, only numerical values

4: Variables can be defined as local and global variables

5: Minxins mixed, declaration style block directly into the application can be used for parameter transfer

Responsive layout

For different screens display different effects, with the same set of code for different terminals

Media queries

Which screen to adapt to through media query

How to define:

1. Use the @media keyword to define the media

2. Define the width

Min-width Minimum screen width

@media(max-width:600px) {.box2 {width: 400px; height: 400px; background-color: rgb(226, 17, 17); }}Copy the code

Max-width Indicates the maximum screen width

@media(min-width:600px) {.box2{height: 200px; / / @media(min-width:600px) {.box2{height: 200px; width: 200px; background-color: rgb(150, 127, 255)}; } * /Copy the code

3. Link with and when given a range

/* @media(min-width:601px) and (max-width:1000px){.box2{width: 500px; height: 500px; background-color: black; }}Copy the code

Development mode:

Progressive enhancement, graceful degradation

Incremental enhancements: New features, new missions, new gameplay

Elegant downgrading: Special enterprises to ensure safety, etc., have kept the low version

Business hooks, user groups

The approach to development depends on the type of project and the group it is targeting, and different projects have different approaches to development

Browser compatibility

The so-called browser compatibility problem refers to the situation where different browsers parse the same code differently, causing the actual effect of the page to disagree.

This is the root cause of compatibility problems caused by browser kernel differences

Browser layout engine

IE Trident, edgehtml
Chrome Its, blink
Firefox gecko
Safari webkit
Opera presto

The mode in which a browser works is often called render mode

On March 19, 2009, Microsoft released the IE8 to redefine the standard mode, again enhanced the support of the specification, at the same time in order to maintain the support of IE7, IE8 increased the quasi-standard mode, so IE8 nine into the standard mode, quasi-standard mode, mixed mode

Csshack has three implementations

1: hacks inside CSS classes

2: CSS selector hacks

3: HTML header hack

Lte: less than or equal to means less than or equal to

Lt: Lessthan

Gte: greater than or equal to greater than or equal to

Gt: great than greater than

! : is not equal to

Browser Vendor prefix

Firefox – moz –

European friends. – o –

Microsoft – ms –

Apple – WebKit – Use of markup characters

1: use in HTML

& add character;

<p>&#9639; </p>Copy the code

2: used in the CSS

Use the pseudo-element selector

< h1 > tag < / h1 >Copy the code
h1::after {
    content: "\2122";
}
Copy the code

Use of text shadows

text-shadow

<h2>text shadow</h2>
Copy the code
H2 {/* horizontal vertical blur */ text-shadow: 10px 10px 10px coral; }Copy the code

Use of box shadows

box-shadow

<div class="box2"></div>
Copy the code
.box2 {
    width: 10px;
    height: 10px;
    background-color: cornflowerblue;
    box-shadow: 10px 10px 10px cornflowerblue;
}
Copy the code

Use of the text-overflow property

How will text overflow content be displayed

text-overflow: clip;

text-overflow: ellipsis

The display continues on the same line without newlines

white-space: nowrap

<div class="box3">werwerwerwerwerwer</div>
Copy the code
.box3 {/* How to display text overflow contents */ text-overflow: clip; /* text-overflow: ellipsis; */ /* Continue on the same line without newlines */ white-space: nowrap; /* hidden */ overflow: hidden; width: 100px; height: 100px; border: 1px black solid; }Copy the code

word-wrap: break-word; Properties using

A word or sentence is too long to fit in a box

<div class="box4">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line</div>
Copy the code
.box4 {
    height: 200px;
    width: 200px;
    border: solid black 1px;
    word-wrap: break-word;
}
Copy the code

Pseudo-class selectors are used in combination

<section>
        <span class="type">1</span>
        <span>2</span>
        <span>3</span>
        <span class="type">4</span>
        <span>5</span>
        <span class="type">6</span>
​
    </section>
Copy the code
span:nth-child(even):not(.type) {
    color: blue;
}
Copy the code

Display: None and visibility: hidden

Display: None Hides the box and has no position

Visibility: Hidden box but location

<article> <h2>1</h2> <! "> < p style="display: none; >2</h2> <h2>3</h2> <! < p style="visibility: hidden;" >4</h2> </article>Copy the code

Transform: rotate and transform: translate

Transform: rotate: Angle rotation

The Angle moves

 <h3 class="one"></h3>
    <h3 class="two"></h3>
Copy the code
.one {
    background-color: blue;
    width: 200px;
    height: 100px;
    /* 角度旋转 */
    transform: rotate(90deg);
}
​
.two {
    width: 200px;
    height: 100px;
    background-color: brown;
    /* 角度移动 */
    transform: translate(50px, 50px);
}
Copy the code

Create the animation

1:@keyframes + name {from start, to end}

2: Bind the box to animation: Flash input time (5s) infinite

<div class="box5"></div>
Copy the code
.box5 { width: 500px; height: 50px; background-color: brown; /* Need to bind animation */ animation: flash 5s; }Copy the code
@frames flash {/* start */ from {background-color: frames; } /* end */ to {background-color: cornflowerblue; }}Copy the code

Create moving animations with percentages

You need a position: position

.box6 {
    width: 300px;
    height: 300px;
    background-color: cyan;
    position: absolute;
    animation: run 1s infinite;
}
Copy the code
@keyframes run { 0% { background-color: darkblue; left: 0; top: 0; } 20% { background-color: darkkhaki; left: 300px; top: 100px; } 50% { background-color: rgb(87, 23, 204); left: 100px; top: 10px; } 80% { background-color: darkkhaki; left: 500px; top: 20px; } 100% { background-color: rgb(231, 60, 140); left: 0px; top: 0px; }}Copy the code

Site icon reference

1: Go to the font-awesome website and find the desired icon to import the link into the HTML

2: BootcDN website contains font-awesome 4.70, introduces the suffix min.css link