Bootstrap Basics -5 Bootstrap customization (less overview, less syntax)

I. Overview of Less

Less overview

-Dynamic Style language

-Less gives CSS a dynamic language feature

-variables, inheritance, operations, functions

-Less can run on the client

-can also be run on the server with node. js or Rhino

-Variable

-@color: #4D926F;

-h2 {color: @color;}

-Mixed

-. mystyle{}

-h2{. MyStyle}

-Nested rules

-#header {h1{} p{a{}}}

-Functions & Operations

-@color: #aabbcc; #header {color: @color + #111;}

Use less

-Use on client

-Introducing Style Files

<link rel= "stylesheet/less" type= "Text/css" href= "style.less" >

-Add script file

<script src= "Less.js" type= "Text/javascript" ></script>

-Add MIME

-Use on server side

-Install Less

$ NPM Install [email protected]

-Using

$ LESSC style.less > Style.css

Second, less syntax

Variable

-Simple variables

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M01/7E/8F/wKioL1cEtn2wUt03AAArtxmyEZk144.png "title=" Web.png "alt=" Wkiol1cetn2wut03aaartxmyezk144.png "/>

-Define variables with variable names

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/7E/93/wKiom1cEtUDBsa8fAAAglQm2GgA986.png "title=" Web.png "alt=" Wkiom1cetudbsa8faaaglqm2gga986.png "/>

Mixed

-Call another style in one style

-Statement

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/7E/8F/wKioL1cEtMLiYKn9AAAjol1_o_s332.png "title=" Web.png "alt=" Wkiol1cetmliykn9aaajol1_o_s332.png "/>

-Call

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M00/7E/8F/wKioL1cEtajiNU6tAAAXvpEQkl8479.png "title=" Web.png "alt=" Wkiol1cetajinu6taaaxvpeqkl8479.png "/>

Mixed with parameters

-Define a set of attributes with parameters like a function

-Statement

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/7E/93/wKiom1cEuZmyUSwsAAA6ioXVXZI148.png "title=" Web.png "alt=" Wkiom1ceuzmyuswsaaa6ioxvxzi148.png "/>

-Call

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M02/7E/93/wKiom1cEuayj2uj6AAAaDpvCBJE178.png "title=" Web.png "alt=" Wkiom1ceuayj2uj6aaaadpvcbje178.png "/>-@arguments variable

-@arguments contains all the parameters passed in

-Statement

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M00/7E/90/wKioL1cEuqjiAS-zAABYmR5l30g973.png "title=" Web.png "alt=" Wkiol1ceuqjias-zaabymr5l30g973.png "/>

-Call

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/7E/93/wKiom1cEuhOALIjYAAANn_uBVuU617.png "title=" Web.png "alt=" Wkiom1ceuhoalijyaaann_ubvuu617.png "/>

-Pattern Matching

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/7E/93/wKiom1cEuj3Rs7K2AAGLC6UUNbA984.png "title=" Web.png "alt=" Wkiom1ceuj3rs7k2aaglc6uunba984.png "/>

-Boot

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/7E/90/wKioL1cEuwKBrWkvAAE8fnorE7E674.png "title=" Web.png "alt=" Wkiol1ceuwkbrwkvaae8fnore7e674.png "/>

Nesting rules

-Less lets us write cascading styles in a nested way

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M02/7E/93/wKiom1cEuoWBqRS7AADR9FL7l6A707.png "title=" Web.png "alt=" Wkiom1ceuowbqrs7aadr9fl7l6a707.png "/>

Operation

-any number, color, or variable can participate in the operation

-Digital

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/7E/93/wKiom1cEusejHXoDAAByQOxyGiw482.png "title=" Web.png "alt=" Wkiom1ceusejhxodaabyqoxygiw482.png "/>

-Color

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M02/7E/93/wKiom1cEutvTAGL2AACTCF0zk4M210.png "title=" Web.png "alt=" Wkiom1ceutvtagl2aactcf0zk4m210.png "/>

-Composite Properties

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M00/7E/93/wKiom1cEuvaB5CRlAAA8NFADI9U885.png "title=" Web.png "alt=" Wkiom1ceuvab5crlaaa8nfadi9u885.png "/>

Function

-Color function

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M02/7E/93/wKiom1cEuxnhmkVoAAG5P2MWD2A634.png "title=" Web.png "alt=" Wkiom1ceuxnhmkvoaag5p2mwd2a634.png "/>

-Math function

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/7E/93/wKiom1cEuzmS2aaxAADAi8yGdes605.png "title=" Web.png "alt=" Wkiom1ceuzms2aaxaadai8ygdes605.png "/>

Name space

-Statement

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M02/7E/93/wKiom1cEvArBjZqBAADtA_EHENM977.png "title=" Web.png "alt=" Wkiom1cevarbjzqbaadta_ehenm977.png "/>

-Reference

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M01/7E/93/wKiom1cEvDeigeH_AABa02Y-cX4555.png "title=" Web.png "alt=" Wkiom1cevdeigeh_aaba02y-cx4555.png "/>

Scope

-Search for variables by inward and outward

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M01/7E/90/wKioL1cEvS6jLS-HAADrveGYwZI635.png "title=" Web.png "alt=" Wkiol1cevs6jls-haadrvegywzi635.png "/>

Comments

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M02/7E/90/wKioL1cEvUazKeRGAADWK5Y188E219.png "title=" Web.png "alt=" Wkiol1cevuazkergaadwk5y188e219.png "/>

Import

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M00/7E/90/wKioL1cEvWHwpai6AAHZCU3k4UY955.png "title=" Web.png "alt=" Wkiol1cevwhwpai6aahzcu3k4uy955.png "/>

Summary: This chapter mainly introduces the bootstrap customization (less overview, less syntax)

This article from the "Flying Ants" blog, declined to reprint!

Bootstrap Basics -5 Bootstrap customization (less overview, less syntax)