两分钟快速上手less

最新推荐文章于 2024-07-21 23:30:31 发布

叶子yes

最新推荐文章于 2024-07-21 23:30:31 发布

阅读量689

点赞数 8

分类专栏： css3 文章标签： less css 前端

本文链接：https://blog.csdn.net/lq313131/article/details/127183503

版权

css3 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

1、less介绍

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

在node环境下使用less：
全局安装less

npm i -g less

局部安装less

npm i -S less

查看less版本

lessc -v

将.less文件转成.css文件

lessc styles.less styles.css

在浏览器环境下使用less：

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<!-- 需要一个less编译器 需要引入less -->
<script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.3/less.js"></script>

vscode中安装一个插件：Easy LESS，此插件可以自动将.less文件转成.css文件。

2、变量

下面的代码中：@mycolor是一个变量，值为red

@mycolor:red;
body{
  color: @mycolor
}

编译为css：

body {
  color: red;
}

3、混合

混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。

使用混入只需要加上小括号()

#one{
  font-size: 28px;
  color: teal;
  font-family: '楷体';
}
.header{
  background-color: #fff;
}
body{
  color: red;
  // 使用混入
  #one();
  .header()
};

编译为css：

#one {
  font-size: 28px;
  color: teal;
  font-family: '楷体';
}
.header {
  background-color: #fff;
}
body {
  color: red;
  font-size: 28px;
  color: teal;
  font-family: '楷体';
  background-color: #fff;
}

4、嵌套

Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。

div{
  // & 表示当前选择器
  &>a{
    text-decoration: none;
  }
  .one{
    color: red;
  }
}

编译为css：

div > a {
  text-decoration: none;
}
div .one {
  color: red;
}

@规则嵌套和冒泡

@ 规则（例如 @media 或 @supports）可以与选择器以相同的方式进行嵌套。@ 规则会被放在前面，同一规则集中的其它元素的相对顺序保持不变。这叫做冒泡（bubbling）

.component {
  width: 300px;
  @media (min-width: 768px) {
    width: 600px;
    @media  (min-resolution: 192dpi) {
      background-color: red;
    }
  }
  @media (min-width: 1280px) {
    width: 800px;
  }
}

编译为css：

.component {
  width: 300px;
}
@media (min-width: 768px) {
  .component {
    width: 600px;
  }
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
  .component {
    background-color: red;
  }
}
@media (min-width: 1280px) {
  .component {
    width: 800px;
  }
}

5、运算

算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。

div{
  width: 100px + 50rem; //以第一个像素单位为准 
  width: 100rem + 50px; //以第一个像素单位为准 
	width: 100px + 10cm; //以实际操作为准
  width: 10cm * 2rem; //以第一个单位为准
  color: (#224488 / 2);
  color: #112244 + #111;
}

编译为css：

div {
  width: 150px;
  width: 150rem;
  width: 477.95275591px;
  width: 20cm;
  color: #112244;
  color: #223355;
}

calc()特例

calc() 并不对数学表达式进行计算，但是在嵌套函数中会计算变量和数学公式的值。

div{
  width: calc(100px + 20px)
}

编译为css：

div {
  width: calc(100px + 20px);
}

6、转义

转义（Escaping）允许你使用任意字符串作为属性或变量值。何 ~"anything" 或 ~'anything' 形式的内容都将按原样输出。

@min768: ~"(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
    background-color: blue;
  }
}

编译成css：

@media (min-width: 768px) {
  .element {
    font-size: 1.2rem;
    background-color: blue;
  }
}

7、函数

Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。这些函数在Less 函数手册中有详细介绍。

下面的代码利用 percentage 函数将 0.5 转换为 50%，利用saturate函数将颜色饱和度增加 5%

@mycolor:orange;
@width:0.5;
.element{
  color: saturate(@mycolor,85%);
  width: percentage(@width,0.5);
}

编译成css：

.element {
  color: #ffa500;
  width: 50%;
}

8、命名空间和访问符

有时，出于组织结构或仅仅是为了提供一些封装的目的，你希望对混合（mixins）进行分组。你可以用 Less 更直观地实现这一需求。假设你希望将一些混合（mixins）和变量置于 #one 之下，为了以后方便重用或分发：

#one{
  .button{
    font-size: 28px;
    background-color: blue;
  }
  .button1{
    font-family: '宋体';
  }
}
body{
  color: red;
  // 使用
  #one.button();
}

编译为css：

#one .button {
  font-size: 28px;
  background-color: blue;
}
#one .button1 {
  font-family: '宋体';
}
body {
  color: red;
  font-size: 28px;
  background-color: blue;
}

9、映射

你可以将混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用。

使用中括号 [] 获取某一条规则

#one{
  .button{
    font-size: 28px;
    background-color: blue;
  }
}
body{
  color: red;
  // 使用
  font-family: #one.button[font-size];
}

编译成css：

#one .button {
  font-size: 28px;
  background-color: blue;
}
body {
  color: red;
  font-family: 28px;
}

10、作用域

Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承。

@mycolor:orange;
.element{
  @mycolor: teal;
  color: @mycolor; //当前作用域有@mycolor变量，因此color会取teal
}

编译为css：

.element {
  color: teal;
}

11、注释

less的注释和css注释一样：
// 单行注释

/* 多行注释 */

12、导入

你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉：

@import "library"; // library.less
@import "typo.css";

叶子yes

关注

8
点赞
踩
10

收藏

觉得还不错? 一键收藏
10
评论
两分钟快速上手less

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。全局安装less局部安装less查看less版本lessc -v将.less文件转成.css文件vscode中安装一个插件：Easy LESS，此插件可以自动将.less文件转成.css文件。
复制链接

扫一扫