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章--布局解决方案 居中布局 课堂交流区 水平列表的底部对齐 如图所示,一个水平排列的列表,每项高度都未知,但要求底部对齐,有哪些方法可以解决呢? & ...
随机推荐
- Docker学习笔记之浅谈虚拟化和容器技术
0x00 概述 相信所有对 Docker 有所耳闻的朋友都知道,它是一款以容器虚拟化技术为基础的软件,因此在了解有关 Docker 的概念知识和使用方法之前,虚拟化和容器技术是我们不可或缺的基础知识. ...
- java配置xml报cvc-complex-type.2.3: 元素 'beans' 必须不含字符 [子级], 因为该类型的内容类型为“仅元素”
今天测试es-job的时候,启动的时候报了标题中的错误, 经查,原因有二: 一:从网上粘贴过来字符没有对应上,所以子元素property报错,将文字复制到Notepad++等编辑工具,转为UTF-8编 ...
- $ORACLE_HOME/rdbms/demo示例安装
需要手工安装p13390677_112040_Linux-x86-64_6of7.zip,或者win32_11gR2_examples.zip.默认不包含. 从Oracle Database 12c ...
- [c/c++] programming之路（5）、吓人小程序、变量、进制等
一.设计一个吓人的东西 首先创建MFC项目(勾选“基于对话框”后点击完成即可) 添加三个按钮 双击按钮进入响应代码段 void CMFCWindowsDlg::OnBnClickedButton1() ...
- topcoder srm 707 div1
1 构造一个棋盘,长宽n,m不超过50,每个格子为障碍或者非障碍两种,使得从(0,0)到(n-1,m-1)的最短路为给定的值k. 思路:如果k小于等于98,那么一定存在没有障碍的棋盘满足要求.否则,最 ...
- 简单明了的掌握diff命令? 参考: http://www.ruanyifeng.com/blog/2012/08/how_to_read_diff.html
diff是比较两个 文本文件, 或目录,(中名字相同的文件) diff 是按行来比较的, 只要两个对应的行, 不完全一致, 就报告为不同, 否则就视为相同. (一行中任意一点的不同...) 检查时, ...
- 从0开始安装fedora23的笔记-- 以及使用fedora的常规问题
关于安装过程中的笔记本 触摸板 和鼠标的问题? 在安装过程中, 系统只认从usb接口插入的鼠标和触摸板上的 "左键和右键"按钮. 触摸板上的鼠标只支持"移动"的 ...
- FJUT3565 最大公约数之和（容斥）题解
题意:给n,m,求出 思路:题意为求出1~m所有数和n的gcd之和.显然gcd为n的因数.我们都知道gcd(a,b)= c,那么gcd(a/c,b/c)= 1.也就是说我们枚举n所有的因数k,然后去找 ...
- 百度搜索引擎取真实地址-python代码
代码 def parseBaidu(keyword, pagenum): keywordsBaseURL = 'https://www.baidu.com/s?wd=' + str(quote(key ...
- (转载)C#：Enum、Int和String的互相转换，枚举转换
Enum为枚举提供基类,其基础类型可以是除 Char 外的任何整型.如果没有显式声明基础类型,则使用 Int32.编程语言通常提供语法来声明由一组已命名的常数和它们的值组成的枚举.注意:枚举类型的基类 ...