登录  /  注册

[Tunny]CSS LESS框架基础_html/css_WEB-ITnose

php中文网
发布: 2016-06-24 12:01:55
原创
975人浏览过

[黄映?/tunny,20140711]  

Less 是一个Css 预编译器,意思指的是它可以扩展Css语言,添加功能如允许变量(variables),混合(mixins),函数(functions) 和许多其他的技术,可让Css更具维护性,主题性,扩展性。

本文为Less入门与语法梳理,包括一些入门级例子,适合对Less有入门级了解的开发者查阅。

 

LESS 源文件的引入方式与标准 CSS 文件引入方式一样:

<link rel="stylesheet/less" type="text/css" href="styles.less">
登录后复制

在我们需要引入 LESS 源文件的 HTML 中加入如下代码:

<script src="less.js" type="text/javascript"></script>
登录后复制

导入文件:

@import “variables.less”;@import “variables.css”;/*也可以将标准的 CSS 文件直接改成 .less 格式*/
登录后复制

变量与作用域

 /*用变量管理值*/ @width : 20px; //全局变量 #homeDiv { #centerDiv{ width : @width; // 此处应该取最近定义的变量 width 的值 30px  } @width : 30px; //局部变量,变量和混合是延迟加载的,不一定要在使用前声明 } #leftDiv { width : @width; // 此处应该取最上面定义的变量 width 的值 20px  } /*用变量管理选择器名称、URLs、属性*/ @mySelector: banner; // 定义一个变量用于选择器名称 @images: "../img"; // 变量可以是字符串 @property: color; // 定义一个变量用于属性名称 .@{mySelector} { //选择器名称使用变量的用法 background: url("@{images}/white-sand.png");  //URLs使用变量的用法 @{property}: #0ee; …… //其它常规属性等 } /*编译生成的CSS文件*/ .banner { background: url("../img/white-sand.png"); color: #0ee; …… }
登录后复制

变量可以嵌套定义与使用

@fnord:  "I am fnord.";@var:    "fnord";content: @@var;//嵌套使用content: "I am fnord."; //编译后结果/*当一个变量定义两次时,只会使用最后定义的变量,Less会从当前作用域中向上搜索。*/
登录后复制

数值,颜色和变量可运算

@init: #111111;@transition: @init*2;@var: 1px + 5 // Less能够判断颜色和单位之间的区别.switchColor { color: @transition; } /*编译生成的CSS文件*/ .switchColor { color: #222222; }
登录后复制

混合(Mixins)与函数

 .roundedCorners(@radius:5px) { //定义参数并且给予默认值 -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius;  } // 在另外的样式选择器中使用 #header { .roundedCorners; //使用类并且参数为默认值  } #footer { .roundedCorners(10px); //自定义参数值  } .bordered { border-top: dotted 1px black; border-bottom: solid 2px black; } #menu a { color: #111; .bordered; /*在另一个规则集内部使用上面类的属性,则直接访问属性所在类名(或Id名)即可*/ }
登录后复制

@arguments变量:当 Mixins 引用这个参数时,该参数表示所有的变量(多参数)。

 .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 {...} } //如果我们要复用 user 这个选择器的时候,我们只需要在需要混入这个选择器的地方这样使用就可以了。#mynamespace > .user
登录后复制

嵌套规则

<!-- HTML片段--> <div id="home"> <div id="top">top</div> </div>
登录后复制

/*使用嵌套规则的LESS 文件*/ #home{ color : blue; width : 600px; height : 500px; border:outset; #top{ border:outset; width : 90%;  } } /*编译生成的CSS文件*/ #home { color: blue; width: 600px; height: 500px; border: outset;  } #home #top { border: outset; width: 90%;  } a { color: red; text-decoration: none; &:hover { /*有 & 时解析的是同一个元素或此元素的伪类,没有 & 解析是后代元素,&表示当前选择器的父选择器*/ color: black; text-decoration: underline;  } } /*编译生成的CSS文件*/ a { color: red; text-decoration: none;  } a:hover { color: black; text-decoration: underline;  }
登录后复制

Extend

extend是一个Less伪类,为扩展选择器;扩展选择器必须在所有伪类的最后

nav ul:extend(.inline)    background: blue;}.inline { color: red; } /*编译生成的CSS文件*/ nav ul { // 声明块保持原样 background: blue; } .inline,nav ul { color: red; } pre:hover , .some-class { &:extend(div pre); } /*以上与给每个选择器添加一个extend完全相同*/ pre:hover:extend(div pre), .some-class:extend(div pre) {}
登录后复制

从本质上讲extend会查找编译后的CSS,而不是原始的less

.bucket { tr & { // 目标选择器中的嵌套,&代表最近父元素 color: blue;  } } .some-class:extend(tr .bucket) {} // 识别嵌套规则 /*编译生成的CSS文件*/ tr .bucket , .some-class { color: blue; }
登录后复制

extend必须是精确匹配(包括通配符*、伪类顺序、nth表达式,唯一例外的是属性选择器中的引号,less会知道它们是相同的,然后匹配它)

.a.class,.class.a,.class > .a { color: blue; } .test:extend(.class) {} // 不会匹配上面的任何选择器的值 *.class { color: blue; } .noStar:extend(.class) {} //不会匹配*.class选择器 link:hover:visited { color: blue; } .selector:extend(link:visited:hover) {} //不会匹配,伪类顺序不同 :nth-child(1n+3) { color: blue; } .child:extend(n+3) {} //不会匹配,尽管逻辑上1n+3与n+3是相同的
登录后复制

[版本v2.0]

黄映?/Tunny Wong:

2014-07-11发表v1.0

2014-07-13第一次更新v2.0

 

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号