动态样式语言—LESS基础知识
Posted tuna
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了动态样式语言—LESS基础知识相关的知识,希望对你有一定的参考价值。
CSS是一门非程序式语言,缺少逻辑性,不便于维护
LESS在CSS现有语法的基础上,为CSS加入程序式语言的特性
引入了变量、混入、运算、函数等功能,大大简化CSS的编写,降低了CSS的维护成本
LESS包含一套语法和一个解析器,用户用它的语法生成样式规则,这些规则通过解析器后生成CSS文件
1.变量
以{}划分作用域,变量从里往外进行查找
@width : 20px; #homeDiv { @width : 30px; #centerDiv{ width : @width;// 此处应该取最近定义的变量 width 的值 30px } } #leftDiv { width : @width; // 此处应该取最上面定义的变量 width 的值 20px }
#homeDiv #centerDiv { width: 30px; } #leftDiv { width: 20px; }
2.混入(实现多重继承)
将一个类嵌套到另一个类中使用
// 定义一个样式选择器 .roundedCorners(@radius:5px) { //默认值为5 -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; } // 在另外的样式选择器中使用 #header { .roundedCorners; } #footer { .roundedCorners(10px); }
#header { -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } #footer { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }
混入参数
// 定义一个样式选择器 .borderRadius(@radius){ -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; } // 使用已定义的样式选择器 #header { .borderRadius(10px); // 把 10px 作为参数传递给样式选择器 } .btn { .borderRadius(3px);// // 把 3px 作为参数传递给样式选择器 }
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); }
支持命名空间,防止重名问题:
#mynamespace { .home {...} .user {...} }
嵌套规则:
<div id="home"> <div id="top">top</div> <div id="center"> <div id="left">left</div> <div id="right">right</div> </div> </div>
#home{
color : blue;
width : 600px;
height : 500px;
border:outset;
#top{
border:outset;
width : 90%;
}
#center{
border:outset;
height : 300px;
width : 90%;
#left{
border:outset;
float : left;
width : 40%;
}
#right{
border:outset;
float : left;
width : 40%;
}
}
}
&:
a {
color: red;
text-decoration: none;
&:hover {// 有 & 时解析的是同一个元素或此元素的伪类,没有 & 解析是后代元素
color: black;
text-decoration: underline;
}
}
3.运算及函数
对数值型value(如颜色、数字)进行四则运算
专门针对color的一组函数
lighten(@color, 10%); // 返回比原色亮10%的颜色 darken(@color, 10%); //返回比原色暗10%的颜色 saturate(@color, 10%); //返回比原色饱和10%的颜色 desaturate(@color, 10%);// 返回比原色不饱和10%的颜色 fadein(@color, 10%); // 返回比原色不透明10%的颜色 fadeout(@color, 10%); // 返回比原色透明10%的颜色 spin(@color, 10); // 比原色大10度色调比 spin(@color, -10); // 比原色小10度色调比
//使用
init: #f04615; #body { background-color: fadein(@init, 10%); }
4、注释
与JS一样
注意:单行注释不会出现在编译后的CSS文件中,若需要保留注释,使用多行注释
5.使用方式:
客户端:
//注意文件的先后顺序
<link rel="stylesheet/less" type="text/css" href="styles.less"> <script type="text/javascript" src="less.js"></script>
实际项目开发中常用:
编写LESS文件后,直接将它编译成CSS文件,然后引入页面
以上是关于动态样式语言—LESS基础知识的主要内容,如果未能解决你的问题,请参考以下文章