SlideShare a Scribd company logo
Larry 诺之 UED
我们讨论神马?

 •{Less} 动态扩展 CSS

 •{Less} 是什么

 •如何在网站中使用 {Less}

 •熟悉 {Less} 语法规则
为什么使用 {Less} ?

 •使用变量和函数

 •更少的 CSS 代码

 •方便快捷易于修改、维护

 •可以在一个项目甚至多个项目中重复使用
{Less} 是神马?

 •“{Less} 是一种动态的样式语言,将 CSS 赋予了
   动态语言的特性。如变量、继承、运算、函数。”

 •{Less} 是开源的
{Less} 是神马?

  •Less可运行在客户端 (I E6+ ,Webkit,Firefox).

  •Less可运行在服务端 (N ode.j
                      s或者 Rhino)

  •Less可以被预编译为 CSS

  •Less第一个版本是用 Ruby 开发,目前新版是
   用 J va
       a Script
Lesscss
{Less} 提供的机制

 •变量 (Variables)

 •嵌套 (Nesting)

 •混合 (Mixins)

 •运算 (Operators)

 •函数 (Functions)
在网站中使用 {Less}

 •使用 Less官方的 Less.j Less转为 CSS.
                  s将
 http://www.lesscss.org ( 需翻墙 )
 http://www.lesscss.net ( 中文官网 )

 •也可以使用 PHP 转换 Less为 CSS
 http://www.leafo.net/lessphp

 •预编译 Less为 CSS ,在网站上引用该 CSS 文件
 http://incident57.com/less (ma  c)
 http://wea rekiss.com/simpless (ma c,windows,linux)
在网站中使用 {Less}

 •在官网下载 less.j
             s

 •将自己的 Less CSS 文件命名后缀为 .less, 比如
  style.less.

 •在网站 hea 部分引用 less.j
         d          s以及 style.less.
  要注意先后顺序及 type
{Less} 语法规则
            变量 Va bles
                 ria

     Less                    CSS




Less 中的变量为完全的”常量”,所以只能定义一次
{Less} 语法规则
             混合 M ixins

      Less                  CSS




任何 CSS cl
        ass id 或者元素 属性集都可以以同样的方式引入
{Less} 语法规则
             带参数的混合 M ixins
      Less                    CSS




Less支持像函数一样定义一个带参数的属性集
{Less} 语法规则
             模式匹配 M atching
      Less                    CSS




多个相同 cla 的混合属性集 Less会根据参数的模式匹配
        ss
{Less} 语法规则
              嵌套规则 N ested Rules
       Less                        CSS




& 串联选择器 对 :hover :foc 等伪类非常有用
                     us
{Less} 语法规则
           表达式 Expressions
    Less                     CSS
{Less} 语法规则
           运算 Operations(+ - * /)
    Less                            CSS
{Less} 语法规则
        颜色函数 Color Functions
{Less} 语法规则
         M a 函数
            th
{Less} 语法规则
              命名空间 N amespaces
            Less                  CSS




Less中命名空间可以定义一些属性集重复使用,这样可以更好的组织 CSS 或者
更好的封装,变量和混合集可以打包一起 .
{Less} 语法规则
                作用域 Scope




Less中作用域跟其他的编程语言有些类似 , 就近一致 , 先本地后父级 , 直到找到为止 .
Th ank You !

More Related Content

Viewers also liked

Axxes gagne en efficacité grâce à l’automatisation de ses processus internes
Axxes gagne en efficacité grâce à l’automatisation de ses processus internesAxxes gagne en efficacité grâce à l’automatisation de ses processus internes
Axxes gagne en efficacité grâce à l’automatisation de ses processus internes
Quadrant Communications
 
Facebook (confirmé)
Facebook (confirmé)Facebook (confirmé)
Importancia de las herramientas en la nube
Importancia de las herramientas en la nubeImportancia de las herramientas en la nube
Importancia de las herramientas en la nube
AleePerez12
 
Michel Jacquinot
Michel JacquinotMichel Jacquinot
Michel Jacquinot
Amicalecoworking
 
Presentación carlos-de-la-hoz-ambiente windows
Presentación carlos-de-la-hoz-ambiente windowsPresentación carlos-de-la-hoz-ambiente windows
Presentación carlos-de-la-hoz-ambiente windows
carlosdelahoz94
 
Baudelaire
BaudelaireBaudelaire
Baudelaire
agm007
 
Y a t-il un chef de projet dans mon scrum
Y a t-il un chef de projet dans mon scrumY a t-il un chef de projet dans mon scrum
Y a t-il un chef de projet dans mon scrum
Benoist Soulard
 
Com digitale
Com digitaleCom digitale
Com digitale
timoko95
 
Major eruption.ppt quoc.ppt2
Major eruption.ppt quoc.ppt2Major eruption.ppt quoc.ppt2
Major eruption.ppt quoc.ppt2
quoc1234
 
Antsirabe
AntsirabeAntsirabe
Antsirabe
clemreynaud
 
Utilización del pronombre en et y. por Patricio Huera
Utilización del pronombre en et y. por Patricio HueraUtilización del pronombre en et y. por Patricio Huera
Utilización del pronombre en et y. por Patricio Huera
PatricioDH
 
Revista Digital
Revista DigitalRevista Digital
Revista Digital
Jomar Green
 
Lfck
LfckLfck
Lfck
CECyTEM
 
Envoyer et recevoir un mail
Envoyer et recevoir un mailEnvoyer et recevoir un mail
Envoyer et recevoir un mail
Audrey Lebon
 
Culture & Venture Philantropy : The Art of Giving
Culture & Venture Philantropy : The Art of GivingCulture & Venture Philantropy : The Art of Giving
Culture & Venture Philantropy : The Art of Giving
Nymphea
 
Présentation sur les carriere
Présentation sur les carrierePrésentation sur les carriere
Présentation sur les carriere
ryangood256
 
Joaquin antuna bernardo
Joaquin antuna bernardoJoaquin antuna bernardo
Joaquin antuna bernardo
Julio Cesar Quispe Cuellar
 
Mode
ModeMode
Mode
matwild
 

Viewers also liked (20)

Axxes gagne en efficacité grâce à l’automatisation de ses processus internes
Axxes gagne en efficacité grâce à l’automatisation de ses processus internesAxxes gagne en efficacité grâce à l’automatisation de ses processus internes
Axxes gagne en efficacité grâce à l’automatisation de ses processus internes
 
Facebook (confirmé)
Facebook (confirmé)Facebook (confirmé)
Facebook (confirmé)
 
Importancia de las herramientas en la nube
Importancia de las herramientas en la nubeImportancia de las herramientas en la nube
Importancia de las herramientas en la nube
 
Michel Jacquinot
Michel JacquinotMichel Jacquinot
Michel Jacquinot
 
Presentación carlos-de-la-hoz-ambiente windows
Presentación carlos-de-la-hoz-ambiente windowsPresentación carlos-de-la-hoz-ambiente windows
Presentación carlos-de-la-hoz-ambiente windows
 
Baudelaire
BaudelaireBaudelaire
Baudelaire
 
Y a t-il un chef de projet dans mon scrum
Y a t-il un chef de projet dans mon scrumY a t-il un chef de projet dans mon scrum
Y a t-il un chef de projet dans mon scrum
 
Com digitale
Com digitaleCom digitale
Com digitale
 
Les voyelles
Les voyellesLes voyelles
Les voyelles
 
Major eruption.ppt quoc.ppt2
Major eruption.ppt quoc.ppt2Major eruption.ppt quoc.ppt2
Major eruption.ppt quoc.ppt2
 
Antsirabe
AntsirabeAntsirabe
Antsirabe
 
Utilización del pronombre en et y. por Patricio Huera
Utilización del pronombre en et y. por Patricio HueraUtilización del pronombre en et y. por Patricio Huera
Utilización del pronombre en et y. por Patricio Huera
 
Revista Digital
Revista DigitalRevista Digital
Revista Digital
 
Lfck
LfckLfck
Lfck
 
Envoyer et recevoir un mail
Envoyer et recevoir un mailEnvoyer et recevoir un mail
Envoyer et recevoir un mail
 
Culture & Venture Philantropy : The Art of Giving
Culture & Venture Philantropy : The Art of GivingCulture & Venture Philantropy : The Art of Giving
Culture & Venture Philantropy : The Art of Giving
 
Présentation sur les carriere
Présentation sur les carrierePrésentation sur les carriere
Présentation sur les carriere
 
Joaquin antuna bernardo
Joaquin antuna bernardoJoaquin antuna bernardo
Joaquin antuna bernardo
 
Mode
ModeMode
Mode
 
Les ados et le look 2
Les ados et le look 2Les ados et le look 2
Les ados et le look 2
 

Similar to Lesscss

SASS 让你更爽的 编写CSS
SASS 让你更爽的 编写CSS SASS 让你更爽的 编写CSS
SASS 让你更爽的 编写CSS
Zhu Qi
 
CSS preprocessor 介紹,與 SASS 入門分享
CSS preprocessor 介紹,與 SASS 入門分享CSS preprocessor 介紹,與 SASS 入門分享
CSS preprocessor 介紹,與 SASS 入門分享
wantingj
 
CSS 語法教學
CSS 語法教學CSS 語法教學
CSS 語法教學
Shengyou Fan
 
SASS 入門
SASS 入門SASS 入門
SASS 入門
Kero Yu
 
Jass in coserv
Jass in coservJass in coserv
Jass in coserv
YyuchenY
 
3sss book
3sss book3sss book
3sss book
Hina Chen
 
Sass与compass学习笔记
Sass与compass学习笔记Sass与compass学习笔记
Sass与compass学习笔记
Jace Lee
 
css框架研究
css框架研究css框架研究
css框架研究
chandleryu
 
Sass compass
Sass compassSass compass
Sass compass
fangdeng
 
Css布局
Css布局Css布局
Css布局
pi cheng
 
2010 01-07周五分享 前端的那些事儿-小米猪
2010 01-07周五分享 前端的那些事儿-小米猪2010 01-07周五分享 前端的那些事儿-小米猪
2010 01-07周五分享 前端的那些事儿-小米猪
小 米猪
 

Similar to Lesscss (11)

SASS 让你更爽的 编写CSS
SASS 让你更爽的 编写CSS SASS 让你更爽的 编写CSS
SASS 让你更爽的 编写CSS
 
CSS preprocessor 介紹,與 SASS 入門分享
CSS preprocessor 介紹,與 SASS 入門分享CSS preprocessor 介紹,與 SASS 入門分享
CSS preprocessor 介紹,與 SASS 入門分享
 
CSS 語法教學
CSS 語法教學CSS 語法教學
CSS 語法教學
 
SASS 入門
SASS 入門SASS 入門
SASS 入門
 
Jass in coserv
Jass in coservJass in coserv
Jass in coserv
 
3sss book
3sss book3sss book
3sss book
 
Sass与compass学习笔记
Sass与compass学习笔记Sass与compass学习笔记
Sass与compass学习笔记
 
css框架研究
css框架研究css框架研究
css框架研究
 
Sass compass
Sass compassSass compass
Sass compass
 
Css布局
Css布局Css布局
Css布局
 
2010 01-07周五分享 前端的那些事儿-小米猪
2010 01-07周五分享 前端的那些事儿-小米猪2010 01-07周五分享 前端的那些事儿-小米猪
2010 01-07周五分享 前端的那些事儿-小米猪
 

Lesscss

  • 2. 我们讨论神马? •{Less} 动态扩展 CSS •{Less} 是什么 •如何在网站中使用 {Less} •熟悉 {Less} 语法规则
  • 3. 为什么使用 {Less} ? •使用变量和函数 •更少的 CSS 代码 •方便快捷易于修改、维护 •可以在一个项目甚至多个项目中重复使用
  • 4. {Less} 是神马? •“{Less} 是一种动态的样式语言,将 CSS 赋予了 动态语言的特性。如变量、继承、运算、函数。” •{Less} 是开源的
  • 5. {Less} 是神马? •Less可运行在客户端 (I E6+ ,Webkit,Firefox). •Less可运行在服务端 (N ode.j s或者 Rhino) •Less可以被预编译为 CSS •Less第一个版本是用 Ruby 开发,目前新版是 用 J va a Script
  • 7. {Less} 提供的机制 •变量 (Variables) •嵌套 (Nesting) •混合 (Mixins) •运算 (Operators) •函数 (Functions)
  • 8. 在网站中使用 {Less} •使用 Less官方的 Less.j Less转为 CSS. s将 http://www.lesscss.org ( 需翻墙 ) http://www.lesscss.net ( 中文官网 ) •也可以使用 PHP 转换 Less为 CSS http://www.leafo.net/lessphp •预编译 Less为 CSS ,在网站上引用该 CSS 文件 http://incident57.com/less (ma c) http://wea rekiss.com/simpless (ma c,windows,linux)
  • 9. 在网站中使用 {Less} •在官网下载 less.j s •将自己的 Less CSS 文件命名后缀为 .less, 比如 style.less. •在网站 hea 部分引用 less.j d s以及 style.less. 要注意先后顺序及 type
  • 10. {Less} 语法规则 变量 Va bles ria Less CSS Less 中的变量为完全的”常量”,所以只能定义一次
  • 11. {Less} 语法规则 混合 M ixins Less CSS 任何 CSS cl ass id 或者元素 属性集都可以以同样的方式引入
  • 12. {Less} 语法规则 带参数的混合 M ixins Less CSS Less支持像函数一样定义一个带参数的属性集
  • 13. {Less} 语法规则 模式匹配 M atching Less CSS 多个相同 cla 的混合属性集 Less会根据参数的模式匹配 ss
  • 14. {Less} 语法规则 嵌套规则 N ested Rules Less CSS & 串联选择器 对 :hover :foc 等伪类非常有用 us
  • 15. {Less} 语法规则 表达式 Expressions Less CSS
  • 16. {Less} 语法规则 运算 Operations(+ - * /) Less CSS
  • 17. {Less} 语法规则 颜色函数 Color Functions
  • 18. {Less} 语法规则 M a 函数 th
  • 19. {Less} 语法规则 命名空间 N amespaces Less CSS Less中命名空间可以定义一些属性集重复使用,这样可以更好的组织 CSS 或者 更好的封装,变量和混合集可以打包一起 .
  • 20. {Less} 语法规则 作用域 Scope Less中作用域跟其他的编程语言有些类似 , 就近一致 , 先本地后父级 , 直到找到为止 .
  • 21. Th ank You