1

Less, Bootstrap and more

A simple introduction.

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.

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.

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>

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;}

6

More

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

7

Fxxk GFW

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.

9

Why Bootstrap?

• Easy• Fast• Consistent

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>

11

+

12

+

13

+

14

+

15

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

16

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

17

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

18

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

19

Thx~