less 前端css利器 工程化、逻辑化 css 文件
less
LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承，运算， 函数.
0.使用方式
浏览器引入
node 编译
1. 浏览器方式
1.1 html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet/less" type="text/css" href="less.less">
</head>
<body>
<header id="header">
<h2>hello h2 </h2>
header
<p> something about header for <a href="https://www.baidu.com">the link</a> </p>
</header>
<footer id="footer"> footer </footer>
<script src="less.js"></script>
</body>
</html>
1.2 less
// LESS // 1.变量 定义一系列通用的样式，然后在需要的时候去调用 ( 比如规模性项目自定义主题 )
// 变量作用于等同 js // @color: #4D926F;
// #header {
// @color: #f00;
// color: @color;
// } // change to
// #header {
// color: #4D926F;
// } // 2.混合 将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。
// 也可以带参数地调用，就像使用函数一样 // .rounded-corners (@radius: 5px) {
// border-radius: @radius;
// -webkit-border-radius: @radius;
// -moz-border-radius: @radius;
// }
// #header {
// .rounded-corners;
// border: 1px solid red;
// }
// #footer {
// .rounded-corners(50px);
// border: 1px solid red;
// } // change to
// #header {
// border-radius: 5px;
// -webkit-border-radius: 5px;
// -moz-border-radius: 5px;
// border: 1px solid red;
// }
// #footer {
// border-radius: 50px;
// -webkit-border-radius: 50px;
// -moz-border-radius: 50px;
// border: 1px solid red;
// } // 3.嵌套 在一个选择器中嵌套另一个选择器来实现继承 // #header {
// h2 {
// font-size: 26px;
// font-weight: bold;
// }
// p { font-size: 12px;
// a { text-decoration: none;
// &:hover { border: 1px solid red; }
// }
// }
// } // change to
// #header h2 {
// font-size: 26px;
// font-weight: bold;
// }
// #header p {
// font-size: 12px;
// }
// #header p a {
// text-decoration: none;
// }
// #header p a:hover {
// border: 1px solid red;
// } // 4. 函数 & 运算 实现属性值和颜色的运算，处理复杂关系 // @the-border: 1px;
// @base-color: #111;
// @red: #842210; // #header {
// margin: 20px;
// width: 50%;
// border: 1px solid red;
// color: @base-color * 3;
// border-left-width: @the-border*10;
// border-right-width: @the-border * 20;
// }
// #footer {
// margin: 10px;
// border: 1px solid red;
// color: @base-color + #003300;
// border-color: desaturate(@red, 10%);
// } // change to
// #header {
// margin: 20px;
// width: 50%;
// border: 1px solid red;
// color: #333333;
// border-left-width: 10px;
// border-right-width: 20px;
// }
// #footer {
// margin: 10px;
// border: 1px solid red;
// color: #114411;
// border-color: #7d2717;
// }
1.2.1 less 监视模式
在URL后面加上'#!watch'
/ 在终端运行less.watch()来启动监视模式
1.2.2 less 常用包装方式
在#bundle中定义一些属性集之后可以重复使用:
#bundle {
.button () {
display: block;
border: 1px solid black;
background-color: grey;
&:hover { background-color: white }
}
.tab { ... }
.citation { ... }
}
只需要在 #header a中像这样引入 .button:
#header a {
color: orange;
#bundle > .button;
}
2. node less 文件转 css
2.1 安装 npm install less -g
2.2 转换 lessc less.less css/less.css 如何你想将编译后的 CSS 压缩掉，那么加一个 -x 参数就可以了
3.扩展 淘宝 rem 方案布局 相关
经典 less 代码
//定义一个变量和一个mixin
@baseFontSize: 75;//基于视觉稿横屏尺寸/100得出的基准font-size
.px2rem(@name, @px){
@{name}: @px / @baseFontSize * 1rem;
}
//使用示例：
.container {
.px2rem(height, 240);
}
//less翻译结果：
.container {
height: 3.2rem;
}
相关文章
参考链接：
less 前端css利器 工程化、逻辑化 css 文件的更多相关文章
- 前端CSS的工程化——掌握Sass这四大特性就够了
初遇 CSS,一见倾心 记得刚遇见css的时候,咱像是见了美人儿一样,简直是爱不释手啊,简简单单写几行算不上代码的代码,就能做出这么漂亮的东西,这也成了咱前端之路的最初动力. 然而,随着项目体量和页面 ...
- 前端设计的常用属性，CSS的盒模型，页面布局的利器
在CSS和HTML结合布局页面的过程中,有一组被人们称为“盒属性”的CSS样式,被广泛的使用到.相信经常布局写页面的朋友们对盒属性一定不陌生.在CSS技术的发展过程中,盒属性也有了许多次改进,今天小编 ...
- 结构化CSS设计思维
LESS.SASS等预处理器给CSS开发带来了语法的灵活和便利,其本身却没有给我们带来结构化设计思维.很少有人讨论CSS的架构设计,而很多框架本身,如Bootstrap确实有架构设计思维作为根基. 要 ...
- 你真的了解字典(Dictionary)吗? C# Memory Cache 踩坑记录 .net 泛型 结构化CSS设计思维 WinForm POST上传与后台接收 高效实用的.NET开源项目 .net 笔试面试总结(3) .net 笔试面试总结(2) 依赖注入 C# RSA 加密 C#与Java AES 加密解密
你真的了解字典(Dictionary)吗? 从一道亲身经历的面试题说起 半年前,我参加我现在所在公司的面试,面试官给了一道题,说有一个Y形的链表,知道起始节点,找出交叉节点.为了便于描述,我把上面 ...
- 面试题2：BAT及各大互联网公司2014前端笔试面试题：HTML/CSS篇
BAT及各大互联网公司2014前端笔试面试题:HTML/CSS篇 Html篇: 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内 ...
- 前端编码规范（4）—— CSS 和 Sass (SCSS) 规范
CSS and Sass (SCSS) style rules ID and class naming ID和class(类)名总是使用可以反应元素目的和用途的名称,或其他通用名称.代替表象和晦涩难懂 ...
- BAT及各大互联网公司2014前端笔试面试题：HTML/CSS篇
BAT及各大互联网公司2014前端笔试面试题:HTML/CSS篇 2014/08/03 · Web前端, 开发 · CSS, HTML, 技术面试 分享到: 188 MongoDB集群之分片技术应用 ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位（position）z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- 前端开发工程师 - 04.页面架构 - CSS Reset & 布局解决方案 & 响应式 & 页面优化 &规范与模块化
04.页面架构 第1章--CSS Reset 第2章--布局解决方案 居中布局 课堂交流区 水平列表的底部对齐 如图所示,一个水平排列的列表,每项高度都未知,但要求底部对齐,有哪些方法可以解决呢? & ...
随机推荐
- lucene 全文检索工具的介绍
Lucene:全文检索工具:这是一种思想,使用的是C语言写出来的 1.Lucene就是apache下的一个全文检索工具,一堆的jar包,我们可以使用lucene做一个谷歌和百度一样的搜索引擎系统 2. ...
- thinkphp 检测验证码
/** * 检测验证码 * @param integer $id 验证码ID * @return boolean 检测结果 */function check_verify($code, $id = 1 ...
- Scrapy框架学习 - 使用内置的ImagesPipeline下载图片
需求分析需求:爬取斗鱼主播图片,并下载到本地 思路: 使用Fiddler抓包工具,抓取斗鱼手机APP中的接口使用Scrapy框架的ImagesPipeline实现图片下载ImagesPipeline实 ...
- Python基本数据类型——字典
字典 dict 字典是Python的另一种有序的可变数据结构,且可存储任意类型对象. 字典是一种键值对的数据容器,每个键值(key:value)对用冒号(:)分割,每个对之间用逗号(,)分割,整个字典 ...
- django模板-自定义标签、过滤器
自定义标签或者过滤器的步骤 ①将要创建自定义标签或过滤器的app加入settings文件的installed_apps中 ②在app中创建templatetags目录,类型为包即packages ③在 ...
- mybatis generator自动生成sqlmap代码的不完善之处以及解决方法
a) 建表时,字段名称建议用"_"分隔多个单词,比如:AWB_NO.REC_ID...,这样生成的entity,属性名称就会变成漂亮的驼峰命名,即:awbNo.recId b)or ...
- python之udp协议的套接字
udp是无链接的,先启动哪一端都不会报错 udp服务端 1 ss = socket() #创建一个服务器的套接字 2 ss.bind() #绑定服务器套接字 3 inf_loop: #服务器无限循环 ...
- UI自动化（一）html基础
前端的三把利器 HTML:赤裸的一个人 CSS:华丽的衣服 JS/JavaScript:赋予这个人的行为,也就是动起来 DOM 就是将页面变成可操 HTML(超文本标记语言) html代码实际上就是一 ...
- python简说（十四）内置函数
# sorted 排序# map 循环调用函数的,保存返回值# filter 循环调用函数,如果函数返回false,那么就过滤掉这个值,是指从你传入的这个list里面过虑. def abc(num ...
- 锁(lock)和闩(latch)
开发多用户.数据库驱动的应用时,最大的难点之一是:一方面要力争取得最大限度的并发访问,与此同时还要确保每个用户能以一致的方式读取和修改数据.为此就有了锁定(locking)机制,这也是所有数据库都具有 ...