CSS and LESS

1、CSS

　　Cascading Style Sheets (English name: Cascading Style Sheets) is an expression used HTML ( Standard Generalized Markup Language an application) or XML (a subset of the Standard Generalized Markup Language) and other documents style computer language. CSS can not be statically modified pages, with a variety of scripting languages can also be dynamically formatted for each element on the page.  

 

　　CSS page layout can be on positions of the elements pixel-level precision control, it supports almost all of the fonts in style, with the ability to model a web object and style editor.

 

　　

.form-control-static {
  min-height: 34px;
  padding-top: 7px;
  padding-bottom: 7px;
  margin-bottom: 0;
}
.form-control-static.input-lg,
.form-control-static.input-sm {
  padding-right: 0;
  padding-left: 0;
}
.input-sm {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

 

　　

 　　 Love to think of small partners will certainly find the css styles are always a lot of big push occurs, it can not be reasonable to achieve reuse, operation. The following less successful solution to this problem.

　　　　　　　　　　　　　　　　　　　　　　

 

2、LESS

　　2.1 less Overview

 

　　

　　LESS  to  CSS  gives dynamic language features, such as variables, inheritance, operations, functions. LESS either run (support IE 6+, Webkit, Firefox) on the client, or Rhino can also help Node.js runs on the server . bootstrap using LESS default.

 

　　2.2  LESS syntax

 

　　LESS CSS as a form of extension, it does not castrate CSS features, but in the existing CSS syntax, add a lot of extra features, so learning LESS is an easy task, decisive learning!　

　variable

　　It is easy to understand:

　　@nice-blue: #5B83AD;
　　@light-blue: @nice-blue + #111;

　　#header { color: @light-blue; }

　　Output:

　　#header { color: #6c94be; }

 

　　Even with the variable name can be defined as variables:

　　@fnord: "I am fnord.";
　　@var: 'fnord';
　　content: @@var; 

　　After parsing:

　content: "I am fnord.";

　

　mixing

　　In LESS, we can define some common set of attributes as a class, and then in another class to call these attributes. Here there is such a class, that if we now need to introduce a set of attributes common to those in the other class, then we only in any class like this call will be able to:

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}


#menu a {
  color: #111;
  .bordered;
}
.post a {
  color: red;
  .bordered;
}

.bordered class inside the property will be in style  #menu a and  .post abe reflected in:

#menu a {
  color: #111;
  border-top: dotted 1px black; border-bottom: solid 2px black; } .post a { color: red; border-top: dotted 1px black; border-bottom: solid 2px black; } 

　　Any of the CSS  class ,  ID  or  elements  set of attributes may be introduced in the same manner.

 

　Mixed with parameters

　　In LESS, you can also define attributes like a function with a set of parameters:

.border-radius (@radius) {
  border-radius: @radius;
  -moz-border-radius: @radius; -webkit-border-radius: @radius; } 

　　In the other class and then call it like this:

#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px); } 

　　We can also set default values ​​for parameters like this:

.border-radius (@radius: 5px) {
  border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; } 

　　So now if we call it like this:

#header {
  .border-radius;  
}

　　The value of the radius would be 5px.

　　You can also define a set of attributes with no parameters, if you want to hide this set of attributes, do not expose it to go to the CSS, but you also want other attributes cited in the collection, you will find this method is very easy to use:

.wrap () {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word; } pre { .wrap } 

　Output:

pre {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word; }

　　

 

　　Nested rule

LESS allows us to nest way to write Cascading Style Let's look at the following piece of CSS.:

#header { color: black; }
#header .navigation {
  font-size: 12px; } #header .logo { width: 300px; } #header .logo:hover { text-decoration: none; } 

In LESS, we can write:

#header {
  color: black;

  .navigation {
    font-size: 12px; } .logo { width: 300px; &:hover { text-decoration: none } } } 

Or write:

#header        { color: black;
  .navigation  { font-size: 12px } .logo { width: 300px; &:hover { text-decoration: none } } }

 

Code more concise, but I felt the DOMstructure a bit like format.

 

Note  & the use of symbols - if you want to write a series selector instead of writing descendant selector can be used &. This is a pseudo class is particularly useful as  :hover and  :focus.

 

E.g:

 

.bordered {
  &.float {
    float: left; 
  }
  .top {
    margin: 5px; } } 

 

Will output

 

.bordered.float {
  float: left;  
}
.bordered .top { margin: 5px; }

 

 

 

 

　　Math Functions

 

LESS provides a convenient mathematical functions, you can use the value they deal with some types of numbers:

 

round(1.67); // returns `2`
ceil(2.4);   // returns `3`
floor(2.6); // returns `2` 

 

If you want to be converted to a percentage value, you can use the percentage function:

 

percentage(0.5); // returns `50%`

 

　　

　　Namespaces

 

Sometimes, you may have to better organize CSS or simply for better packaging, the number of variables or hybrid module packaged together, you can look like this in #bundlecan be reused after the defined set of attributes:

 

#bundle {
  .button () {
    display: block;
    border: 1px solid black; background-color: grey; &:hover { background-color: white } } .tab { ... } .citation { ... } } 

 

You just need  #header asomething like this in the introduction  .button:

 

#header a {
  color: orange;
  #bundle > .button; } 

 

　　Scope

 

LESS in scope with other programming languages ​​are very similar, will first look from a local variable or mixing module, if not found, then it will go to the parent scope to find, until you find.

 

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white } } #footer { color: @var; // red }

 Wave of the sleeves, do not take a cloud

 

 

---

 

I was flying penguin, welcome to tell your story

      This content only for learning exchange, is subject to errors, please point out