A simple introduction.

1. Less, Bootstrap and more A simple introduction. 1

2. What is LESS? {Less} extends CSS with variables, nested rules, operators and more. If you're still building websites without it, you're an idiot. 2

3. Why LESS? So you can define 变量(like colors, distances etc.), which then can be used in the rest of the file – great to have all used colors in one place only. Furthermore there are user-defined 函数, like .rounded here, a shortcut to add the three possible border-radius methods. You can even add 参数(in this case radius) with a default value. And 嵌套classes (.navi a) can be written more naturally. 3

4. How LESS? 2 ways: 编译版本 put your Less-files and automatically creates the corresponding CSS-file, with error checking and minification if desired. JS驱动版本 <link rel="stylesheet/less" type="text/css" href="site.less"><script type="text/javascript" src="less-1.0.41.min.js"></script> 4

5. Sample @linkcolor: #9999C9;@spacing_left: 60px;.rounded(@radius: 3px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius;}.navi { .rounded(5px); a { color: @linkcolor; }}div.navigation { padding-left: @spacing_left;} 5

6. More .darker { color: darken(@mycolor, 10%); background-color: lighten(@mybg, 15%); padding-right: @spacing_left * 2; padding-bottom: (@spacing_left + 5) * 2;} 6

7. Fxxk GFW 7

8. What is Bootstrap? Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more. 8

9. Why Bootstrap? Easy Fast Consistent 9

10. How Bootstrap? 2 ways 直接引用样式 <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-1.2.0.min.css"> +Less <link rel="stylesheet/less" href="/path/to/bootstrap.less"> <script src="/path/to/less.js"></script> 10

11. + 11

12. + 12

13. + 13

14. + 14

15. 转变思维 以1kb grid为例，传统CSS： 15

16. 转变思维 转变为LESS思维——变量： 16

17. 转变思维 转变为LESS思维——变量+函数： 17

18. 实战？ 适合跟v6整体关联不大、页面较多、更新块的业务。 18

19. Thx~ 19