CSS Learning notes (1)

Why to re-learn CSS, for a lot of reasons, CSS this little chick hit, contact so far has been three years, but really said proficiency is not necessarily. Hereby, for my goal to begin to rearrange the knowledge of CSS, I hope that every note can have an example to consolidate my knowledge.

At the beginning of the study, the first introduction we just will play less, for like my memory super poor people, have a better CSS document is just a dream ah, the recent project to do a home page, seven sub-pages, the most critical is the sub-page details are not the same, not the structure, but the font, spacing, color, Design to the prototype said to be a bright color, accurate, and not the same as before Bai, no language le, hereby learn less, online generation http://www.lesscss.net/#online-less-compilers, of course, I use sublime There are plugins directly generated OH

Variable

(1)

@link-success: #00CC33 #a:link {@link-success} ;--less#a:link {#00CC33} ;--css

Since a variable can only be defined once, its essence is "constant". For me, if a color is defined more than three times, but is a different level, you can use {class}

But look at the egg pain, want to want to change one, I either rewrite a class to overwrite, or modify the original? (WebApp font changed many times a day) for me, using less to define a new variable, and then put it in less, the key level is clear;

(2)

@nav: Nav; [Email protected] {nav} {     font-weight: bold; line-height: 40px; margin: 0 auto;    } --less

Pay attention to the wording, then I now add a bottom nav, so easy

[email protected] {nav}    { font-weight: bold; line-height: 40px; margin: 0 auto;    } --less

(3) @var: @a;@a: %;

. Lazy-eval-scope {width: @var; @a: 9;} --less

Repeated reference to chant, but this does not have to write directly fast, have to think good hierarchical relationship, for the General page, I think the above two basic enough, especially cross-browser Webkit,moz, write dead, I never diligent, but love toss, with less save most of the work of CTRL + C, more critical, Not modular, it doesn't sound low.

Mixed

(1) Plug the other class,id directly in

. Border-small {Border:1px solid #00CC33} . Topnav {width:80%,.border-small} ;--less.topnav {width:80%,border:1px solid #00CC33} ;--css

I would like to mix, but it is best to split it with the call layer, in addition, add a comment chant, old forget.

(2) using CSS selector notation

{  . Inner {    color: red;  }  {  #outer >. inner;}  {  . Inner () {    color: red;  }  {  #outer >. inner;}  {  color: red;}

So, if you want to hide, if you do not want its class to appear, but also useful, after the class name plus (). There's important in the mix. You need to be aware that you can do this directly by assigning values

{ background: @bg; color: @color; }{}{}

Nesting

{ color: black; . Navigation {font-size: 12px;}  { width: 300px;}  {  color: black;}  {  font-size: 12px;}  {  width: 300px;}

Import

This is very useful for me, I can put some common constants are encapsulated in a less file, when used only in the new less file to be introduced in the good.

Of course, this is just my way of managing CSS documents, used to treat my intermittent amnesia, and I've been reading CSS recently, and I'm thinking, by re-learning, to start making components of my own work. fighting!

CSS Learning notes (1)