LESS 预处理器

维护 CSS 的弊端

css本质上不是一门语言,是一个简单的样式表,代码维护相对老套,不够灵活.

Less介绍

less预处理器 : 依然使用css语法, 引入了变量, 混合, 运算, 嵌套等功能, 大大简化了css 的编写,并且  降低了 css 的维护成本



常见的css预处理器 : Less | SASS | stylus 等
复制代码

变量

☞@自定义变量名: 值;
    例如:
    @nav_bgcolor: red;
    nav {
        color: @nav_bgcolor;
    }

☞变量的运算:
	@width: 10;
    nav {
		width: @width * 3px;
    }
复制代码

混合

☞ 定义一个公共的样式(可以式类选择的语法,可以是ID选择器的语法)

例如:
	.test() {
        width: 50px;
        height: 50px;
    }

    nav {
        调用样式
        .test();
    }

    header {
        .test();
    }


☞ 可以设置参数
例如:
.test(@width) {
    width: @width;
}

nav {
    .test(100px);
}


☞ 可以为参数设置默认值
例如:
.test(@width: 100px) {
    width: @width;
}
nav {
    .test();
}
header {
    .test(50px);
}
复制代码

嵌套

例如:
nav {
    ul {
        li {

        }
    }
}
复制代码

在浏览器中预览LESS文件(了解)

1. HTML页面直接沟通link标签引用 less文件
 <link rel="stylesheet/less" type="text/css" href="less文件.less">

2. HTML页面中引用用来解析less文件的一个js文件
 <script type="text/javascript" src="less.js"></script>

备注:
1. 以上执行过程需要在服务器环境下进行
2. webstorm开发工具下,可以执行运行,因为webstorm自带一个服务器环境
复制代码