less ,移动端less常见问题处理

  • M5_219796
    了解作者
  • 1.5MB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-01 06:44
    上传日期
less ,移动端less常见问题处理less ,移动端less常见问题处理less ,移动端less常见问题处理
15less.zip
内容介绍
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css预编译处理器</title> <link rel="stylesheet/less" href="csy.less"> </head> <body> <div class="box"> <div class="cute"> 子盒子 </div> <!-- 1. 定义: 什么是CSS预编译处理器? css预编译处理器就是把css编写按照编程语言()的思维习惯来编写的一个处理模式 a. 目标css b. 编程语言参照(js) c. 习惯:(变量,函数,方法,混入(maxin)。。。。) 2. 分类: 分类一:less ? a)什么是less VPN代理 css预编译处理器: b) sublimeText 插件安装: 三个步骤: 1. ctrl+shift+p 调出安装控制台 2. install package 找到包安装台 回车进入 3. 输入相关插件名称搜索到相关插件包,选择安装; (如何翻墙)?            less特点。。 3. 使用场景,以及编译; 学习与编译: 1. 学习使用less.js 要基于服务器端(文件内容的操作): 学习测试: 1. 服务器端? 2. rel设置成:stylesheet/less; 3. js 引入要在less引入之后; 2. 编译less: 1手动编译 lessc 方法编译: lessc 目标less.less > 输出的css.css (二) less使用: 1. 安装 npm install -g less 2. 检查less版本 lessc -v 3. 编译:a) 手动编译: lessc targetLess.less > output.css (三) less 的语法习惯:1. 嵌套; eg: .cute{ .sonOfcute{ } } 为了结构简单明了,并且有个时候为了单独控制均可使用; 2. 变量:俩步: 1. 定义变量; @变量名: 变量的值; 2. 变量使用; a. 在值里面使用: @变量名 b. 在属性里面使用:@{变量名} 注意:字符串跟JS不一样( 不需要加引号); 3. maxin 混入; 1. 混合定义; #选择器1{ // sth of csss } 2. 使用 .cute2{ #选择器1; }; 4. 运算; @wid*2; 5. fn函数:less提供各种函数; 1. color("#aaa") ;将颜色字符串转化成输出颜色 2. data-uri() 转化为内联 3. replace() 重要:30%-40%字符串处理; replace方法使用: replace(参数一,参数二,参数三) 参数说明: 参数一:目标字符串,等待被处理的字符串; 参数二:正则表达式:/^[day]$/g 1. 转义\s\d.. 2. 量词{} 3. 元字符 [] 4. 参数设置 g/i eg:replace("day","day","color") 4 .list 结合extract(@list,取的位置): 这种处理方式可以把一整套常见的数值以及其他样式定义;方便调用; 5. rgba(r,g,b,a) r,g,b分别指的红绿蓝(0-255) background-color: rgba(sdsds); background-color:argb(rgba(sdsds)); 一般argb为了处理兼容; 6. 注释 js注释风格一样(css也一样) // 单行 /*多行*/ 作业: 语法特点:每一个点小例子; fn 里面函数定义前四个小例子 fn: 数字函数 3个例子; gulp,grunt,webpack,fitkit这些都是前端自动化构建工具; 前端自动化构建工具:帮助开发人员有效率对代码进行管理,性能提升; 1. 及时维护反馈错误; 2. 优化代码,压缩,合并,编译,转化; eg: es6,es7,babel; 3. 实时监听修改; 4. 远程管理(git); gulp: 1. 安装;全局安装+ 2. 配置package.json,+gulpfile.js 3. 需要管理的项目根目录下面本地安装; 4. 插件安装; 5. 任务定义; 3. 项目管理使用; 作业:2个移动端页面css使用less编写; --> </div> <div class="content"> <div class="list"> list嵌套实验; </div> </div> <div class="list"> 这是外面的list </div> <div class="op"> </div> <div class="cute3"> sdsdd </div> <div class="cute4"> sdsdsdsdsdsd </div> <div class="cute5"> l;;; </div> <input type="text" class="btn1" /> </body> <script src="less.js"></script> <script> function test(){ var a = 100; var b = 10; function sub(){ alert(a*b); } return sub; } var aa = test(); </script> </html>
评论
    相关推荐