来认识下less css

简介

感觉自己都out了，跟不上web时代的潮流了，前不久才刚接触这玩意，发觉lesscss在某些方面还挺有用的，说白了这东西就是一种动态的样式语言，语法类似于css，可以像java那样进行编译，生成你想要的对应css，并且less css扩展了css的动态行为。如，它可以设置变量（variables）、支持混合书写模式（mixins）、支持嵌套规则（nested rules）、也可像js那样进行属性值的操作（operations）、像js函数那样传递参数（functions）、也具有变量的作用域（scope）等。

运行环境

lesscss可以在客户端，也可称浏览器端（IE+、Webkit、Firefox）、服务器端（node.js ）上运行。

客户端只需引入相关文件即可：如下所示

<link rel="stylesheet/less" type="text/css" href="less/demo.less">
<script src="js/less.js" type="text/javascript"></script>

其中less文件是你自己编写的less文件，强烈推荐使用sublime text3编辑器进行编辑，高亮的语法以及强大的插件支持不得不让人爱不释手，下载地址：sublimetext3官网

less可到官网上下载，当前吧版本是1.4.2：less官网，还要注意这两个文件的引入顺序。

服务器端是通过nodejs的npm管理包来对less进行安装和编译的，具体nodejs这东西怎么用，最近也在探索中，没linux环境，只好在win7环境下装个unix模拟器cygwin来安装nodejs了。又有得搞了，开始node吧。

特性以及使用

一、变量

less中的变量主要用于定义一些通用的样式，变量还具有计算的功能，还可以定义一个变量名为变量，变量只能定义一次，并且会发生覆盖的现象，如下所示：

@color: #ccc; // 定义变量
.demo { // 应用到元素中color: @color;
}// 变量计算功能
@color: #ccc;
@light-color: @color + #111;
.demo {color: @light-color;
}// 定义一个变量名为变量
@color: #ccc;
@highlight: "color";
.demo {color: @@highlight;
}// 在less中的变量实际上就是一个“常量”，因为它们只能被定义一次
@color: #ccc;
@highlight: "color";
@color: #333; // 后面的@color覆盖前面的@color，所以color输出为#333
.demo {color: @@highlight;
}

具体经编译后生成的css是咋样的，在这就不列出了，不然的话会搞得一大沓东西，有兴趣的童鞋可以自己动手测试下。

二、混合模式

说白了，less的混合模式就是把一个class类作为变量引入到另一个class类中，还可以带参数调用，如下所示：

// 定义一个类
.rounded-corners (@radius: 5px) {border-radius: @radius;-webkit-border-radius: @radius;-moz-border-radius: @radius;
}
// 定义的类应用到另一个类中
#header {.rounded-corners; //使用默认参数5px
}
#footer {.rounded-corners(10px);//把10px传递给变量@radius
}// 混合还有一个重要的变量：@arguments，该参数表示引用所以的参数变量
.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);
}

注：上面的这些less例子是来自官网的，只是自己把它整理了一下。

三、嵌套规则

less中的嵌套就是在一个选择器中嵌套另一个选择器来实现继承，类似于DOM树的层次结构，使代码更简洁，如下所示：

#header {display: block;h1 {font-size: 26px;font-weight: bold;a {text-decoration: none;color: #f36;//注意"&"的用法：嵌套中有"&"时解析的是同一个元素或此元素的伪类，没有"&"时解析的是后代元素&:hover { text-decoration: underline;color: #63f;}}}p {font-size: 12px;}
}
// "&"的用法：
#header {&.fl {float: left;}.ml5 {margin-left: 5px;}
}
/*编译生成的css
#header.fl {float: left;}
#header .ml5 {margin-left: 5px;}
*/

四、操作

less也具有操作功能，可针对任何数字、颜色、变量的操作，可以对其进行加、减、、乘、除或者更复杂的综合运算。如下所示：

@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%);
}
/*编译后生成的css
#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;
}
/*编译后生成的css
#header {color: #222222;height: 60%;
}
*/// 不同单位的操作
@var: 1px + 5;  //Less最终解析的值是“6px”
@size: 20px;
#header {border: @var solid red;width: @var + 50 * 2;height: (@var + 5) * 4;
}
/*编译生成的css
#header {border: 6px solid red;height: 120px;width: 100px;
}
*/

五、函数

less的function功能主要是针对Color funtions，Less提供了多种变换颜色的功能，如下所示：

@base: #f04615;
#header {color: @base;background-color: fadein(@base, 10%);h1 {color: lighten(@base,20%);background-color: lighten(fadeout(@base,20%),5%);a {color: darken(@base,50%);background-color: spin(@base,10);&:hover {color: saturate(@base,30%);background-color: fadein(spin(@base,-5),20%);}}}p {color: desaturate(@base,60%);}
}
/*编译后生成的css
#header {background-color: #F04615;color: #F04615;
}
#header h1 {background-color: rgba(242, 89, 45, 0.8);color: #F69275;
}
#header h1 a {background-color: #F06B15;color: #060200;
}
#header h1 a:hover {background-color: #F03415;color: #FF3E06;
}
#header p {color: #A56F60;
}
*/

六、命名空间

less的命名空间类似于js的命名空间，把一些变量或mixins组织起来，并将其封装，用的时候再提取出来，如下所示：

// 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;
}

七、变量作用域(范围)

less中的变量也具有作用域，类似于js中的变量作用域环境，如下所示：

@var: red;
#page {@var: white;#header {color: @var; // white}
}
#footer {color: @var; // red
}

另外关于less的注释方式：

1、单行注释类似于js的注释，使用"//"分隔符
2、多行注释类似于css的注释，使用"/*...*/"

结语

以上只是对less的主要特性做了个总结，对于"服务器端的使用”，"模式匹配”，“导入文件和变量”，“字符串插值”等一些深入的东西还需慢慢探讨，任重道远。

转载于:https://www.cnblogs.com/cyStyle/p/lesscss.html

来认识下less css相关推荐

浏览器下的CSS透明度
浏览器下的CSS透明度元素透明度时常是个恼人的问题,下面这种方式可以实现所有浏览器下的透明度设置: .transparent {zoom: 1;filter: alpha(opacity=50);o ...
如何在不使用任何图像或跨度标签的情况下通过CSS在UL / LI html列表中设置子弹颜色[复制]
本文翻译自:How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags [du ...
scss2css vscode设置_VSCode下让CSS文件完美支持SCSS或SASS语法方法
VSCode下让CSS文件完美支持SCSS或SASS语法方法习惯Webpack + PostCSS后, 通常PostCSS都是直接对CSS文件进行处理, 但是大部分习惯SCSS/SASS/LESS的 ...
[css] 解释下为什么css的reset不建议直接这么写：*{ margin:0； padding:0；}？
[css] 解释下为什么css的reset不建议直接这么写:*{ margin:0; padding:0;}? 1.*为通配符,使用通配符,即全局范围遍历,耗费浏览器效率,增大负荷: 2.会影响后面的 ...
css不换行省略号没作用,flex布局下，css设置文本不换行时，省略号不显示的解决办法...
大致是有一个 main 容器是 flex 布局,左边一个 logo 固定宽高,右边 content 动态宽度. a name a info Lorem ipsum dolor sit amet, co ...
php css下划线,css下划线如何设置？css设置文字下划线的方法介绍
在网页中默认情况下文字字体是没有下划线样式的,但是有时候我们在网页中会看到不是链接的文字下面会有一行下划线,那么这个下划线样式是怎么实现的呢?本篇文章就来给大家介绍一下css设置文字下划线的方法,接下 ...
IE+调试修改html,IE下调试CSS与JS
IE下调试CSS与JS 启动调试工具:IE浏览器9.0 ,菜单〉〉F12开发人员工具--. 1. 调试CSS 1.1找到页面元素 "HTML" TAB页,展开HTML元素 ...
css div漂浮向下,DIV+CSS固定底部的漂浮广告
在项目中.为了解决多浏览器兼容的问题..ie6很头痛.div经常出现浮动.... 然后在网上找了一个例子.... css代码如下: body { background-image:url(text.t ...
有意思：textarea resize属性下纯CSS交互效果
一.众所周知的众所周知,文本域(textarea)在FireFox或Chrome浏览器下,右下角有个可以拖拽的标志. 有人保留,有人嫌碍事,直接resize:none;掉,但是,估计没人利用整个儿做 ...
多浏览器下，CSS截断功能。
在多浏览器下,往往采用CSS截断,在IE浏览器中可实现,但是在Firefox,Chrome下,往往不能实现截断处理,导致FF下,显示半个字符样式.为解决此问题,查询好久终于在坛子中找到一个好的方式. ...

来认识下less css

来认识下less css相关推荐

最新文章

热门文章