less使用js变量开发编程思维导图

less使用js变量开发编程分享，内容覆盖图片分辨率问题、移动端屏幕适配布局方式、抽取通用样式等内容，各位同学，快学习起来。

less使用js变量开发编程思维导图

• 1.
  • 1.1. 图片分辨率问题
    • 1.1.1. ios中会准备多张图片
    • 1.1.2. 早期的web开发中也会准备多张图片
    • 1.1.3. 现在流行的是 准备一张大图,然后进行压缩
  • 1.2. 移动端屏幕适配布局方式
    • 1.2.1. 宽度百分比(自适应),定高
      • 1.2.1.1. viewport
  • 1.3. 抽取通用样式
    • 1.3.1. 目的是:
      • 1.3.1.1. 方便使用
      • 1.3.1.2. 讲常用的样式 定义为通用的资源 使用的时候 直接 添加class即可
  • 1.4. http://zh.learnlayout.com/
    • 1.4.1. 用通俗的话 描述 css
    • 1.4.2. 建议 花半个小时 去看看
  • 1.5. less
    • 1.5.1. 为CSS的赋予了动态语言的特性
    • 1.5.2. 变量、继承、运算、函数等，更方便CSS的编写和维护
  • 1.6. sublime安装less插件
    • 1.6.1. 下载压缩包
    • 1.6.2. sublime 菜单的 倒数第二项
      • 1.6.2.1. 第一个选项
      • 1.6.2.2. 把弹出的文件夹的路径 复制
    • 1.6.3. 双击压缩包
      • 1.6.3.1. 解压到
      • 1.6.3.2. 将复制的路径 拷贝进去
      • 1.6.3.3. 确定解压
    • 1.6.4. 开关sublime 即可
  • 1.7. less只是一个纯文本
    • 1.7.1. 装插件与否 仅仅影响的是 高亮效果
    • 1.7.2. 不影响代码的编写
    • 1.7.3. webstorm 我需要研究一下再告诉大家
  • 1.8. less使用
    • 1.8.1. 创建后缀是.less的文件
    • 1.8.2. 运行考拉
    • 1.8.3. 讲less的文件夹拖入考拉
    • 1.8.4. 只要保存.less文件 ctrl+s 考拉 会自动帮助我们进行 编译
      • 1.8.4.1. 编译的作用是: 讲less 转化为 .css文件
      • 1.8.4.2. 讲less中的语法 根据一定的规则 替换为 对应的css代码
  • 1.9. 考拉编译注意点
    • 1.9.1. 如果弹出红色框框 意味着 写错了代码
    • 1.9.2. 如果放.less文件的 文件夹 叫做 less
      • 1.9.2.1. 在编译的时候 会在跟less文件夹同级的目录下 创建一个 叫css的文件 编译好的代码就在那里面
    • 1.9.3. 如果文件夹名不叫 less 而是 其他的 那么 会在统计目录下
  • 1.10. less的作用
    • 1.10.1. 变量的作用
      • 1.10.1.1. 实现 替换变量值,所有使用变量的地方 都会被替换
      • 1.10.1.2. 比如 页面大量使用jd红,要换位 淘宝红 只需要替换变量值即可
  • 1.11. 京东m使用less来写
    • 1.11.1. jd红 定义变量
    • 1.11.2. 嵌套多的结构 使用 less的 嵌套写法
    • 1.11.3. 混合的 写法 可以 先别急着 用上去
      • 1.11.3.1. width:100%;