今天小编跟大家讲解下有关CSS Less框架基础教程 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS Less框架基础教程 的相关资料，希望小伙伴们看了有所帮助。
通俗的来讲 Less 是一个Css 预编译器,意思指的是它可以扩展Css语言,添加功能如允许变量(variables),混合(mixins),函数(functions) 和许多其他的技术 从而可以让Css更具维护性 主题性 扩展性。
本文为Less入门与语法梳理教程。其中包括了一些入门级例子 适合于对Less有入门级了解的开发者查阅。
LESS 源文件的引入方式与标准CSS文件的引入方式一样：
复制代码代码如下:<link rel="stylesheet/less"type="text/css"href="https://www.aidi.net.cn//css/styles.less">
在我们需要引入 LESS 源文件的 HTML 中加入如下代码：
复制代码代码如下:<script src="https://www.aidi.net.cn//css/less.js"type="text/javascript"></script>
导入文件：
复制代码代码如下:@import “variables.less”;@import “variables.css”;
变量与作用域
复制代码代码如下:@width : 20px; //全局变量#homeDiv { #centerDiv{ width : @width; // 此处应该取最近定义的变量 width 的值 30px } @width : 30px; //局部变量 变量和混合是延迟加载的 不一定要在使用前声明 } #leftDiv { width : @width; // 此处应该取最上面定义的变量 width 的值 20px }</p><p>@mySelector: banner; // [email protected]:"../img"; // [email protected]: color; // 定义一个变量用于属性名称.@{mySelector} { //选择器名称使用变量的用法 background: url("@{images}/white-sand.png"); //URLs使用变量的用法 @{property}: #0ee; …… //其它常规属性等}</p><p>.banner { background: url("../img/white-sand.png"); color: #0ee; ……}
变量可以嵌套定义与使用
复制代码代码如下:@fnord:"I am fnord.";@var:"fnord";content: @@var;//嵌套使用content:"I am fnord."; //编译后结果
数值 颜色和变量可运算
复制代码代码如下:@init: #111111;@transition: @init*2;@var: 1px + 5 // Less能够判断颜色和单位之间的区别.switchColor { color: @transition; } .switchColor { color: #222222; }
混合（Mixins）与函数
复制代码代码如下:.roundedCorners(@radius:5px) { //定义参数并且给予默认值 -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; }</p><p> // 在另外的样式选择器中使用 #header { .roundedCorners; //使用类并且参数为默认值 }</p><p> #footer { .roundedCorners(10px); //自定义参数值 }</p><p>.bordered { border-top: dotted 1px black; border-bottom: solid 2px black;}</p><p>#menu a { color: #111; .bordered; }
@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>
复制代码代码如下:#home{ color : blue; width : 600px; height : 500px; border:outset; #top{ border:outset; width : 90%; }}#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; } }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;}</p><p>nav ul { // 声明块保持原样 background: blue;}</p><p>.inline,nav ul { color: red;}</p><p>pre:hover , .some-class { &:extend(div pre);}</p><p>pre:hover:extend(div pre),.some-class:extend(div pre) {}
从本质上讲extend会查找编译后的CSS 而不是原始的less
复制代码代码如下:.bucket { tr & { // 目标选择器中的嵌套 &代表最近父元素 color: blue; }}.some-class:extend(tr .bucket) {} // 识别嵌套规则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是相同的
来源：爱蒂网
