less笔记

最新推荐文章于 2023-11-30 15:15:39 发布

Kim丶

最新推荐文章于 2023-11-30 15:15:39 发布

阅读量488

点赞数 1

分类专栏： web 文章标签： less less学习

web 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

less

less环境安装

安装nodejs

https://nodejs.org/zh-cn/

选择合适自己电脑的版本下载，傻瓜式安装包安装，安装过程略。

检测是否安装成功

打开cmd，输入 node –v 查看版本。

若出现以下现象代表安装成功，版本号可能有所不同。

安装less

在线安装
- 打开cmd，输入 npm install -g less (部分电脑要 sudo 管理权限)
- 查看版本：lessc -v
离线安装
- 打开我的电脑，进入此目录。（AppData是隐藏文件夹）
- C:\Users\当前用户名\AppData\Roaming\npm
- 把下载的less解压包解压进去即可。

配置webstrom

在这里插入图片描述

附：命令行编译less文件（不太推荐）

用cmd进入写好的less文件目录下，执行以下命令：

lessc less文件.less 编译后文化名.css

快速入门

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。
PS：也支持css原生语法。

注释

与css文件注释一样。

// 也是注释，但不会编译到css文件当中。

定义变量

LESS 允许开发者自定义变量，变量可以在全局样式中使用，变量使得样式修改起来更加简单。

语法：@变量名: 值;
- 不能以数字开头，不能包含特殊字符，区分大小写。
- 当使用变量且需要字符拼接的时候，@{定义过的变量}。

例：

@mainColor:#e92322;
@className:box;
// 变量使用
div {
    background: @mainColor;
}
/*变量用于字符拼接使用方法*/
.@{className}{
    color: @mainColor;
}

Mixin混入

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

可以混入类选择器或id选择器。

类混入
- 在一个样式类中引入另一些样式类，调用格式： .样式名(); 或 .样式名; ，（）是可选。
```
.f_left {
  float: left;
}
.f_right {
  float: right;
}
/*类混入*/
.w50-f_left{
  .w50;
  .f_left;
}
```
Mixin作为函数
- mixin中定义的变量和mixin是可见的，可以在调用者的范围内使用。只有一个例外，如果调用者包含一个具有相同名称的变量（包括由另一个mixin调用定义的变量），则不会复制变量。只有受调用者本地范围中存在的变量才受到保护。从父作用域继承的变量将被重写。
  
  ps:定义的函数不会被编译，只有调用时才会被编译。
- 定义函数 格式：.函数名(){}
```
.w50(){
    width: 50%;
}
.w50-f_left(){
  .w50();
}
```
- 带参数的函数 （若要传带默认值的参数，只要在参数后加上:值）
```
.f(@direction){
    float: @direction;
}
// 带默认值参数
.w(@width:100px){
    width: @width;
}
.w50-f_left{
  .f(right);
  .w();
}
```

嵌套

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

即每嵌套一层代表加一个css加一个层级（即空格），&（衔接上）。

.wjs_app{
    display:block;
    img {
        display: none;
    }
    &:hover {
        img{
            display: block;
            position: absolute;
        }
    }
    > div{
        display: block
    }
}

// 编译生成的css
.wjs_app {
  display: block;
}
.wjs_app img {
  display: none;
}
.wjs_app:hover img {
  display: block;
  position: absolute;
}
.wjs_app > div {
  display: block;
}

组合样式

.my-inline-block {
  display: inline-block;
  font-size: 0;
}
.thing1 {
  &:extend(.my-inline-block);
}
.thing2 {
  &:extend(.my-inline-block);
}

// 编译生成的css
.my-inline-block,
.thing1,
.thing2 {
  display: inline-block;
  font-size: 0;
}

Import

格式： @import "less文件名";

运算函数

运算符：加减乘除+、-、*、/

内置函数

http://www.1024i.com/demo/less/reference.html

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"); // * 判断一个值是否是指定单位的数值

less在浏览器上使用的方法

<link rel="stylesheet/less" type="text/less" href="styles.less" />
<!-- 需要less解析插件less.js -->
<script src="less.js" type="text/javascript"></script>

<!-- 可加可不加，实时更新，即不用重新刷新浏览器即可更新样式 -->
<script>less.watch();</script>

Kim丶

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
less笔记

lessless环境安装安装nodejshttps://nodejs.org/zh-cn/选择合适自己电脑的版本下载，傻瓜式安装包安装，安装过程略。检测是否安装成功打开cmd，输入 node –v 查看版本。若出现以下现象代表安装成功，版本号可能有所不同。安装less在线安装打开cmd，输入 npm install -g less (部分电脑要 sudo 管理权限)...
复制链接

扫一扫