标签：Less color 前端 less header radius 模块 border
引文
Less是一种动态的样式语言。Less扩展了CSS的动态行为，比如说，设置变量（Variables）、混合书写模式（Mixins）、操作 （Operations）和功能（Functions）等等，最棒的是，Less使用了现有的CSS语法，也就是说，你可以直接把你现成的样式文件 “style.css”直接改成“style.less”，他也能正常工作。如下。
<link rel="stylesheet/less" href="less/style.less" />
Less现在可以在客户端（如：IE+,Webkit,Firefox）和服务器（如node.js）上运行。前面也说过Less是CSS的一种扩 展，他不但向后兼容，而且在现有的CSS语法基础上增加许多额外的功能。如果你具有一定的CSS语法基础，学习Less将是一件轻而易举的事情，那么我们 现在就开始吧，首先一起看一段用Less语法的CSS代码。
.box-shadow (@x: 0, @y: 0, @blur: 1px, @alpha) {
@val: @x @y @blur rgba(0, 0, 0, @alpha);
box-shadow: @val;
-webkit-box-shadow: @val;
-moz-box-shadow: @val;
}
.box { @base: #f938ab;
color: saturate(@base, 5%);
border-color: lighten(@base, 30%);
div { .box-shadow(0, 0, 5px, 0.4) }
}
看到这里或许你现在并不知道这些代码表示的是什么意思？不过不要紧张，我们会一步一步一介绍这些语法表示的是什么意思。别的先不说，我们一起动起来吧。
如何使用Less
要成功使用Less，需要一个脚本的支持，这个脚本我们把他叫做less.js。大家可以【点击这里】下载这个less脚本,并放到你的项目中。下载好以后我们需要把less.js引用到文件中，引用方式很简单。
<link rel="stylesheet/less" type="text/css" href="less/styles.less"> <script src="js/less.js" type="text/javascript"></script>
Less包含哪些
变量
Less中的变量充许你在样式中的某个地方对常用的值进行定义，然后应用到样式中，这样只要改变你定义的变量参数值就可以达到改变全局的效果，我们先来看一段代码。
Less代码：
/*======== 定义变量===========*/
@color: #4d926f;
/*======== 应用到元素中 ========*/
#header {
color: @color;
}
h2 {
color: @color;
}
Less编译后：
/*======= Less 编译成 css ======*/
#header {
color: #4d926f;
}
h2 {
color: #4d926f;
}
Less中的变量还具有计算功能，如下。
Less代码：
@nice-blue: #5b83ad;
@light-blue: @nice-blue + #111;
#header {
color: @light-blue;
}
编译后：
#header {color: #6c94be;}
我们还可以定义一个变量名为变量，如下。
Less：
@color: #253636;
@highlight: "color";
#header {color: @@highlight;}
编译后：
#header {color: #253636;}
注：在Less中的变量实际上就是一个“常量”，因为它们只能被定义一次。著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://www.w3cplus.com/css/less © w3cplus.com
注：在Less中的变量实际上就是一个“常量”，因为它们只能被定义一次。
混合类—Mixin（类似于函数）
混入其实就是一种嵌套，它充许你将一个类嵌入到另一个类中，而被嵌入的这个类也称为是一个变量。换句话说，你可以用一个类定义CSS，然后把整个为当作一个变量来使用，嵌入到另一个类中当作他的属性；另外混入也像一个带有参数的functions。
混入(Mixin)有一个名词叫“混入参数（Parametric Mixins）”，上面也说过。Less具有一个特殊类型的规则集，那就是一个类可以当作另一个元素的属生值，并且还可以接受其自己的参数，我们来看一个典型的实例。
Less：
/*========== 定义一个规则，并且不设置默认参数值 ============*/
.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;
}
我们还可以给Mixins的参数定义一人默认值，如。
Less：
.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;
}
还有一种方法就是给Mixins不定任何参数，特别是在你想隐藏输出的CSS规则，但又想在别的规则中包含他的属性，使用这种不带参数的Mixins将非常有用的，我们来看一段代码。
Less：
.wrap(){
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}
pre {
.wrap;
}
编译后：
pre {
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}
Mixins还有一个重要的变量：@arguments。@arguments在Mixins中具是一个很特别的参数，当Mixins引用这个参数时，他将表示所有的变量，当你不想处理个别的参数时，这个将很有用，我们来看一个阴影的实例。
Less：
.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;
}
嵌套
嵌套规则主要是针对一多层元素的样式规则写法，以前我们在多层元素中写样式，要么从头选下来，要么另外给这个元素加上类名或id名，但在Less中我们不需要这样操作了，我们只要使用他的嵌套规则就可以完成，我们来看一个简单的实例。
<div id="header">
<h1><a href="">W3cplus</a></h1>
<p>记述前端那些事——引领Web前沿</p>
</div>
Less：
#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;
}
使用Less的嵌套规则让你的CSS代码更简洁，因为他的写法就是模仿HTML的DOM结构来写的。
大家注意了，这里的 "&" 很重要，在Less中嵌套书写中有没有&区别是完全不一样的效果，有 "&" 时解析的是同一个元素或此元素的伪类，没有 & 解析是后代元素。
运算（Operation）
Operations（直译“动作”）他可以让你对元素的属性值，颜色进行四则运算：加、减、乘、除。
Less：
@base: 5%;
@filler: @base*2;
@other: @base + @filler;
#header {
color: #888 / 4;
height: 100% / 2 + @filler;
}
编译后：
#header {
color: #222222;
height: 60%;
}
函数（Function）
1、Color函数
Less中还提供了一个Color Functions，他具有多种变换颜色的功能，先把颜色转换成HSL色，然后在此基础上进行操作，具体包括以下几种。
lighten(@color, 10%); // return a color which is 10% *lighter* than @color
darken(@color, 10%); // return a color which is 10% *darker* than @color
saturate(@color, 10%); // return a color 10% *more* saturated than @color
desaturate(@color, 10%); // return a color 10% *less* saturated than @color
fadein(@color, 10%); // return a color 10% *less* transparent than @color
fadeout(@color, 10%); // return a color 10% *more* transparent than @color
spin(@color, 10); // return a color with a 10 degree larger in hue than @color
spin(@color, -10); // return a color with a 10 degree smaller hue than @color
使用这种functions方法很简单。
@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%);
}
}
编译后：
#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;
}
2、Math函数
LESS提供了一组方便的数学函数，你可以使用它们处理一些数字类型的值:
round(1.67); // returns `2`
ceil(2.4); // returns `3`
floor(2.6); // returns `2`如果你想将一个值转化为百分比，你可以使用percentage 函数:
percentage(0.5); // returns `50%命名空间
有时候，你可能为了更好组织CSS或者单纯是为了更好的封装，将一些变量或者混合模块打包起来, 你可以像下面这样在#bundle中定义一些属性集之后可以重复使用。
#bundle {
.button () {
display: block;
border: 1px solid black;
background-color: grey;
&:hover { ">
}
.tab { ... }
.citation { ... }
}
你只需要在 #header a中像这样引入 .button:
#headera {
color: orange;
#bundle > .button;
}
注释
与js类似，单行注释用“//”，单行注释用“/*...*/”。
导入Less
在开发阶段，我们可以将不同的样式放到多个文件中，最后通过@import 的方式合并。意思就是，当出现多个 less 文件时，怎么引用它们。这个很好理解， css 文件可以有很多个，less文件也可以有很多个。
1）定义一个被引用的less文件，名为_button1.less：
PS：被引用的less文件，我们习惯在前面加下划线，表示它是部分文件。
@btnColor: red;
.btn{ line-height: 100px; color: @btnColor; }
2）导入
@import url('_button1.less:'); //这里的路径写的是相对路径
body{
width: 1024px;
}
编译后：
.btn {
line-height: 100px;
color: red;
}
body {
width: 1024px;
}
使用Less
方法1
Less 的编译，依赖于 NodeJS 环境。因此，我们需要先安装 NodeJS。
1、安装Node.js
去 Node.js 的官网下载安装包。
安装完成后，配置环境变量，在 path 变量中追加安装路径：;C:\Program Files\nodejs。
PS：可能会自动添加了环境变量。
在 cmd 命令行，输入"node -v"，可以查看 node.js 的版本。
2、安装lessc编译环境
由于新版的NodeJS已经集成了npm，所以之前npm也一并安装好了。同样可以使用cmd命令行输入"npm -v"来测试是否成功安装。
可以输入下面的命令安装：npm install -g less
然后在 cmd 中输入"lessc -v"，如果能看到版本信息，说明 less编译环境安装成功。
3、将less文件编译为css文件
在 less 所在的路径下，输入 lessc xxx.less，即可编译成功。
如果输入 lessc xxx.less > ..\xx.css，表示输出到指定路径。
方法2
客户端的使用其实好简单，我们最开始引用的就是客户端的使用方法，使用这种方法前提条件是需要一个 less.js 的脚本支持，大家可以先到点击下载less.js然后把他引用到页面的head中。
<link rel="stylesheet/less" type="text/css" href="styles.less"> //less文件必须放脚本js文件的前面！！ <script src="less.js" type="text/javascript"></script>
PS：其中src所指定的路径是你项目中的相对路径，当然你也可以把这个js放到你认为安全可用的服务器上，换成绝对路径也是可以的。接着我们就需要把less文件引进到项目中，这个引入的方式和css方式是一样的，只是有一点点不同，css中的是rel="stylesheet"而less的却是rel="stylesheet/less"。
标签：Less,color,前端,less,header,radius,模块,border 来源： https://www.cnblogs.com/ShankedFlur/p/13610758.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。