如何编写CSS Less框架

本篇内容主要讲解“如何编写CSS Less框架”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何编写CSS 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
}</p> <p>/*用变量管理选择器名称、URLs、属性*/
@mySelector: banner; // 定义一个变量用于选择器名称
@images: "../img"; // 变量可以是字符串
@property: color; // 定义一个变量用于属性名称
.@{mySelector} {  //选择器名称使用变量的用法
   background: url("@{images}/white-sand.png");  //URLs使用变量的用法
   @{property}: #0ee;
   &hellip;&hellip;  //其它常规属性等
}</p> <p>/*编译生成的CSS文件*/
.banner {
   background: url("../img/white-sand.png");
   color: #0ee;
   &hellip;&hellip;
}

变量可以嵌套定义与使用

代码如下:

@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;
}</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;
   /*在另一个规则集内部使用上面类的属性，则直接访问属性所在类名（或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;
}</p> <p>/*编译生成的CSS文件*/
nav ul {   // 声明块保持原样
   background: blue;
}</p> <p>.inline,nav ul {
   color: red;
}</p> <p>pre:hover , .some-class {
   &:extend(div pre);
}</p> <p>/*以上与给每个选择器添加一个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是相同的

到此，相信大家对“如何编写CSS Less框架”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！