1.LESS 简介
less是动态的样式表语言,通过简洁明了的语法定义,使编写 CSS 的工作变得非常简单
类似Jquery框架
中文网站: http://www.lesscss.net/
2.编译工具
下载地址http://www.koala-app.com/ 网站和软件都拥有中文翻译 其实是国人开发的
下面软件界面简洁
3.Sublime text3中安装LESS支持
打开sublime text3---Perferences –Package Control---Package Control: install package
等待几秒,就会弹出一个终端,在终端输入你想要安装的插件
输入Less即可
然后关闭
重新打开
在less文件中ctrl+shift+p 解析less文件就好了
假设我们的index.html和main.less文件都在less文件夹下
然后我们将这个文件拖到koala软件中
然后右键设置输出路径
保存到less文件下
其实shige less编译后的css文件
在less中写样式
保存后可以看到main.css自动转化了
4.Less中的注释
/*第一种注释*/
//第二种注释
Less保存后我们看看css中的区别(在koala输出方式是normal下 compress下没区别)
5.Less变量
-@开头
编译后的效果就是下面css当中的情况:
6.Less混合
混合就是less变量和样式的混合使用的写法 看一个例子就懂了
(1)简单混合
注意box类中混合了border类的引用
(2)带参数的混合
(3)带参数的混合并且有默认值
下面写几个例子
7.Less匹配模式
相当于js中的if 满足条件后才能匹配
先来看一个例子效果
效果
工作中我们可能经常写这个三角 上中下的都有 所有就需要匹配模式
下面的两种写法
从上面来看 如果是四种方向我们就写四种 是不是显得代码冗余了呢? 自己看上面的区别只是在于方向变量的不同
改写代码如下
只需要把方向换成@_即可
8.Less运算
任何数字、颜色或者变量都可以参与运算,运算应该被包裹在括号中
注意20后面单位可带可不带
9.Less嵌套规则:
例子1:
例子2:a hover写法 &代表他的上一层选择器
10. @arguments变量 (用的不多)
@arguments包含了所有传递进来的参数,
如果你不单独处理每一个参数的话就可以这样写
11.避免编译
1.有时候我们需要输出一些不正确的css语法或者使用一些less不认识的专有语法
-要输出这样的值我们可以在字符上加上一个~
例如:width:~'calc(100%-35)'
2. !important关键字(层级最高)
-会为所有混合所带来的样式,添加上!important
LESS CSS 总结的更多相关文章
-
Matplotlib数据可视化(3):文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
-
CSS的未来
仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...
-
前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
-
前端css兼容性与易混淆的点
一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...
-
理解CSS外边距margin
前面的话 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...
-
理解CSS视觉格式化
前面的话 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...
-
谈谈一些有趣的CSS题目(十二)-- 你该知道的字体 font-family
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
-
ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章:利用模型类创建视图、控制器和数据库
在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...
-
谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
-
梅须逊雪三分白,雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...
随机推荐
-
pushlet实现服务器端向客户端推送信息
使用Pushlet来实现服务器端向客户端推送信息 1. 实现方式: 有两种实现方式: 1. 通过配置文件来实现定时的从服务器端向客户端推送信息 2. 通过API主动 ...
-
解决ntp的错误 no server suitable for synchronization found
当用ntpdate -d 来查询时会发现导致 no server suitable for synchronization found 的错误的信息有以下2个: 错误1.Server dropped: ...
-
Servlet概念框架
以 Servlet 3.0 源代码为基础.Servlet 是 Javaweb 应用的基础框架,犹如孙子兵法之于作战指挥官,不可不知. 概念框架 机制: 事件 Event, 监听器 Listener 数 ...
-
实现cookie跨域访问
需求:A系统(www.a.com)里设置一个浏览器cookie,B系统(www.b.com)需要能够访问到A设置的cookie. 通过HTML SCRIPT标签跨域写cookie: 由于html的sc ...
-
Linq:切勿使用 Count() >; 0 来判断集合非空
原文(http://www.cnblogs.com/ldp615/archive/2011/12/11/2284154.html) Linq 出现之前,我们通常使用下面的方式来判断集合是否非空,即集合 ...
-
决策树ID3算法[分类算法]
ID3分类算法的编码实现 <?php /* *决策树ID3算法(分类算法的实现) */ /* *求信息增益Grain(S1,S2) */ //-------------------------- ...
-
大佬RQY真的强
今天听了大佬RQY的讲话,做一下总结吧(这里就不吹了,dalao不需要吹) 第一点,基础真的很重要.什么是基础呢?就是你今年学的觉得难到爆啊什么鬼题啊这是我学过的最zz的东西啊怎么会有这种东西啊&am ...
-
There is no session with id XXX
系统采用 shiro + redis + spring来做的权限控制系统. 登录时报 there is no session with XXX 跟踪断点发现,系统查询session时,查不到red ...
-
20170907wdVBA_GetCellsContentToExcel
'WORD 加载项 代码模板 Dim cmdBar As CommandBar, cmdBtn As CommandBarControl Const cmdBtnCap As String = &qu ...
-
使用DotNetBarcode制作基本常用条码
核心代码: /// <summary> /// 打印一维码 /// </summary> /// <param name="codeText"> ...