大前端学习笔记整理【四】LESS基础
第一次接触CSS预编译,然后对比后发现其实less的上手容易度确实比sass高不少,再加上公司项目也是使用的less。所以想想还是根据网上的各种教程,整理出来了一些比较基础的、而且比较能让我们这种初学者快速上手的例子。
菜鸡一只,代码要是有错或者表达不清的地方,请各位批评指正!
那么,现在我们就开始正文部分了。
<link rel="stylesheet/less" href="less/style.less" />
<link rel="stylesheet/less" type="text/css" href="less/styles.less">
<script src="js/less.js" type="text/javascript"></script>
/*======== 定义变量===========*/
@color: #4d926f;
/*======== 应用到元素中 ========*/
#header {
color: @color;
}
h2 {
color: @color;
}
/*======= Less 编译成 css ======*/
#header {
color: #4d926f;
}
h2 {
color: #4d926f;
}
@nice-blue: #5b83ad;
@light-blue: @nice-blue + #111;
#header {
color: @light-blue;
}
#header {color: #6c94be;}
@color: #253636;
@highlight: "color";
@color: #ff3636;
#header {color: @highlight;}
#header{color:#ff3636}
代码中可以看出,最后一次定义的@color覆盖了前面的内容
/*========= 定义一个类 ===========*/
.roundedCorners(@radius:5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
/*========== 定义的类应用到另个一个类中 ===========*/
#header {
.roundedCorners;
}
#footer {
.roundedCorners(10px);
}
#header {
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
#footer {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
/*========== 定义一个规则,并且不设置默认参数值 ============*/
.borderRadius(@radius){
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
/*============ 应用到元素中 ============*/
#header {
.borderRadius(10px); /*把10px传给变量@radius*/
}
.btn {
.borderRadius(3px);/*把3px传给变量@radius*/
}
#header {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.btn {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.borderRadius(@radius:5px){
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
.btn {
.borderRadius;
}
.btn {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.wrap(){
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}
pre {
.wrap;
}
编译后的CSS如下:
pre {
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}
Mixins还有一个重要的变量:@arguments。@arguments在Mixins中具是一个很特别的参数,当Mixins引用这个参数时,他
.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
box-shadow: @arguments;
}
#header {
.boxShadow(2px,2px,3px,#f36);
}
#header {
-moz-box-shadow: 2px 2px 3px #FF36;
-webkit-box-shadow: 2px 2px 3px #FF36;
box-shadow: 2px 2px 3px #FF36;
}
<div id="header">
<h1><a href="">W3cplus</a></h1>
<p>记述前端那些事——引领Web前沿</p>
</div>
#header {
display: inline;
float: left;
h1 {
font-size: 26px;
font-weight: bold;
a {
text-decoration: none;
color: #f36;
&:hover {
text-decoration: underline;
color: #63f;
}
}
}
p {
font-size: 12px;
}
}
#header {
display: inline;
float: left;
}
#header h1 {
font-size: 26px;
font-weight: bold;
}
#header h1 a {
color: #FF3366;
text-decoration: none;
}
#header h1 a:hover {
color: #6633FF;
text-decoration: underline;
}
#header p {
font-size: 12px;
}
a {
color: red;
text-decoration: none;
&:hover {
color: blue;
text-decoration: underline;
}
}
a {
color: red;
text-decoration: none;
}
a:hover {
color: blue;
text-decoration: underline;
}
#header {
&.fl{
float: left;
}
.mln {
margin-left: 0;
}
}
#header.fl{float: left;}
#header .mln {margin-left: 0;}
@the-border: 1px;
@base-color: #111;
@red: #842210;
#header {
color: @base-color *3;
border: 1px solid desaturate(@red,100%);
border-width: @the-border @the-border*2 @the-border*3 @the-border;
border-color:desaturate(@red,100%) @red lighten(@red, 10%) darken(@red, 30%);
}
#header {
color: #333;
border: 1px solid #4a4a4a;
border-width: 1px 2px 3px 1px;
border-color: #4A4A4A #842210 #B12E16 #000000;
}
@base: 5%;
@filler: @base*2;
@other: @base + @filler;
#header {
color: #888 / 4;
height: 100% / 2 + @filler;
}
#header {
color: #222222;
height: 60%;
}
@var: 1px + 5;
#header {
border: @var solid red;
}
#header {border: 6px solid red;}
@var: 20px;
#header {
width: @var + 5 * 2;
height: (@var + 5 ) * 2;
}
#header {
height: 50px;
width: 30px;
}
@base: #f04615;
#header {
color: @base;
h1 {
color: lighten(@base,20%);
a {
color: darken(@base,50%);
&:hover {
color: saturate(@base,30%);
}
}
}
p {
color: desaturate(@base,60%);
}
}
#header {
color: #F04615;
}
#header h1 {
color: #F69275;
}
#header h1 a {
color: #060200;
}
#header h1 a:hover {
color: #FF3E06;
}
#header p {
color: #A56F60;
}
@color: #f36;
#header {
background-color: hsl(hue(@color),45%,90%);
}
#header {background-color: #F1DAE0;}
ps.这里其实我需要给自己写一个类似于书签之类的标注吧...毕竟这块对于颜色的控制确实不算搞的太明白,所以还是换成红色文字提醒下自己,多看几遍,多写两行代码。
#bundle {
.button () {
display: block;
border: 1px solid black;
&:hover { background-color: white }
}
.tab { ... }
.citation { ... }
}
#header a {
color: orange;
#bundle > .button;
}
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
#footer {
color: @var; // red
}
大前端学习笔记整理【四】LESS基础的更多相关文章
- 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案
概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...
- 大前端学习笔记整理【七】HTTP协议以及http与https的区别
前言 还是老样子,新博客开始前总是想先啰嗦几句...HTTP协议其实在当初学习java时老师就有提过...但是...反正就那么过去了... 这段时间公司的项目正好要求做https的转换和迁移,然后自己 ...
- 大前端学习笔记整理【五】关于JavaScript中的关键字——this
写在前面 工作有那么一段时间了,但是在工作中,发现自己的理论知识还是有所欠缺.特别是在javascript上,很多东西其实自己属于知道要用这个,但是不知道为什么要这么用...这种情况很是尴尬了,所以写 ...
- 大前端学习笔记整理【五】rem与px换算的计算方式
前言 这段时间的小项目中算是真正意义上使用了rem来进行移动端的页面布局,项目结束了我反思了一下之前的对于rem的使用...原来我以前对rem用法完全是在搞笑啊!!结合这次这个小项目,我觉得我也有必要 ...
- 大前端学习笔记整理【二】CSS视觉格式化模型
1. 概念 在视觉格式化模型中,文档树中的每个元素都将会根据盒模型产生零到多个盒子.这些盒子的布局由如下因素决定: 盒子的尺寸和类型 定位策略(正常文档流,浮动或者绝对定位) 和文档树中其他元素的关系 ...
- 大前端学习笔记整理【六】this关键字详解
前言 在上一篇博客里我总结了下辨认this指向的四种方式,但是有师兄抛出一个问题来,我发现那些this的指向并不能说明更复杂的情况,先看下这段代码 var a = { name: 'a', getNa ...
- 大前端学习笔记【七】关于CSS再次整理
如果你在日常工作中使用 CSS,你的主要目标可能会重点围绕着使事情“看起来正确”.如何实现这一点经常是远不如最终结果那么重要.这意味着比起正确的语法和视觉结果来说,我们更少关心 CSS 的工作原理. ...
- 大数据学习笔记——Java篇之基础知识
Java / 计算机基础知识整理 在进行知识梳理同时也是个人的第一篇技术博客之前,首先祝贺一下,经历了一年左右的学习,从完完全全的计算机小白,现在终于可以做一些产出了!可以说也是颇为感慨,个人认为,学 ...
- Python学习笔记整理(四)Python中的字符串..
字符串是一个有序的字符集合,用于存储和表现基于文本的信息. 常见的字符串常量和表达式 T1=‘’ 空字符串 T2="diege's" 双引号 T3=""&quo ...
随机推荐
- 微信官方demo(php)
<?php /** * wechat php test */ //define your token define("TOKEN", "weixin"); ...
- Replace Pioneer 注册
批量文本替换工具,Replace Pioneer 注册:http://www.mind-pioneer.com
- @MappedSuperclass注解的使用说明
转载自:http://blog.sina.com.cn/s/blog_7085382f0100uk4p.html 基于代码复用和模型分离的思想,在项目开发中使用JPA的@MappedSuperclas ...
- Hibernate—— 一对多 和 多对多关联关系映射(xml和注解)总结(转载)
One to Many 映射关系 多对一单向外键关联(XML/Annotation) 一对多单向外键关联(XML/Annotation) 懒加载和积极加载 一对多双向外键关联(XML/Annotati ...
- Hibernate和Struts2整合的增、删、改、查
1. 新建一个Web项目,准备好jar包和配置文件. 2. web.xml文件中添加过滤器 <?xml version="1.0" encoding="UTF-8& ...
- Unity3D 物体移动方式
1. 简介 在Unity3D中,有多种方式可以改变物体的坐标,实现移动的目的,其本质是每帧修改物体的position. 2. 通过Transform组件移动物体 Transform 组件用于描述物体在 ...
- Java中的值传递和引用传递
这几天一直再纠结这个问题,今天看了这篇文章有点思路了,这跟C++里函数参数为引用.指针还是有很大区别. 当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里 ...
- cookie小记
清除cookie可用下面2种的方法.注意如果要清除的cookie的域是指定的,则这里也应该指定,否则无效 1: Response.Cooki ...
- SASS学习笔记(1)
序 之前稍微看过SASS的文档,但是由于工作中没有涉及,渐渐的搁置了.最近公司新招来一个热情似火的前端,不管什么技术,不管自己能不能hold住,都提出来用一用再说.这样对我也好,跟着这个哥们混妥妥的长 ...
- java_method_数据去重
/** * 判断list本身是否有重复数据和标题 * * @param list * @return newList 返回没有重复数据的list */ public List<String[]& ...