less简述
2024-09-18 12:03:56
什么是less?
一种 动态 样式 语言.
LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js或者Rhino在服务端运行(可以在node中进行编译)。
使用方法:
1. 在页面中可以直接引入less文件,但是必须引入less.js对其进行客户端编译。一般在练习的时候可以这样引入,在开发中就不要使用这样的方式了,因为在客户端进行编译会大量的浪费性能,增加页面响应时间
2. 利用gulp等工具对less进行编译,再项目中引入编译后的css文件
使用gulp搭建less编译环境
1. 全局安装gulp
npm install gulp --global
2. 在项目目录下进行 npm init创建package.json
3. 下载gulp依赖包和gulp-less工具以及gulp-autoprefixer、gulp-clean-css工具
npm install gulp gulp-less gulp-autoprefixer gulp-clean-css --save-dev
4. 创建gulpfile.js文件编写任务
```
var gulp = require("gulp")
var less = require("gulp-less")
//css 前缀兼容
var auto = require("gulp-autoprefixer")
gulp.task("compile:less",function(){
gulp.src("./less/**/*.less")
.pipe(less())
.pipe(auto({
grid:true,
browsers:['last 2 versions']
}))
.pipe(gulp.dest('./css'))
})
gulp.task("watch",function () {
gulp.watch("./less/**/*.less",['compile:less'])
})
gulp.task("default",['compile:less','watch'])
```
这样就可以在该项目中,。执行gulp来开启监听less文件并编译的任务
#### 使用LESS来实现栅格化布局框架
借助less预处理器与gulp自动化构建工具来实现响应式十二栅格化布局
1. 定需求
利用三个阀值将屏幕尺寸分成四种类型:
阀值: 768-992-1200
类型: xs-sm-md-lg
栅格化数量:12
```
@screen1:768px;
@screen1:992px;
@screen1:1200px;
@gridnum:12;
```
栅格化类名与样式
container,container-fluid
row
col-type-num
```
// mixins
.width(@w:100%){
width: @w;
margin-left:auto;
margin-right:auto;
}
.padding-content(@w:15px){
padding-left: @w;
padding-right: @w;
}
.clearfix{
&:after{
content:'';
display:block;
height: 0;
overflow: hidden;
visibility: hidden;
clear:both;
}
}
// 0-768 xs
//container container-fluid
.container,.container-fluid{
.width;
.padding-content;
.clearfix;
.row{
margin-left: -15px;
margin-right: -15px;
.clearfix;
}
.ghb(xs);
}
.visible-xs{display: block;}
.visible-sm{display: none;}
.visible-md{display: none;}
.visible-lg{display: none;}
.hidden-xs{display: none;}
.hidden-sm{display: block;}
.hidden-md{display: block;}
.hidden-lg{display: block;}
// 768-992 sm
//container container-fluid
@media screen and (min-width:@screen1){
.container{
.width(@screen1);
}
.container,.container-fluid{
.ghb(sm);
}
.visible-xs{display: none;}
.visible-sm{display: block;}
.visible-md{display: none;}
.visible-lg{display: none;}
.hidden-xs{display: block;}
.hidden-sm{display: none;}
.hidden-md{display: block;}
.hidden-lg{display: block;}
}
// 992-1200 md
//container container-fluid
@media screen and (min-width:@screen2){
.container{
.width(@screen2);
}
.container,.container-fluid{
.ghb(md);
}
.visible-xs{display: none;}
.visible-sm{display: none;}
.visible-md{display: block;}
.visible-lg{display: none;}
.hidden-xs{display: block;}
.hidden-sm{display: block;}
.hidden-md{display: none;}
.hidden-lg{display: block;}
}
// 1200- lg
//container container-fluid
@media screen and (min-width:@screen3){
.container{
.width(@screen3);
}
.container,.container-fluid{
.ghb(lg);
}
.visible-xs{display: none;}
.visible-sm{display: none;}
.visible-md{display: none;}
.visible-lg{display: block;}
.hidden-xs{display: block;}
.hidden-sm{display: block;}
.hidden-md{display: block;}
.hidden-lg{display: none;}
}
// .abc (@i:1) when (@i <= 100) {
// .a@{i}{
// width: unit(@i,px);// number->pixel
// }
// .abc(@i+1);
// }
// .abc;
.ghb (@type,@i:0) when(@i<=@gridnum) {
.col-@{type}-@{i}{
width:@i/@gridnum*100%;
float:left;
}
.col-@{type}-offset-@{i}{
margin-left:@i/@gridnum*100%;
}
.ghb(@type,@i+1);
}
```
最新文章
- js面向对象总结(一)
- 【JAVA】【Eclipse】出现This element neither has attached source nor attached Javadoc...的解决方法
- 相同vlan之间的相互访问
- Debian 环境下安装Tomcat记录
- Nginx状态监控
- SecureCRT配色方案
- Android Studio依赖dependencies和Eclipse加上lib包解决重复编译某些项目的问题
- Drawerlayou与ScrollView的介绍
- python之smtplib发邮件
- 常用的Character方法
- IEEE 802.1X标准
- [C++]线性链表之顺序表<;二>;
- DoTween
- 【代码审计】711cms_V1.0.5 目录遍历漏洞分析
- C# 中使用 Task 实现提前加载
- mac电脑 pip安装包后 撞到了系统python里面的解决方法
- 简单Gif制作
- CVPR2018 关于视频目标跟踪(Object Tracking)的论文简要分析与总结
- IBM InfoSphere DataStage and QualityStage
- 使用gulp构建工具
热门文章
- 使用wget做站点镜像及wget的高级用法
- Python学习笔记(九)
- UVa1635 - Irrelevant Elements
- Python 3.6.3 官网 下载 安装 测试 入门教程 (windows)
- session和cookie作用原理,区别
- AVL 树
- 运用El表达式截取字符串/获取list的长度
- React UI 组件库uiw v1.2.8 发布
- 【机器学习实战】第 10 章 K-Means(K-均值)聚类算法
- 使用angular4和asp.net core 2 web api做个练习项目(二), 这部分都是angular