用Less的方法编译--侧栏工具条
侧栏工具条开发整理
<h1><a name="_Toc493868075"></a>Less</h1>
不同点：
实现方式，LESS是基于JavaScript，所以，是在客户端处理的。Sass是基于Ruby的，然后是在服务器端处理的。
还有很多不一样的，可见下面的其他参考。
<h2><a name="_Toc493868078"></a>Less用法及koala使用</h2>
2：使用hubilder，在建的项目xx.html里的link引入就是xx.css，样式的设置就在xx.less里面执行， 然后选择右键→编译 为xx.css或者参见下面：Hbuilder开启less自动编译的方法<a name="_Toc493868080"></a>
3：Hbuilder开启less自动编译的方法，打开菜单栏->工具->预编译器设置，新建：
文件后缀为.less，（npm全局安装less, npm install -g less），→选择智能完成。以后每次less文件有改动保存的时候就会自动编译了
| < 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” /> —> |
index1.less 写完之后，引入，没有翻译成 .css
注意less样式文件一定要在引入less.js前先引入。
备注：在服务器环境下使用！本地直接打开可能会报错！(只是可能会报错)<h3><a name="_Toc493868082"></a>在服务器端使用：</h3>
在服务器端安装 LESS 的最简单方式就是通过 npm(node 的包管理器)
前提：npm 环境存在
$ npm install less //最简单方式就是通过 npm(node 的包管理器),
$ npm install less@latest //下载最新稳定版本的 LESS
<table>
假设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 参数
<h2><a name="_Toc493868083"></a>语法（基本）</h2>
@import ‘mixin’;
引入分离出来的less代码
| // 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; |
| requirejs.config( { paths: { jquery:’jquery-1.11.3.min’ } }); //requirejs([‘jquery’],function($) { // $(‘body’).css(“background-color”,”red”); // } ) 或者下面 requirejs([‘jquery’,’val’],function($,validate) { console.log(validate.isEqual(1,1)); //true } ) |
3：val.js中
| define([‘jquery’],function($) { return { isEmpty:function() { } , checkLength:function() { } , isEqual:function(str1,str2) { return str1 === str2; } } ; } ); |
<h1><a name="_Toc493868093"></a>侧栏工具-案例分析</h1>
background-image:url(/整图地址);background-repeat:no-repeat;width:;height:;
}
引用该类 .. 然后在元素中逐一定义背景坐标 .. 以下为关键属性 ..
.ico1 {
background-position:X坐标 Y坐标
}
.ico2 {
background-position:X坐标 Y坐标
}
.ico3 {
background-position:X坐标 Y坐标
}
.nav {
background-position:X坐标 Y坐标
}
内容如下：
HTML:
| 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> |
主要的Less:
| @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> |
主要的Less
公共：mixin.less
| //封装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.less
| //第二种方法:使用图标字体方法 @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 |
<h4>优缺点：</h4>
总结：使用图标字体的方式
优点，缺点和兼容性
1、避免图片使用，节约性能，修改方便
2、缺点：Html结构稍微复杂
3、不兼容IE6,IE7因为图标字体要用IE8的原因，所以接下来，before和after 伪类方法
<h3><a name="_Toc493868097"></a>利用before和after 伪类的方式(有疑问)</h3>
(before和after)
用这两个的话，需要content:””
如果&
:after {
content: “返回\A顶部”;
}
文字需要换行的话，添加 \A
另外，同时加上：white-space: pre;
问题：Less继承之前.iconfont：before的样式，怎么写？？
在scss中，继承：@extend .iconfont;
在less中，没有伪类的继承：&
:extend(.iconfont);
但是如果是继承伪类 .iconfont：before ，怎么写？
未解决，保留！先不尝试了
<h4>代码思路：</h4>
| .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> |
主要的Less:
| //方法三：利用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; } } 这里面可以看出缺点：太繁琐了，太繁琐了！！！ |
| //设置别名 requirejs.config( { paths: { jquery:’jquery-1.11.3.min’ //js中存在的文件 } }); //引入模块 requirejs([‘jquery’],function($) { // $(‘body’).css(“background-color”,”red”); // 按顺序写到上面进行测试,注释的部分 里面写js } ) |
Js主要内容：
| //设置别名 requirejs.config( { paths: { jquery:’jquery-1.11.3.min’ } }); //引入模块 requirejs([‘jquery’],function($) { // $(‘body’).css(“background-color”,”red”); // 按顺序写到上面进行测试,注释的部分 // $(“#backTop”).on(“click”,move); $(“#backTop”).on(“click”,go); //迅速返回顶部 // 监听滚动事件 $(window).on(“scroll”,function() { checkPosition($(window).height()); } ); checkPosition($(window).height()); //加载的时候执行一下这个函数 | function move() { $(‘html,body’).animate( { scrollTop:0 } ,800); } // 需求改变:返回到顶部的时候,迅速一下子 function go() { $(‘html,body’).scrollTop(0); } function checkPosition(pos) { if($(window).scrollTop() > pos) { //这里有个参数，所以要写个匿名函数，进行构造 $(“#backTop”).fadeIn(); } else { $(“#backTop”).fadeOut(); } } } ) |
<h1><a name="_Toc493868100"></a>源代码：</h1>
https://github.com/huangjuntu/Less
git@github.com:huangjuntu/Less.git
https://github.com/huangjuntu/Less.git
<h1><a name="_Toc493868101"></a>问题：</h1>
客户端用法中，传到服务器上，是不是用less的话不能实现跨域？就会报错了？
再次实验下发现又可以了！是因为缓存么？
<h1><a name="_Toc493868102"></a>其他参考</h1>
Koala下载：http://koala-app.com/index-zh.html
Less网站：http://www.bootcss.com/p/lesscss/
LESS介绍及其与Sass的差异： http://blog.jobbole.com/24671/
我的：
https://github.com/GongchuangSu/Front-end_Web_In_Action/tree/master/toolbar
https://huangjuntu.vip/2017/09/20/css-sprise/
| . 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 |