LESS CSS 总结

时间:2022-03-12 18:18:45

1.LESS 简介

less是动态的样式表语言,通过简洁明了的语法定义,使编写 CSS 的工作变得非常简单
类似Jquery框架

中文网站: http://www.lesscss.net/

2.编译工具

下载地址http://www.koala-app.com/ 网站和软件都拥有中文翻译 其实是国人开发的

下面软件界面简洁

LESS CSS 总结

3.Sublime text3中安装LESS支持

打开sublime text3---Perferences –Package Control---Package Control: install package

等待几秒,就会弹出一个终端,在终端输入你想要安装的插件
输入Less即可
然后关闭
重新打开

在less文件中ctrl+shift+p 解析less文件就好了

LESS CSS 总结

假设我们的index.html和main.less文件都在less文件夹下
然后我们将这个文件拖到koala软件中

LESS CSS 总结

然后右键设置输出路径
保存到less文件下
其实shige less编译后的css文件

LESS CSS 总结

在less中写样式
保存后可以看到main.css自动转化了

4.Less中的注释

/*第一种注释*/

//第二种注释

Less保存后我们看看css中的区别(在koala输出方式是normal下 compress下没区别)

LESS CSS 总结

5.Less变量

-@开头

LESS CSS 总结编译后的效果就是下面css当中的情况:

LESS CSS 总结

6.Less混合

混合就是less变量和样式的混合使用的写法 看一个例子就懂了

(1)简单混合

LESS CSS 总结注意box类中混合了border类的引用

(2)带参数的混合

LESS CSS 总结

(3)带参数的混合并且有默认值

LESS CSS 总结

下面写几个例子

LESS CSS 总结LESS CSS 总结

7.Less匹配模式

相当于js中的if 满足条件后才能匹配

先来看一个例子效果

LESS CSS 总结效果LESS CSS 总结

工作中我们可能经常写这个三角 上中下的都有 所有就需要匹配模式

LESS CSS 总结

下面的两种写法

LESS CSS 总结LESS CSS 总结

从上面来看 如果是四种方向我们就写四种 是不是显得代码冗余了呢? 自己看上面的区别只是在于方向变量的不同

改写代码如下

LESS CSS 总结只需要把方向换成@_即可

8.Less运算

任何数字、颜色或者变量都可以参与运算,运算应该被包裹在括号中

LESS CSS 总结 注意20后面单位可带可不带

 

9.Less嵌套规则:

例子1:

LESS CSS 总结

LESS CSS 总结
LESS CSS 总结

例子2:a hover写法 &代表他的上一层选择器

LESS CSS 总结

10. @arguments变量 (用的不多)

@arguments包含了所有传递进来的参数,

如果你不单独处理每一个参数的话就可以这样写

LESS CSS 总结

11.避免编译

1.有时候我们需要输出一些不正确的css语法或者使用一些less不认识的专有语法

-要输出这样的值我们可以在字符上加上一个~

    例如:width:~'calc(100%-35)'

2. !important关键字(层级最高)

-会为所有混合所带来的样式,添加上!important

LESS CSS 总结

LESS CSS 总结的更多相关文章

  1. Matplotlib数据可视化(3):文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. CSS的未来

    仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...

  3. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  4. 前端css兼容性与易混淆的点

    一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...

  5. 理解CSS外边距margin

    前面的话   margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...

  6. 理解CSS视觉格式化

    前面的话   CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...

  7. 谈谈一些有趣的CSS题目(十二)-- 你该知道的字体 font-family

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  8. ASP&period;NET MVC with Entity Framework and CSS一书翻译系列文章之第二章:利用模型类创建视图、控制器和数据库

    在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...

  9. 谈谈一些有趣的CSS题目(十一)-- reset&period;css 知多少?

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  10. 梅须逊雪三分白,雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

随机推荐

  1. pushlet实现服务器端向客户端推送信息

    使用Pushlet来实现服务器端向客户端推送信息 1.   实现方式: 有两种实现方式: 1.         通过配置文件来实现定时的从服务器端向客户端推送信息 2.         通过API主动 ...

  2. 解决ntp的错误 no server suitable for synchronization found

    当用ntpdate -d 来查询时会发现导致 no server suitable for synchronization found 的错误的信息有以下2个: 错误1.Server dropped: ...

  3. Servlet概念框架

    以 Servlet 3.0 源代码为基础.Servlet 是 Javaweb 应用的基础框架,犹如孙子兵法之于作战指挥官,不可不知. 概念框架 机制: 事件 Event, 监听器 Listener 数 ...

  4. 实现cookie跨域访问

    需求:A系统(www.a.com)里设置一个浏览器cookie,B系统(www.b.com)需要能够访问到A设置的cookie. 通过HTML SCRIPT标签跨域写cookie: 由于html的sc ...

  5. Linq:切勿使用 Count&lpar;&rpar; &gt&semi; 0 来判断集合非空

    原文(http://www.cnblogs.com/ldp615/archive/2011/12/11/2284154.html) Linq 出现之前,我们通常使用下面的方式来判断集合是否非空,即集合 ...

  6. 决策树ID3算法&lbrack;分类算法&rsqb;

    ID3分类算法的编码实现 <?php /* *决策树ID3算法(分类算法的实现) */ /* *求信息增益Grain(S1,S2) */ //-------------------------- ...

  7. 大佬RQY真的强

    今天听了大佬RQY的讲话,做一下总结吧(这里就不吹了,dalao不需要吹) 第一点,基础真的很重要.什么是基础呢?就是你今年学的觉得难到爆啊什么鬼题啊这是我学过的最zz的东西啊怎么会有这种东西啊&am ...

  8. There is no session with id XXX

    系统采用 shiro + redis + spring来做的权限控制系统.   登录时报 there is no session with XXX 跟踪断点发现,系统查询session时,查不到red ...

  9. 20170907wdVBA&lowbar;GetCellsContentToExcel

    'WORD 加载项 代码模板 Dim cmdBar As CommandBar, cmdBtn As CommandBarControl Const cmdBtnCap As String = &qu ...

  10. 使用DotNetBarcode制作基本常用条码

    核心代码: /// <summary> /// 打印一维码 /// </summary> /// <param name="codeText"> ...