LESS and Sass --- simple Less

I'm learning Less and Sass these two days. Hope I can record something and use them in future.

Disadvantages of CSS

• no way to specify variables - values that are defined once and then re-used throughout a style sheet
• no way to define and re-use common style rules
• no way to make minor adjustments by customizing sytle rules with different values
• no way to perform calculations on-the-fly
• CSS syntax can get pretty unruly for non-trivial sites and styles

LESS and Sass help you organize your CSS into reuseable objects and classes that help you organize your styles, cut down on code, and make things easier to track.

1. LESS and Sass are higher level style syntaxes that provide advanced CSS features.
2. Usually the way you use them is you compile them -- in other words, you translate them -- into standard CSS before the browser renders the page.
3. compiled CSS file are uploaded to the production web server.

For Sass,need to install Ruby. Then install sass -- gem install sass. Complie your scss file to css file by it. -- sass --update styles.scss

For LESS, you can use less.js to generate the css file on-the-fly from your own less file. But it depends on the JS and may cause some performance issue when your less file is big. You can downlod a client-side compiler -- SimpLESS, to compile your css file on server side and upload to your web application.

LESS --- .less

using variables in LESS (@)

1. The variables can be colors, fontsize, strings, padding/marging size.
2. It will make your CSS easy to read and maintain.

example

LESS file:

@myColor1: navy;                            // named color value
@myColor2: #000080;                         // hex color value
@myStringVar: " with an appended string";   // string variable 
@myFontSize: 24px;                          // numeric value
@thinBorder: 4px solid @myColor1;           // multi-value variable
@paddingVar: 15px 15px 15px 35px;           // multi-value variable

h1, h2 {
    color: @myColor1;
}

#mypara {
    font-size: @myFontSize;
    border: @thinBorder;
    padding: @paddingVar;
}

#mypara:after {
    content: @myStringVar;
}      

Compiled/translated by Simpless:

h1,h2{color:#000080}
#mypara{font-size:24px;border:4px solid #000080;padding:15px 15px 15px 35px}
#mypara:after{content:" with an appended string"}      

using mixins in LESS -- mixins let you define common properties once, then re-use them

.mymixin{
        color: #ccc;
        font-size: 24px;
}

.myclass{
       .mymixin; 
       border: 1px solid black; 
}      

nested ruls in LESS -- it would be helpful to build and maintain the CSS for something like a child selector, with a pseudo class on it.

&: refer to the parent of the rulw that is currently being defined.

body {
    font-family: Helvetica, Arial, sans-serif;
    
    p {
        font-family:Times;
    }
    p#mypara {
        font-family: "Courier New";
    }
}

#mypara {
    color: #404040;
    border: 1px solid #404040;
    padding: 10px;
    
    &:hover {
        color: red;
    }
}      

compiled to

body{font-family:Helvetica,Arial,sans-serif}
body p{font-family:Times}
body p#mypara{font-family:"Courier New"}
#mypara{color:#404040;border:1px solid #404040;padding:10px}
#mypara:hover{color:red}      

Operation in LESS --caculations in LESS

@color: #f00;
@basepadding: 10px;
@basethickness: 1px;

#mypara {
    color: @color + #00f;
    border: (@basethickness+1)/2 solid black;
    padding: @basepadding @basepadding + 2;
}      

compiled:

#mypara {
  color: #ff00ff;
  border: 1px solid #000000;
  padding: 10px 12px;
}      

轉載于:https://www.cnblogs.com/underivy/p/4563242.html