9月9号内容

第一节课:

现有css文件的痛点?

1) 文件管理不好使,
2) 一些公用的样式需要重复拷贝
3) 样式级联关系写法复杂等等
  • 1 less文件

    • 变量,混合(函数),嵌套,less自带的函数和运算

    • 重点:

      1)less文件的语法http://www.bootcss.com/p/lesscss/
      2) less常见的函数http://www.cnblogs.com/zfc2201/p/3493335.html
      
    • 项目中的less文件可能使用最多的就是变量,嵌套,以及import这些语法了

第二节课:

bootstrap 中 less文件 分析

Image

bootstrap 文件

mixins是类似声明的函数供外面调用,自己的项目中可以参考

border-radius,clearfix,vendor-prefixes, text-overflow, text-emphasis等
  • 动画相关的可以参考下 progress-*.less

  • 外部文件:

    normalize, utilities, variables 3个基础的
    响应式相关的responsive-  http://v3.bootcss.com/css/#responsive-utilities
    栅格化:grid.less  http://v3.bootcss.com/css/#grid-example-basic
    表单: form.less
    
    项目中比较系统化的可能就是响应式,栅格化这些了
    
  • less文件如何编译

    1)  在客服端和服务端使用http://www.bootcss.com/p/lesscss/#guide
    2) 使用在线编译网站http://tool.oschina.net/less
    3) 使用gulp和fis等工具
    
    • gulp 中得less集成代码如下 Image2
  • 想了解更多gulp插件信息http://colobu.com/2014/11/17/gulp-plugins-introduction/

    fis中要满足这种功能,代码如下:

    1) Image3

    要执行watch和lovebird,fis  release -wL