CSS模块化：less

  • less的安装与基本使用
  • less的语法及特性

 一、本地使用less的方法

Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。是一种动态样式语言，属于css预处理语言的一种。

下载后找到less.js：less.js-2.5.3\dist\less.js

也可以直接使用CDN缓存： <script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script> 

注意link的rel属性： <link rel="stylesheet/less" type="text/css" href="styles.less" /> 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <link rel="stylesheet/less" type="text/css" href="demo.less" />
 9 </head>
10 <body>
11     <div class="wrapper">
12         <div class="box">
13             <ul>
14                 <li><a href="">aaaa</a></li>
15                 <li><a href="">aaaa</a></li>
16                 <li><a href="">aaaa</a></li>
17                 <li><a href="">aaaa</a></li>
18                 <li><a href="">aaaa</a></li> 
19             </ul>
20         </div>
21     </div>
22     <script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
23 </body>
24 </html>
测试结构代码
 1 *{
 2     margin: 0;
 3     padding: 0;
 4     list-style: none;
 5     text-decoration: none;
 6     body{
 7         background-color: #ccc;
 8         .wrapper{
 9             position: relative;
10             width: 500px;
11             height: 500px;
12             margin:200px auto;
13             border: 1px solid #000;
14             .box{
15                 position: absolute;
16                 width: 200px;
17                 height: 200px;
18                 top: 50%;
19                 left: 50%;
20                 margin-top: -100px;
21                 margin-left: -100px;
22                 border:1px solid #000;
23             }
24         }
25     }
26 }
测试的Less样式表

注意本地测试时需要放到本地服务下，在less.js中会有ajax网络请求，直接使用本地文件路径打开页面会报错。

 二、在nodejs环境中使用less

 1.安装less到全局

npm install less -g

2.通过lessc指令将less文件编译转换成css文件

lessc demo.less demo.css

执行完成以后会生成一个demo.css文件，上面示例中的demo.less被编译转换成demo.css文件的代码如下;

 1 * {
 2   margin: 0;
 3   padding: 0;
 4   list-style: none;
 5   text-decoration: none;
 6 }
 7 * body {
 8   background-color: #ccc;
 9 }
10 * body .wrapper {
11   position: relative;
12   width: 500px;
13   height: 500px;
14   margin: 200px auto;
15   border: 1px solid #000;
16 }
17 * body .wrapper .box {
18   position: absolute;
19   width: 200px;
20   height: 200px;
21   top: 50%;
22   left: 50%;
23   margin-top: -100px;
24   margin-left: -100px;
25   border: 1px solid #000;
26 }
View Code

注：在webpack中使用less会在后期的webpack相关博客中解析。

 三、less的语法及特性

1.注释编译：less中的双斜杠注释不会被编译到css文件中，但是包裹注释会被编译到css文件中

// 双斜杠注释不会被编译到css文件中
/*我可以出现在css文件中*/

编译后的结果：

/*我可以出现在css文件中*/

2.变量与运算

1 @ince-blue:#5B83AD;
2 @light-blue:@ince-blue + #ff0;
3 //@light-blue的实际颜色是由@ince-blue + #ff0得到的，实际颜色值是#ffffad
4 //在less中直接将变量应用到样式中
5 background-color:@light-blue;

可以运算的值当然还有像素值：

@list-width:300px;
@list-height:@list-width * 2;

2.1.变量也可以说是可变插值，上面的示例中展示的都是使用变量来控制CSS样式值，less中的变量除了可以控制css样式值以外，还可以被用作选择器名称、属性名称、URL和@import语句。

2.1.1.变量控制选择器

1 @my-selector:banner;
2 
3 .@{my-selector}{
4         // 这里是类选择器banner的具体的样式
5 }

2.1.2.变量控制网址（URL）

1 @images: "../img";
2 
3 div{
4     background: url("@{imges}/mei.png");
5 }

2.1.3.变量与导入语句

@themes: "../../src/themes";

@import "@{themes}/tidal-wave.less"

2.1.4.变量与属性

@property-color:color;

span{
    @{property-color}: #0ee;
}

2.1.5.变量与变量名

1 @fnord: "I am fnord.";
2 @var: 'fnord';
3 content: @@var;
4 
5 //编译为
6 content: "I am fnord.";

2.1.6.变量的作用域与延迟加载

 1 body{
 2     div{
 3         @size:14px;
 4         .p1{
 5             @size:18px;
 6             font-size:@size;
 7         }
 8         ul{
 9             font-size:@size;
10         }
11         .p2{
12             font-size:@size;
13         }
14     }
15 }

less作用域类似JS的块级作用域，当前作用域有该变量就取当前作用域的变量值。当前作用域没有的话就取沿着作用域链往外层作用域匹配。

2.1.6.1.但是要注意的是，这并不能说明less的变量作用域就完全与JS的作用域相同，恰恰相反它们有很大的区别。比如延迟加载：

 1 div{
 2     @col-p:#ffo;
 3     p{
 4         color:@col-p;
 5         @col-p:#000;
 6     }
 7 }
 8 //编译结果
 9 div p{
10     color:#000;
11 }

2.1.6.2.这种延迟加载还存在作用域上，例如下面这种情况：

 1 //情况以
 2 .lazy-eval {
 3   width: @var;
 4 }
 5 
 6 @var: @a;
 7 @a: 9%;
 8 //情况二
 9 .lazy-eval-scope {
10   width: @var;
11   @a: 9%;
12 }
13 
14 @var: @a;
15 @a: 100%;

以上这两种情况都编译成下面这css代码：

.lazy-eval-scope {
  width: 9%;
}

2.1.6.3.如果出现当前作用域和外层作用域的延迟加载问题时，当前作用域有该变量直接使用当前作用域的，没有当前作用域的话使用外层作用域的变量。

2.2混入：从一个规则集引入到另一个规则集的方式。

在CSS代码中经常会出现比较多的重复的代码，但是在原生的CSS中没有太好的方法可以解决，当然也不是没有，比如使用单独的类名抽离，但是这带来了HTML文件中的class属性值会增加很多，在Less中采用了混合的语法解决了这个问题。

1 .border{
2     border:1px solid #000;
3 }
4 div{
5     .border;//引入边框样式
6 }

示例中的混合写法，在引用时采用了简写方式，大家第一眼这代码是不是特别像类的选择器写法，其实不然，less标准的混合引入是要在后面带小括号的，所以示例中的标准写法是“.border()”。这一种简写和一种标准写法都没什么差别，具体遵循自己的开发文档的标准或者个人习惯就好。

看到这个引入方式是不是有了一些启发呢？既然引入标准语法是可以带小括号，这个小括号就不是随便放在那里的，而是有一定的实际意义。这个实际意义就是混入可以理解为JS中的方法，在定义的时候可以定义形参，然后在引用的时候传入实参：

1 .border(@width,@color){
2     border:@width solid @color;
3 }
4 div{
5     .border(1px,#000);
6 }

还可以使用默认值定义混入规则：

1 .border(@width:1px,@color:#000){
2     border:@widht solid @color;
3 }
4 div{
5     .border;
6 }

这个看上去比JS更强大了是不是，关于混入还有比较多的特性，后面再具体来剖析。

2.3导入：基于混入的模式，当在一个less文件中存在比较多的混入引入模式，又或者比较多的混入可以在多个less中重复引用，这时候就可以用一个独立的less文件来抽离这些混入模式，然后再将这个公共的less文件导入到各个依赖的less中，这也就实现了less的模块化。通过下面这个border实现三角形示例演示导入：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <link rel="stylesheet/less" href="trangleStyle.less">
 9 </head>
10 <body>
11     <div class="wrapper">
12         <div class="box"></div>
13     </div>
14     <script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
15 </body>
16 </html>
HTML结构代码
 1 .trangle(T,@width,@color){
 2     width: 0;
 3     height: 0;
 4     border-width: @width;
 5     border-style: solid;
 6     border-color:@color transparent transparent transparent;
 7     border-bottom-width: 0;
 8 }
 9 .trangle(R,@width,@color){
10     width: 0;
11     height: 0;
12     border-width: @width;
13     border-style: solid;
14     border-color:transparent @color transparent transparent;
15     border-left-width: 0;
16 }
17 .trangle(B,@width,@color){
18     width: 0;
19     height: 0;
20     border-width: @width;
21     border-style: solid;
22     border-color:transparent transparent @color transparent;
23     border-top-width: 0;
24 }
25 .trangle(L,@width,@color){
26     width: 0;
27     height: 0;
28     border-width: @width;
29     border-style: solid;
30     border-color:transparent transparent transparent @color;
31     border-right-width: 0;
32 }
less依赖模块

重点来看这个主入口less代码：通过@import引入外部less

 1 *{
 2     padding: 0;
 3     margin: 0;
 4     @width:300px;
 5     @color:red;
 6     @import url(./trangle.less);//也可以采用字符串写法：@import './trangle.less'
 7     body{
 8         .wrapper{
 9             position: absolute;
10             width: @width;
11             height: @width;
12             top: 50%;
13             left: 50%;
14             margin-top: -@width/2;
15             margin-left: -@width/2;
16             .box{
17                 .trangle(R,@width/2,@color);
18             } 
19         }
20     }
21 }

可以通过切换trangle混入模块的第一个参数，来实现引入不同的样式，通常这个参数再less混入中被称为标识符。

关于less的详细特性后面会有博客剖析。

 

posted @ 2019-06-25 22:45  他乡踏雪  阅读(909)  评论(0)  编辑  收藏  举报