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章--布局解决方案 居中布局 课堂交流区 水平列表的底部对齐 如图所示,一个水平排列的列表,每项高度都未知,但要求底部对齐,有哪些方法可以解决呢? & ...
随机推荐
- django 生成动态的PDF文件
需要依赖库. WeasyPrint,它是一个Python库可以生成PDF文件从HTML模板中.安装WeasyPrint pip install WeasyPrint 创建一个PDF模板(templat ...
- Docker学习笔记之在开发环境中使用服务发现
0x00 概述 服务发现应用是很多服务化系统的组成部分,所以在开发.测试环境中也就有必要配备一套服务发现体系来配合我们的开发.测试工作.在这一小节里,我们就来谈谈如何在 Docker 环境下部署服务发 ...
- oracle 12cR1&12cR2核心高实用性新特性
今天把本地环境升到了12.2.12c应该来说无论从性能和功能性方面都得到了很大的加强,就是不知道实际license怎么卖...原来有些功能在exadata中可用的,现在在12c中可用了,估计很大程度上 ...
- ubuntu查看文件和文件夹大小
在实际使用ubuntu时候,经常要碰到需要查看文件以及文件夹大小的情况. 有时候,自己创建压缩文件,可以使用 ls -hl 查看文件大小.参数-h 表示Human-Readable,使用GB,MB等易 ...
- 牛客网校招全国统一模拟笔试（三月场）- Java方向
1.若二叉树采用二叉链表存储结构,要交换其所有分支结点左.右子树的位置,利用()遍历方法最合适 A 前序 B 中序 C 后序 D 按层次 解析:显然后序遍历比较合理.正常的逻辑应该就是:做好当前结点子 ...
- 牛客网校招全国统一模拟笔试（二月场）- Java方向
1.请问下面关于与wait()一起使用的方法notify()的各种陈述,哪个正确? A 多个线程同时等待某个条件,则只有等待时间最长的哪个线程被通知 B 多个线程同时等待某条件,则没有办法预测哪个线程 ...
- topcoder srm 485 div1
problem1 link 枚举第一个数和第二个数即可确定公差. problem2 link 设高度为$n$,宽度为$m$,且$n \ge m$ 如果$m \ge 5$,那么答案为0.这个可以通过抽屉 ...
- topcoder srm 698 div1 -3
1.定义重复串$S=T+T$,即$S$可以表示成一个串的叠加.给定一个串$s$,可以通过删除字符.修改字符.增加字符来使得其变为重复串.问最少的次数. 思路:首先将$s$分成个串$s_{0},s_{1 ...
- 集训总结DAY.1（18.5.22）——KMP
DAY 1——5.22 in the morning 依稀记得我们有一场contest. at night chf大佬讲KMP,先膜一波~~~ luoguP3375KMP模板题 KMP算法,又称模式匹 ...
- 集合05_Collections工具类
Collections工具类 提供大量方法用于操作集合,比如排序,查找,替换 同步控制 提供synchronizedXxx()方法将指定集合类包装成线程同步的集合. List<String> ...