动态css语言less,less让css具有动态语言的特性
Less 是一种样式语言,它将 css 赋予了动态语言的特性,如变量、 继承、 运算、 函数。less 既可以在客户端上运行(支持IE 6+, Webkit, Firefox),也可以借助 Node.js 或者 Rhino 在服务端运行。
Less 做为 css 的一种形式的扩展,它并没有阉割 css 的功能,而是在现有的 css 语法上,添加了很多额外的功能,所以对于前端开发人员来所,学习 less 是一件轻而易举的事情。我们先看下用 less 写的一段 css:
复制代码代码如下:
@base: #f938ab;
.box-shadow(@style, @c) when (iscolor(@c)) {
box-shadow: @style @c;
-webkit-box-shadow: @style @c;
-moz-box-shadow: @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
.box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
color: saturate(@base, 5%);
border-color: lighten(@base, 30%);
div { .box-shadow(0 0 5px, 30%) }
}
在没有学过 less 的情况下,我们并不知道这些代码是做啥用的,怎么生成我们所熟悉的 css 代码,以上代码经过 less 编译后:
复制代码代码如下:
.box {
color: #fe33ac;
border-color: #fdcdea;
}
.box div {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
下面我们就一起来学习 less 吧。
我们知道如果要使用 jquery 就必须在页面上引进 jquery 库,同样的在使用 less 编写 css 代码时,也要引进 less 库——less.js。点击这里下载 less 库。
下载好后只要在页面中引入就可以了。
复制代码代码如下:
要注意外部引进样式的方法有所改变,rel 属性值为 stylesheet/less,样式的后缀变为 .less 同时 less 样式文件一定要在 less.js 前先引入。
引入了 less 之后,正式开始学习 less。
LESS 语法
1、变量
Less 的变量充许你在样式中对常用的属性值进行定义,然后应用到样式中,这样只要改变变量的值就可以改变全局的效果。和 javascript 中的全局变量有点类似。
甚至可以用变量名定义为变量。
复制代码代码如下:
@color: red;
@foot: 'color';
.head{
color: @color;
}
.foot{
color: @@foot;
}
输出:
复制代码代码如下:
.head {
color: red;
}
.foot {
color: red;
}
注意 less 中的变量为完全的“常量”,所以只能定义一次。
2、混合
混合就是定义一个 class,然后在其他 class 中调用这个 class。
复制代码代码如下:
.common{
color: red;
}
.nav{
background: #ccc;
.common;
}
输出:
复制代码代码如下:
.common {
color: red;
}
.nav {
background: #ccc;
color: red;
}
Css 中的 class, id 或者元素属性集都可以用同样的方式引入。
3、带参数混合
在 less 中,你可以把 class 当做是函数,而函数是可以带参数的。
复制代码代码如下:
.border-radius (@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
#header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}
最后输出:
复制代码代码如下:
#header {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.button {
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
我们还可以给参数设置默认值:
复制代码代码如下:
.border-radius (@radius: 5px) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
#header {
.border-radius;
}
最后输出:
复制代码代码如下:
#header {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
也可以定义不带参数属性集合,如果想要隐藏这个属性集合,不让它暴露到CSS中去,但是还想在其他的属性集合中引用,就会发现这个方法非常的好用:
复制代码代码如下:
.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;
}
混合还有个重要的变量@arguments。
@arguments 包含了所有传递进来的参数,当你不想处理个别的参数时,这个将很有用。
复制代码代码如下:
.border(@width:0,@style:solid,@color:red){
border:@arguments;
}
.demo{
.border(2px);
}
输出:
复制代码代码如下:
.demo {
border: 2px solid #ff0000;
}
混合还有许多高级的应用,如模式匹配等。在这里就不介绍了,只讲些基础的东西。
4、嵌套规则
Less 可以让我们用嵌套的方式来写 css。下面是我们平时写的 css:
复制代码代码如下:
#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}
用 less 我们就可以这样写:
复制代码代码如下:
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p {
font-size: 12px;
a {
text-decoration: none;
&:hover { border-width: 1px }
}
}
}
注意 & 符号的使用—如果你想写串联选择器,而不是写后代选择器,就可以用到 & 了。这点对伪类尤其有用如 :hover。
5、运算
任何数字、颜色或者变量都可以参与运算。
复制代码代码如下:
.demo{
color: #888 / 4;
}
输出:
复制代码代码如下:
.demo {
color: #222222;
}
Less 完全可以进行复杂四则运算,同样的复合运算也没有问题。
6、Color 函数
Less 提供了一系列的颜色运算函数。颜色会先被转化成 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
fade(@color, 50%); // return @color with 50% transparency
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
mix(@color1, @color2); // return a mix of @color1 and @color2
使用起来相当简单:
复制代码代码如下:
@base: #f04615;
.class {
color: saturate(@base, 5%);
background-color: lighten(spin(@base, 8), 25%);
}
还可以提取颜色信息:
复制代码代码如下:
hue(@color); // returns the `hue` channel of @color
saturation(@color); // returns the `saturation` channel of @color
lightness(@color); // returns the 'lightness' channel of @color
例如:
复制代码代码如下:
@color: #f36;
#header {
background-color: hsl(hue(@color),45%,90%);
}
输出:
复制代码代码如下:
#header {
background-color: #f1dae0;
}
7、Math 函数
Less 提供了一组方便的数学函数,你可以使用它们处理一些数字类型的值。
复制代码代码如下:
round(1.67); // returns 2
ceil(2.4); // returns 3
floor(2.6); // returns 2
如果你想将一个值转化为百分比,你可以使用 percentage 函数:
复制代码代码如下:
percentage(0.5); // returns 50%
8、命名空间
有时候,你可能为了更好组织 css 或者单纯是为了更好的封装,将一些变量或者混合模块打包起来,你可以像下面这样在 #form 中定义一些属性集之后可以重复使用:
复制代码代码如下:
#form {
.submit () {
display: block;
border: 1px solid black;
background: gray;
&:hover { background: green }
}
.register { ... }
.login { ... }
}
你只需要在 #myform 中像这样引入 .submit:
复制代码代码如下:
#myform {
color: orange;
#form > .submit;
}
9、作用域
和其他编程语言类似,less 变量也有作用域。首先会从本地查找变量或者混合模块,如果没找到的话会去父级作用域中查找,直到找到为止。
复制代码代码如下:
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
#footer {
color: @var; // red
}
10、注释
Css 形式的注释在 less 中是依然保留的,同时 less 也支持双斜线的注释,但是编译成 css 的时候自动过滤掉。
最后 less 还有一些其他的特性就不介绍了,大家可以去LESS官网看下。
动态css语言less,less让css具有动态语言的特性相关推荐
- html语言书写注意事项,CSS命名规范参考及书写注意事项
CSS书写顺序 *{ /*显示属性*/ display position float clear cursor - /*盒模型*/ margin padding width height /*排版*/ ...
- css less 不要作用到子对象_CSS-预处理语言Sass、Less简述
CSS作为前端开发的三驾马车之一,无时无刻不在影响着前端的发展.为了让 CSS 变得更加的好用,出现了一些预处理语言. 它们让 CSS 彻底变成一门可以使用变量 .循环 .继承 .自定义方法等多种特性 ...
- 在html语言描述中,css的特点有,css样式 css样式语言特点
层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态地修 ...
- php 动态加载JavaScript文件或者css文件
1. 动态加载JS文件 第一种方法: test.php <script language="JavaScript" src="test6.php?str=i lov ...
- html中各种js效果图,HTML+CSS+JS制作一个漂亮的橙子动态时钟
HTML+CSS+JS制作一个漂亮的橙子动态时钟 1. 效果图: 2. 背景产生: 利用四块与圆同高的矩形转一定的角度将圆切分成八块形成橙子内里,利用径向渐变形成橙皮. background: rad ...
- 动态修改el-input样式;动态修改elmentUI元素样式;css变量
场景:正常我们动态修改div元素的样式,使用:style和:class即可:但是我们想要动态修改element的组件样式时候,例如el-input字体颜色,由于el-input的样式嵌套很深,我们需要 ...
- c语言如何字符间距,css 字间距、CSS字体间距、css 字符间距设置
「CSS」文本编排相关的CSS属性设置 1.font-family:设置字体族. 格式为font-family:字体1,字体2,--,通用字体族|inherit. 通用字体族,是指一类相似的字体.W3 ...
- css text top,text-align属性(css中文本对齐属性)
text-align属性 设置h1.h2.h3元素的文本对齐方法: h1{text-align:center} h2{text-align:left} h3{text-align:right} 亲自试 ...
- html css web笔记,Web/HTML/CSS/的笔记
一.web基本介绍 1.Web 是 Worl wide web 的缩写,称为全球广域网,俗称www 2.我们可以将Web理解为当前的一种互利网,对于我们来说更多的就是网站服务. 3.网站我们可以认为是 ...
最新文章
- python使用matplotlib可视化、为可视化图像的X轴和Y轴设置自定义的轴标签(axis labels of matplotlib plot)
- Xshell+技巧+快捷键
- AC日记——字符串最大跨距 openjudge 1.7 26
- spring boot: 构建项目时报错Not a managed type
- Angular JS 中的内置方法之表单验证
- 【Vue.js学习】生命周期及数据绑定
- 理论基础 —— 排序 —— 桶排序
- upstream directive is not allowed here in
- java string jdk_Java.lang.String中JDK API 1.6.0摘要。
- Spark报错 Failed to send RPC xxx to/ip:43074 java.nio.channels.ClosedChannelException
- java 环境变量_Win10系统配置Java环境变量
- ios查看帧率的软件_查看iOS屏幕帧数MGFPSStatus
- 极速扫描器 masscan
- 交流电路有效值、最大值、平均值
- springboot文件上传大小限制:The field file exceeds its maximum permitted size of 1048576 bytes
- 腾讯云内容分发网络 CDN 产品认证课程笔记(三)——腾讯云CDN操作指引
- 项目管理学习笔记之二.工作分解
- AE生成高清视频设置
- 红旗linux如何开远程桌面,配置VNC服务实现红旗Linux远程桌面访问
- 00_简单常识介绍——NOIP/NOI/IOI(信息学奥林匹克竞赛)
热门文章
- jQuery之call()方法的使用
- Linux学习之FTP服务
- Linux 定时执行命令 crontab
- 易语言源代码毁来者来了!!
- ASP技巧:在Access数据库中重命名表
- SUN服务器清除所有报错信息,SUN服务器可能遇到的问题总结.doc
- python手机端给电脑端发送数据_期货交易软件有哪些比较好用?分手机端和电脑端...
- 安卓应用用户数据_用户指标数据应用
- 使用durid的ConfigFilter对数据库密码加密
- python画子图_Python使用add_subplot与subplot画子图操作示例