侧栏工具条开发整理
Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。 Less 可以运行在 Node 或浏览器端。 相同点：
- 混入(Mixins)——class中的class；
- 参数混入——可以传递参数的class，就像函数一样；
- 嵌套规则——Class中嵌套class，从而减少重复的代码；
- 运算——CSS中用上数学；
- 颜色功能——可以编辑颜色；
- 名字空间(namespace)——分组样式，从而可以被调用；
- 作用域——局部修改样式；
- JavaScript 赋值——在CSS中使用JavaScript表达式赋值
| < link rel="stylesheet/less" type="text/css" href="css/index1.less"/> < script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"> < /script> 或者： < !--< link rel="stylesheet" href="css/index1.css" /> --> |
| 假设xx.less文件中代码如下： var less = require('less'); less.render('.class { width: 1 + 1 } ', function (e, css) { console.log(css); } ); 终端调用 LESS 解析器: $ lessc xx.less 或者： $ lessc xx.less > xx.css //编译后的 CSS 压缩掉，那么加一个 -x 参数 |
| // LESS @color: #4D926F; #header { color: @color; } | /* 生成的 CSS*/ #header { color: #4D926F; } |
| // LESS .rounded-corners (@radius: 5px) { border-radius: @radius; } #header { .rounded-corners; } #footer { .rounded-corners(10px); } | /* 生成的 CSS*/ #header { border-radius: 5px; } #footer { border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; } |
| // LESS #header { h1 { font-size: 26px; } p { font-size: 12px; a { text-decoration: none; } } } | /* 生成的 CSS*/ #header h1 { font-size: 26px; } #header p { font-size: 12px; } #header p a { text-decoration: none; } |
| // LESS @the-border: 1px; @base-color: #111; @red: #842210; #header { color: @base-color * 3; border-left: @the-border; border-right: @the-border * 2; } | /* 生成的 CSS*/ #header { color: #333; border-left: 1px; border-right: 2px; } } |
| // LESS .toolbar-item(@pos,@hoverPos) { background-position: 0 @pos; & :hover { background-position: 0 @hoverPos; } } .toolbar-item-feedback { .toolbar-item(-426px,-488px); } .transition(@transition) { -webkit-transition:@transition; -moz-transition: @transition; -ms-transition: @transition; -moz-transition: @transition; transition: @transition; } . transition(.transition(background-position 1s); ) | /* 生成的 CSS*/ .toolbar-item-feedback { background-position: 0 -426px; } .toolbar-item-feedback:hover { background-position: 0 -488px; } -webkit-transition: background-position 1s; -ms-transition: background-position 1s; -moz-transition: background-position 1s; transition: background-position 1s; |
- 有效防止命名冲突
- 声明不同js文件之间的依赖
- 可以让代码以模块化的方式组织
- config //配置别名
- requires //引入之前的模块
- define //定义新的模块
| requirejs.config( {
paths: {
jquery:'jquery-1.11.3.min'
}
});
//requirejs(['jquery'],function( |
| define(['jquery'],function($) { return { isEmpty:function() { } , checkLength:function() { } , isEqual:function(str1,str2) { return str1 === str2; } } ; } ); |
| A:< link rel="stylesheet/less" type="text/css" href="css/index1.less"/> B:< script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"> < /script> C:或者直接引用.css< !--< link rel="stylesheet" href="css/index1.css" /> --> 效果发现：用AB刷新页面的话，没有什么变化，但是C的话，会先加载一遍图片，为什么这么说呢，因为刷新的时候都可以看到加载过程！ < div class="toolbar"> < a href="javascript:; " class="toolbar-item toolbar-item-weixin"> < span class="toolbar-layer"> < /span> < /a> < a href="javascript:; " class="toolbar-item toolbar-item-feedback"> < /a> < a href="javascript:; " class="toolbar-item toolbar-item-app"> < span class="toolbar-layer"> < /span> < /a> < a href="javascript:; " class="toolbar-item toolbar-item-top"> < /a> < /div> |
| @toolbar-size: 52px; * { padding: 0; margin: 0; } .toolbar { position: fixed; left: 50%; bottom: 5px; margin-left: - @toolbar-size / 2; } 每个共同的class标签写背景图片属性 .toolbar-item { position: relative; cursor: pointer; width: @toolbar-size; height: @toolbar-size; /*background: pink;*/ margin: 10px 0; background: url(../img/toolbar.png) no-repeat; display: block; transition: background-position 1s; & :hover { .toolbar-layer { opacity: 1; filter: alpha(opacity=100); transform: scale(1); } } } 针对共同的class的单独的一个进行背景图片定位 .toolbar-item-weixin { background-position: 0 -798px; & :hover { background-position: 0 -860px; } .toolbar-layer { height: 212px; background-position: 0 0; } } .toolbar-item-feedback { background-position: 0 -426px; & :hover { background-position: 0 -488px; } } CSS3的一些效果 .toolbar-layer { position: absolute; right: @toolbar-size - 6; bottom: -10px; width: 172px; background: url(../img/toolbar.png) no-repeat; opacity: 0; filter: alpha(opacity=0); transform-origin: right bottom; //右下角出现 或者95% 95% transform: scale(0.01); transition:all 1s; } |
| 上面的引用的不变。 < div class="toobar"> < a href="javascript:; " class="toolbar-item"> < span class="toobar-btn"> < i class="toolbar-icon icon-chat iconfont"> < /i> //另外两个class是下载的图标代码样式 < span class="toolbar-text"> 公众< br/> 账号< /span> < /span> < span class="toolbar-layer toolbar-layer-weixin"> < /span> < /a> < a href="javascript:; " class="toolbar-item"> < span class="toobar-btn"> < i class="toolbar-icon icon-yingdaicon04 iconfont"> < /i> < span class="toolbar-text"> 意见< br/> 反馈< /span> < /span> < /a> （下面补充： icon-5app APP< br/> 下载 toolbar-layer-app icon-verticalaligntop 返回< br/> 顶部 ） < /div> |
| //封装css3在各个浏览器的兼容性 .transition(@transition) { -webkit-transition:@transition; -moz-transition: @transition; -ms-transition: @transition; -moz-transition: @transition; transition: @transition; } .scale(@scale) { -webkit-transform: scale(@scale); -moz-transform: scale(@scale); -ms-transform: scale(@scale); -moz-transform: scale(@scale); transform: scale(@scale); } | .transform-origin(@origin) { -webkit-transform-origin: @origin; -moz-transform-origin: @origin; -ms-transform-origin: @origin; -moz-transform-origin: @origin; transform-origin: @origin; } //为了兼容IE .opacity(@opacity) { @var:@opacity * 100; filter: alpha(opacity=@var); opacity: @opacity; } 用法：参见混合-带参数有默认值 目录 |
| //第二种方法:使用图标字体方法 @toolbar-size: 52px; .toolbar-item,.toobar-btn,.toolbar-icon,.toolbar-text { width: @toolbar-size; height: @toolbar-size; } .toolbar-icon,.toolbar-text { position: absolute; left: 0; color: #fff; text-align: center; .transition(top 1s); } //普通的居中 .toobar { position: fixed; left: 50%; bottom: 5px; margin-left: - @toolbar-size / 2; } .toolbar-item { position: relative; cursor: pointer; margin: 10px 0; display: block; & :hover { .toolbar-icon { top: -@toolbar-size; } .toolbar-text { top: 0; } .toolbar-layer { .opacity(1); .scale(1); } } } | .toobar-btn { position: absolute; top: 0; left: 0; overflow: hidden; } .toolbar-icon { top: 0; background: #d0d6d9; font-size: 30px; line-height: @toolbar-size; } .toolbar-text { top: @toolbar-size; background: #98a1a6; font-size: 12px; padding-top: 12px; line-height: 1.2; } .toolbar-layer { background: url(../img/toolbar.png) no-repeat; position: absolute; right: @toolbar-size - 6; bottom: -10px; width: 172px; .opacity(0); .transform-origin(95% 95%); .scale(0.01); .transition(all 1s); } 然后设置：.toolbar-layer-weixin和app的高212，和位置0 0 |
| .toolbar-btn { & :before { content: "\ed82"; } // & :extend(.icon-verticalaligntop); & :after { content: "返回\A顶部"; } } | 注意： (before和after) 用这两个的话，需要content:"" 如果 & ：after { content: "返回\A顶部"; } 文字需要换行的话，添加 \A 另外，同时加上：white-space: pre; |
| < !--方法三：利用before和after 伪类的方式--> < div class="toolbar"> < a href="javascript:; " class="toolbar-item toolbar-item-weixin"> < span class="toolbar-btn"> < /span> < /a> < a href="javascript:; " class="toolbar-item toolbar-item-feedback"> < span class="toolbar-btn"> < /span> < /a> < a href="javascript:; " class="toolbar-item toolbar-item-app"> < span class="toolbar-btn"> < /span> < /a> < a href="javascript:; " class="toolbar-item toolbar-item-top"> < span class="toolbar-btn"> < /span> < /a> < /div> |
| //方法三：利用before和after 伪类的方式 @toolbar-size:52px; .toolbar { position: fixed; left: 50%; bottom: 5px; margin-left: - @toolbar-size / 2; } .toolbar-item { position: relative; display: block; width: @toolbar-size; height: @toolbar-size; margin: 10px 0; & :hover { .toolbar-btn { & :before { top:- @toolbar-size } & :after { top:0; } } & :after { .opacity(1); .scale(1); } } // 代表二维码 & :after { content: ""; position: absolute; right: @toolbar-size - 6; bottom: -10px; width: 172px; background: url(../img/toolbar_img.png) no-repeat; .opacity(0); .transform-origin(95% 95%); .scale(0.01); .transition(all 1s); } } .toolbar-item-weixin { & :after { content: ""; height: 212px; background-position: 0 0; } .toolbar-btn { & :before { content: "\e63b"; } & :after { | content: "公众\A账号"; } } } .toolbar-item-feedback { .toolbar-btn { & :before { content: "\e643"; } // & :extend(.icon-yingdaicon04); & :after { content: "意见\A反馈"; } } } .toolbar-btn { & ,& :before,& :after { width: @toolbar-size; height: @toolbar-size; position: absolute; left: 0; } & :before,& :after { content: ""; color: #fff; text-align: center; .transition(top 1s); } top: 0; overflow: hidden; & :extend(.iconfont); // 继承之前的样式 & :before { //icon top: 0; line-height: @toolbar-size; background: #d0d6d9; font-size: 30px; } & :after { //text top: @toolbar-size; background: #98a1a6; font-size: 12px; line-height: 1.2; padding-top: 12px; white-space: pre; } } 这里面可以看出缺点：太繁琐了，太繁琐了！！！ |
- 避免图片使用，节约性能，修改方便
- HTML结构简单，但是CSS复杂
- 不兼容IE6,IE7
| //设置别名
requirejs.config( {
paths: {
jquery:'jquery-1.11.3.min' //js中存在的文件
}
});
//引入模块
requirejs(['jquery'],function( |
| //设置别名
requirejs.config( {
paths: {
jquery:'jquery-1.11.3.min'
}
});
//引入模块
requirejs(['jquery'],function( |
function move() {
|
| . Toobar, 按下tab键 | < div class="toobar"> < /div> |
| a[href="javascript:; "].toolbar-item,按下tab键 | < a href="javascript:; " class="toolbar-item"> < /a> |
| p { 111 } *100 | 100个p标签，内容为111 |