WEB前端CSS—less

原创于 2023-11-29 14:28:05 发布 · 243 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css #less

前端专栏收录该内容

36 篇文章

订阅专栏

初识

简介

CSS（层叠样式表）是一门历史悠久的标记性语言，同 HTML 一道，被广泛应用于万维网（World Wide Web）中。HTML 主要负责文档结构的定义，CSS 负责文档表现形式或样式的定义。
作为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码，造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。LESS 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情。
本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。

安装

# node安装less
npm install –g less
# 查看是否安装成功
less -v

文档

中文文档：lesscss.cn
英文文档：lesscss.org

less语法

变量

LESS 允许开发者自定义变量，变量可以在全局样式中使用，变量使得样式修改起来更加简单。
**语法：**以@开头，:赋值，;结束。不能以数字开头、不能包含特殊字符。如
```
@jdRed:#f10215;

body {
   color: @jdRed;
}
```
注意：如果变量拼接了除空白符以外的字符,需要用{}装饰变量，如
```
@myClass:gui;

.{@myClass} {
    color:@jdRed;
}
```

注释

/**/：css支持，所有编译的过程生成到css文件
//：css不支持，不会编译在css文件

Mixin混入

Mixin混入功能对开发者来说并不陌生，很多动态语言都支持 Mixin混入特性，它是多重继承的一种实现，在 LESS 中，混入是指在一个class中引入另外一个已经定义的class，就像在当前class中增加一个属性一样。

.red {
  color: @mainColor;
}
.border {
  border: 1px solid #ccc;
}
.redBorder() {
  color: @mainColor;
  border: 1px solid #ccc;
}
.mixin-class {
  .red();
  .border();
}
.mixin-fuc {
  .redBorder();
}

嵌套

在我们书写标准CSS的时候，遇到多层的元素嵌套时，要么采用从外到内的选择器嵌套定义，要么采用给特定元素加class或id的方式

语法:

层级嵌套：直接在{}里面套。
连接(类、伪类、并集)：在前边加&
带修饰符的选择器(子代)：直接写修饰符即可。

例子:

.wjs_app {
    display: block;
    img {					/* 后代选择器 -> 直接套 */
        display: none;
    }
    &:hover {				/* 需要连接的情况：&*/
        img {
            display: block;
            position: absolute;
            left: 50%;
            margin-left: -60px;
            border: 1px solid #ccc;
            border-top: none;
            top: 40px;
            z-index: 100000;
        }
    }
    &.good {
        color: #ccc;
    }
    > div {			/* 子类选择器 */
        display: block;
    }
}

函数

在CSS充斥着大量数值型的属性，比如color、padding、margin等，这些数值之间在某些情况下有着一定关系，那么怎样利用LESS来组织这些数值之间的关系呢？

语法:

函数: .函数名(参数){样式}
默认参数：和定义变量值一样，只是没有分号。

例子：

.f() {				/* 无参 */
    float: left;
}
.f(@direction: left) {	/* 有参 */
    float: @direction;
}

定义无默认值的参数，调用时必须传参；定义有默认值的参数，可传可不传。
传参时参数应该和属性匹配，比如float:@direction不能传入"颜色"。

escape(@string); // 通过 URL-encoding 编码字符串
e(@string); // 对字符串转义
%(@string, values...); // 格式化字符串
unit(@dimension, [@unit: ""]); // 移除或替换属性值的单位
color(@string); // 将字符串解析为颜色值
data-uri([mimetype,] url); // * 将资源内嵌到css中，可能回退到url()
ceil(@number); // 向上取整
floor(@number); // 向下取整
percentage(@number); // 将数字转换为百分比，例如 0.5 -> 50%
round(number, [places: 0]); // 四舍五入取整
sqrt(number); // * 计算数字的平方根
abs(number); // * 数字的绝对值
sin(number); // * sin函数
asin(number); // * arcsin函数
cos(number); // * cos函数
acos(number); // * arccos函数
tan(number); // * tan函数
atan(number); // * arctan函数
pi(); // * 返回PI
pow(@base, @exponent); // * 返回@base的@exponent次方
mod(number, number); // * 第一个参数对第二个参数取余
convert(number, units); // * 在数字之间转换
unit(number, units); // * 不转换的情况下替换数字的单位
color(string); // 将字符串或者转义后的值转换成颜色
rgb(@r, @g, @b); // 转换为颜色值
rgba(@r, @g, @b, @a); // 转换为颜色值
argb(@color); // 创建 #AARRGGBB 格式的颜色值
hsl(@hue, @saturation, @lightness); // 创建颜色值
hsla(@hue, @saturation, @lightness, @alpha); // 创建颜色值
hsv(@hue, @saturation, @value); // 创建颜色值
hsva(@hue, @saturation, @value, @alpha); // 创建颜色值
hue(@color); // 从颜色值中提取 hue 值（色相）
saturation(@color); // 从颜色值中提取 saturation 值（饱和度）
lightness(@color); // 从颜色值中提取 'lightness' 值（亮度）
hsvhue(@color); // * 从颜色中提取 hue 值，以HSV色彩空间表示（色相）
hsvsaturation(@color); // * 从颜色中提取 saturation 值，以HSV色彩空间表示（饱和度）
hsvvalue(@color); // * 从颜色中提取 value 值，以HSV色彩空间表示（色调）
red(@color); // 从颜色值中提取 'red' 值（红色）
green(@color); // 从颜色值中提取 'green' 值（绿色）
blue(@color); // 从颜色值中提取 'blue' 值（蓝色）
alpha(@color); // 从颜色值中提取 'alpha' 值（透明度）
luma(@color); // 从颜色值中提取 'luma' 值（亮度的百分比表示法）
saturate(@color, 10%); // 饱和度增加 10%
desaturate(@color, 10%); // 饱和度降低 10%
lighten(@color, 10%); // 亮度增加 10%
darken(@color, 10%); // 亮度降低 10%
fadein(@color, 10%); // 透明度增加 10%
fadeout(@color, 10%); // 透明度降低 10%
fade(@color, 50%); // 设定透明度为 50%
spin(@color, 10); // 色相值增加 10
mix(@color1, @color2, [@weight: 50%]); // 混合两种颜色
greyscale(@color); // 完全移除饱和度，输出灰色
contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]); // 如果 @color1 的 luma 值 > 43% 输出 @darkcolor，否则输出 @lightcolor
multiply(@color1, @color2);
screen(@color1, @color2);
overlay(@color1, @color2);
softlight(@color1, @color2);
hardlight(@color1, @color2);
difference(@color1, @color2);
exclusion(@color1, @color2);
average(@color1, @color2);
negation(@color1, @color2);
iscolor(@colorOrAnything); // 判断一个值是否是颜色
isnumber(@numberOrAnything); // 判断一个值是否是数字（可含单位）
isstring(@stringOrAnything); // 判断一个值是否是字符串
iskeyword(@keywordOrAnything); // 判断一个值是否是关键字
isurl(@urlOrAnything); // 判断一个值是否是url
ispixel(@pixelOrAnything); // 判断一个值是否是以px为单位的数值
ispercentage(@percentageOrAnything); // 判断一个值是否是百分数
isem(@emOrAnything); // 判断一个值是否是以em为单位的数值
isunit(@numberOrAnything, "rem"); // * 判断一个值是否是指定单位的数值

运算

width: 100%*8; // width:800%;
border: 1px solid @back*2;	// 宽度为@back*2
color: #ccc*10;	// color:#fff;
background-color: lighten(@color, 10%); // 亮度增加10%

循环

语法:

less没有循环语法
使用函数的迭代(死循环)，根据数组的长度去停止当前循环。
给函数的执行附加条件：序号判断 -> 通过序号遍历 -> @index从1开始。

例子：

.adapterMixin(@index) when (@index>0) {
    @media (min-width: extract(@adapterDeviceList,@index)){
        html{
            font-size: @baseFontSize / @psdWidth * extract(@adapterDeviceList,@index);
        }
    }
    .adapterMixin( @index - 1);
}

导入模块

语法：@import "文件名";

@import "test";

.f_left {
  float: @right;
}

注意：导入的必须是.less文件，所以@import后面不用写文件后缀。

编码头

在首行添加

@charset "UTF-8";

浏览器端使用less

概述：less无法在浏览器端直接使用，浏览器不识别，必须解析成css代码。

方案：通过less解析插件，是js插件。

步骤：

引入less文件:

<link href="../less/test.less" type="text/less" rel="stylesheet">

引入js插件:

<script src="./js/less.min.js"></script>

进行其他操作:

<!-- less.watch()无刷新预览样式 -->
<script>less.watch();</script>

注意：

引入less文件需要加上type="text/less"
必须以http形式打开网页预览