摘要： 之前项目用过Less，现在负责的项目也要使用，所以就总结下Less，也方便以后查看。本文主要是讲浏览器端如何使用Less。 简介： LESS是一种由Alexis Sellier设计的动态层叠样式表语言。LESS 是开源的，其第一个版本由Ruby写成，但在后续的版本当中，Ruby逐渐被替换为JavaScript。受益于JavaScript，LESS可以在客户端上运行（IE6+、Webkit、Firefox），也可以在服务端运行（Node.js、Rhino）。 本质上，LE...
线性渐变可以设置3个参数值：方向、起始颜色、结束颜色。最简单的模式只需要定义起始颜色和结束颜色，起点、终点和方向默认自元素的顶部到底部。下面举例说明： .test{ background:linear-gradient(red, blue);} 上述代码的效果如图5.9所示。 图5.9 最简单的线性渐变效果 如果要在一些旧版本的浏览器（除IE）下可以正常显示如图5.9的效果，则需要添加兼容代码： .test { background:-webkit-linear-gradient(re...
摘要： 前面介绍了less的变量和extend语法，今天在研究下混合属性(Mixin)。混合可以说是less的另一个特征，你可以将通用属性定义在一块，然后使用时直接调用此混合属性。 混合： 在 LESS 中我们可以定义一些通用的属性集为一个选择器，然后在另一个选择器中去调用这些属性. 例如： .a, #b { color: red;}.mixin-class { .a();}.mixin-id { #b();} 编译后 .a, #b { color: red;}.mixin-class ...
摘要： 作为 CSS 的一种扩展，Less 不仅完全兼容 CSS 语法，而且连新增的特性也是使用 CSS 语法。这样的设计使得学习 Less 很轻松，而且你可以在任何时候回退到 CSS。less文件是以less作为文件后缀名，HTML引用时可以像css那样引用，如下： 注意：本文描述的一切都是基于1.4.0版本，除非有特殊标明。 变量： 变量的作用就是把值定义在一个地方，然后在各处使用，这样能让代码更易维护，如下： // Varia...
相比传统的图片背景来说，使用CSS构造背景色不仅可以降低网络传输的开销，更由于其尺寸的可控性受到开发者的青睐。 如设计师设计了一张背景图片作为标题背景，如图5.18所示。对于用电脑浏览网页的用户来说，标题基本不存在折行现象，布局也基本是固定宽度的，因此直接使用设计师给出的背景图即可。但是这个页面主要是在手机上显示，标题根据长度不同可能占1行，也可能占3行，如果采用图片就必须根据不同的情况放不同的背景图，实现...
阴影效果通常用来表现光线投射在物体上的感觉，如果想制作一个如图5.19所示的文字光影效果，就可以使用背景的线性渐变进行构建。 图5.19可以看到有类似光束照射文字的效果，很好地突出了文字。这实现起来很简单，只需要对文字居中，对背景元素设置从中心发散的放射渐变即可，代码如下： // HTML代码赞 // CSS代码：.box{ width: 200px; height: 200px; font-size: 80px; line-height: 200px; ...
阴影效果通常用来表现光线投射在物体上的感觉，如果想制作一个如图5.19所示的文字光影效果，就可以使用背景的线性渐变进行构建。 图5.19可以看到有类似光束照射文字的效果，很好地突出了文字。这实现起来很简单，只需要对文字居中，对背景元素设置从中心发散的放射渐变即可，代码如下： // HTML代码赞 // CSS代码：.box{ width: 200px; height: 200px; font-size: 80px; line-height: 200px; ...
LESS动画优点 快速开发css3动画 采用less mixins写法，不会生成冗余css 已加入主流浏览器前缀，保证最大兼容性 LESS-Animation 部分mixins支持传参，自定义动画幅度 （PS：sublime的less2css插件可能不支持编译本库的一些新写法，建议使用官方less编译、考拉、前端构建工具等方式编译。交流群：145423956） 使用方法 本less文件主要包含两个功能：LESS-Prefixer和LESS-Animation。 下载 _animation.less 文件...
Less是一种动态的样式语言。Less扩展了CSS的动态行为，比如说，设置变量（Variables）、混合书写模式（mixins）、操作（operations）和功能（functions）等等，最棒的是，Less使用了现有的CSS语法，也就是说，你可以直接把你现成的样式文件“style.css”直接改成“style.less”，他也能正常工作。如： Less现在可以在客户端（如：IE+,Webkit,Firefox）和服务器（如node.js）上运行。前面也说过Less是CSS的一种扩展，他不...
使用sublime Text3 的时候，安装less2Css后，和很多人一样以为大功告成，开始要运行编译less文件，结果开始发现 于是乎开始搜索问题和解决方案，然后就有了下面的解决方案1 方案1：通过window path + less.js-windows 的方式（网上可以快速找到这种解决的方式） 注意：window 操作系统下，经常会看到编译less的最后，会弹出一个"for install see less-plugin-clean-css"的error,好像所有的...
趁这几天有空，了解一下css预处理的知识 less简介 Less 是一个Css 预编译器,意思指的是它可以扩展Css语言,添加功能如允许变量(variables),混合(mixins),函数(functions) 和许多其他的技术，让你的Css更具维护性，主题性，扩展性。 Less 可运行在 Node 环境,浏览器环境和Rhino环境.同时也有3种可选工具供你编译文件和监视任何改变。 语法 变量 声明一个变量： @width：100px；.test { width: @width;} 混合 .bor...
这个周学习了Less和Sass这两个css框架，我基本了解了它们各自的语法和特性，并通过两个html网页设计的练习，感受一下它们给我们开发者在进行css网页布局过程中带来的便利。下面是我对它们之间的区别的一些总结。 Less和Sass的相同之处： 1.变量：可以单独定义一系列通用的样式，在需要的时候进行调用。 2.混合（Mixins）：class中的class（讲一个class引入到另一个class，实现class与class之间的继承），还可以带参数的混合，...
最近在和小伙伴讨论如何高效的编写css代码的问题，于是我们想到了使用css的预处理语言。例如（less，sass等）。最后我们决定使用less（相对于其他css预处理语言更简单，语法更接近css）。 先说说什么是less? 简单的说，你可以在你的css文件中使用变量、函数等方式来编写你的css。 less具有哪些功能？ 混入(Mixins)??class中的class； 参数混入??可以传递参数的class，就像函数一样； 嵌套规则??Class中嵌套class，从而...
一. Sass/Scss&Less是什么？Sass (Syntactically Awesome Stylesheets)是一种动态样式语言，语法跟css一样(但多了些功能)，比css好写，而且更容易阅读。Sass语法类似与Haml，属于缩排语法（makeup），用意就是为了快速写Html和Css。Less一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。less英文站需要翻墙...
昨天面试的时候，面试官问我:用过less没? 我：饿。。。。之前听过，具体没研究过。 于是今天决定搞明白这个。 一、什么是less？ Less 等代码无法直接在浏览器中执行，最终还是需要编译成 CSS 或 JS 。它们语法很棒，但是它们的编译方式却不够灵活。官方基本上都是只提供命令行的方式进行文件编译， less 还可以在页面中嵌入一个 less.js 进行在线编译，但这种方法实在是不靠谱。所以大家都喜欢使用图形界面工具来进行...