LESS is a CSS extension language that adds features like variables, nested rules, and functions to regular CSS. It allows defining reusable values like colors and spacing, writing nested selectors more naturally, and adding parameters to mixins with default values. LESS can be compiled to CSS or interpreted dynamically with JavaScript. Bootstrap is a toolkit from Twitter that provides base CSS and HTML for common interface elements like forms, buttons, tables, grids, and navigation to kickstart development and ensure consistency. It can be included by directly linking stylesheet files or using LESS variables and mixins. The document discusses how LESS adds features useful for managing CSS, and how Bootstrap leverages LESS to provide reusable interface elements.

1. Less, Bootstrap and moreA 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 GFW7

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?EasyFastConsistent9

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