java css文件预处理_常见的CSS预处理器之Less初体验-CSDN博客

本文链接：https://blog.csdn.net/weixin_39630410/article/details/114123905

CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。

简单来说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。

CSS预处理器的技术现在已经很成熟了，而且也出现了各种不同的 CSS 预处理器语言，但是呢不可能一一列出，面面俱到，这篇文章呢，主要是介绍一下比较常见的CSS预处理器语言之一 Less以及个人的一些认识了解。

Less

Alexis Sellier与2009年设计 LESS的第一个版本是用Ruby编写的，在后来的版本中，它被JavaScript替代了。 Less是一门CSS预处理语言，扩充了 css语言，增加了诸如变量、混合(mixin)、函数等功能，让 css 更易于维护，方便制作主题。

关于Less的基本使用，我们需要从嵌套、混合、变量、函数以及引入这几个方面来一一认识。

1 Less的安装使用和编译：

引用Less，全局安装 npm install less -g

新建一个index.html文件和main.less，在index.html 中引入main.css，然后输入下面语句自动编译成main.css lessc main.less main.css

2 Less 的基本语法

嵌套

在 css 中父子元素的写法通常如下： .container {

padding: 0;

}

.container .header {

background-color: red;

}

通过Less 写法如下，父子嵌套关系一目了然。也就是下面的代码编译就成了上面的css语法。 .container {

padding: 0;

.header {

background-color: red;

}

伪类

伪类的写法，在 css 中写法如下： #header :after {

content: " ";

display: block;

font-size: 0;

height: 0;

clear: both;

visibility: hidden;

}

在less 引入可以用一个符号 & 代替主类 #header；&就代表了上一层的类名。 #header {

&:after {

content: " ";

display: block;

font-size: 0;

height: 0;

clear: both;

visibility: hidden;

}

变量

也就是说定义一个公共的变量不用多次重复编写相同的代码；比如将三个div的背景颜色改成蓝色，我们只需要如下所示： @background:blue;

less就是js的写法来写css

使用@符号定义变量

@变量名看成是一个字符串

变量可以作为样式属性值：background-color：@color；

也可以作为类名，我们需要把{ }包起来：如下代码.@classname 表示的就是 .main。 .@{classname}{

background-color：@color;

}

@classname:main;

@color:red;

函数

使用 $ lessc func.less 进行转译 func.css 文件 .border-radius(@radius) {

-webkit-border-radius: @radius;

-moz-border-radius: @radius;

border-radius: @radius;

}

#header {

.border-radius(4px);

}

.button {

.border-radius(6px);

}

转化成了css如下:

#header {

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

}

.button {

-webkit-border-radius: 6px;

-moz-border-radius: 6px;

border-radius: 6px;

}

函数的参数允许设置默认值 .border-radius(@radius: 10px) {

-webkit-border-radius: @radius;

-moz-border-radius: @radius;

border-radius: @radius;

}

#header{

.border-radius();

}

.button{

.border-radius();

}

编译css后的代码为：

#header {

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

}

.button {

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

}

函数有多个参数时用分号隔开，调用时就是通过变量名称，而不是位置 .mixin(@radius:10px;@color：green;) {

-webkit-border-radius: @radius;

-moz-border-radius: @radius;

border-radius: @radius;

color:@color;

}

#header{

.mixin(@color:green);

}

.button{

.mixin(@color:green);

}

编译成css为：

#header{

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

color:green;

}

.button{

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

color:green;

}

Less 内置函数(自己本身存在的函数)

escape

percentage(百分比) .mixin(@radius:10px;@color：green;) {

-webkit-border-radius: @radius;

-moz-border-radius: @radius;

border-radius: @radius;

color:@color;

width:percentage(.5);

}

#header{

.mixin(@color:green);

}

.button{

.mixin(@color:green);

}

编译成css为：

#header{

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

color:green;

width:50%;}

.button{

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

color:green;

width:50%;

}

convert(单位的转换)

混合

抽取公共类，例如下面的css代码可以用less这样编写

在css中的代码： #header a {

color: #111;

border-top: solid 1px #595959;