Slide 1

Slide 1 text

Web Design + Cathy Chen 13年8月11日星期日

Slide 2

Slide 2 text

੽ʦ˂ක֐dሗձ CSS 13年8月11日星期日

Slide 3

Slide 3 text

13年8月11日星期日

Slide 4

Slide 4 text

ΪމϞəһಏٙʈՈ 13年8月11日星期日

Slide 5

Slide 5 text

可以寫比較 少的code, 好維護、 重複使用! 動態樣式語言 13年8月11日星期日

Slide 6

Slide 6 text

࠯΋ 13年8月11日星期日

Slide 7

Slide 7 text

安裝 client side server side $ npm install -g less $ lessc styles.less > styles.css ( node package manager) 13年8月11日星期日

Slide 8

Slide 8 text

http://incident57.a/less/ 13年8月11日星期日

Slide 9

Slide 9 text

Ը޶ɓɨϞࡳԬतЍ 13年8月11日星期日

Slide 10

Slide 10 text

less css .box { a { color:#666666; } &:hover { color: #ffffff; } } #1. Nested .box a { color: #666666; } .box a:hover { color: #ffffff; } 13年8月11日星期日

Slide 11

Slide 11 text

less css @link-color: #D0D6D; @text-size: 14px; @text-sixe-l: @text- size + 2px; @text-size-s: @text- size - 2px; a { color: @link-color; } #2. Variables a { color: #D0D6D; } ࠠል͜Ցٙ᙮׌d ̙˸ணމᜊᅰ FYΌ१ஹഐٙᕙЍ 13年8月11日星期日

Slide 12

Slide 12 text

less css #3-1 Mixins ̙˸຅ᓒ̂ٙ˙όd྅݊ܲ ඐٙᅵόɽߧ޴ΝdШΪމ ͜ίʔΝًٙ࿒ɨdϾϞԬ ฆٙҷᜊࣛ .button { border: solid 1px #eee; } .button-danger{ .button; background: red; } .button-info{ .button; background: blue; } .button-danger{ border: solid 1px #eee; background: red; } .button-info{ border: solid 1px #eee; background: blue; } 13年8月11日星期日

Slide 13

Slide 13 text

less css #3-2 Parametric Mixins 不同瀏覽器的prefix也很適合 .border-radius (@radius: 5px) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; } .button { .border-radius(6px); } .button { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; } 13年8月11日星期日

Slide 14

Slide 14 text

less css #4. Operations @base: 100px; width: @base *5; color: (#888 / 4); background:(@base-color + #111); width: 500px; 13年8月11日星期日

Slide 15

Slide 15 text

less css #5. Functions (color) color: lighten(#666, 5%); color: darken(#666, 5%); color: #737373; color: #595959; saturate(@color, 5%); desaturate(@color, 5%); fadein(@color, 5%); fadeout (@color, 5%); fade (@color, 5%); 搭配ColorSnapper app 13年8月11日星期日

Slide 16

Slide 16 text

http://colorsnapper.com/ 13年8月11日星期日

Slide 17

Slide 17 text

multiply(@color1, @color2); screen(@color1, @color2); overlay(@color1, @color2); softlight(@color1, @color2); hardlight(@color1, @color2); difference(@color1, @color2); exclusion(@color1, @color2); average(@color1, @color2); negation(@color1, @color2); rgb(@r, @g, @b); // converts to a color rgba(@r, @g, @b, @a); // converts to a color argb(@color); // creates a #AARRGGBB hsl(@hue, @saturation, @lightness); // creates a color hsla(@hue, @saturation, @lightness, @alpha); // creates a color hsv(@hue, @saturation, @value); // creates a color hsva(@hue, @saturation, @value, @alpha); // creates a color ceil(@number); // rounds up to an integer floor(@number); // rounds down to an integer percentage(@number); // converts to a %, e.g. 0.5 -> 50% round(number, [places: 0]); // rounds a number to a number of places sqrt(number); // * calculates square root of a number abs(number); // * absolute value of a number sin(number); // * sine function asin(number); // * arcsine - inverse of sine function cos(number); // * cosine function acos(number); // * arccosine - inverse of cosine function tan(number); // * tangent function atan(number); // * arctangent - inverse of tangent function pi(); // * returns pi pow(@base, @exponent); // * first argument raised to the power of the second argument mod(number, number); // * first argument modulus second argument 13年8月11日星期日

Slide 18

Slide 18 text

Less 告⼀一段落 13年8月11日星期日

Slide 19

Slide 19 text

ᒔϞɓԬλٙ͜ʈՈ 13年8月11日星期日

Slide 20

Slide 20 text

http://emmet.io/ 13年8月11日星期日

Slide 21

Slide 21 text

http://livestyle.emmet.io/ 13年8月11日星期日

Slide 22

Slide 22 text

http://getbootstrap.com/ 13年8月11日星期日

Slide 23

Slide 23 text

Extra small devices Phones (<768px) Grid Small devices Tablets (>768px) Medium devices Desktops (>992px) Large devices Desktops (>1200px) .col- .col-sm- .col-lg- 總和加起來12 13年8月11日星期日

Slide 24

Slide 24 text

8
4
4
4
4
6
6
Grid 13年8月11日星期日

Slide 25

Slide 25 text

Try it ! 13年8月11日星期日

Slide 26

Slide 26 text

Thanks 13年8月11日星期日