【转载】Less

最新推荐文章于 2023-02-17 21:50:34 发布

dandan_222

最新推荐文章于 2023-02-17 21:50:34 发布

阅读量234

点赞数 1

分类专栏：前端 Less&Sass 文章标签： Less

前端同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

Less&Sass

1 篇文章 0 订阅

订阅专栏

CSS的短板
作为前端学习者的我们或多或少都要学些 CSS ，它作为前端开发的三大基石之一，时刻引领着 Web 的发展潮向。而 CSS 作为一门标记性语言，可能给初学者第一印象就是简单易懂，毫无逻辑，不像编程该有的样子。在语法更新时，每当新属性提出，浏览器的兼容又会马上变成绊脚石，可以说 CSS 短板不容忽视。

问题的诞生往往伴随着技术的兴起， 在 Web 发展的这几年， 为了让 CSS 富有逻辑性，短板不那么严重，涌现出了 一些神奇的预处理语言。 它们让 CSS 彻底变成一门 可以使用 变量 、循环 、继承 、自定义方法等多种特性的标记语言，逻辑性得以大大增强。

预处理语言的诞生
其中就我所知的有三门语言：Sass、Less 、Stylus 。

Sass 诞生于 2007 年，Ruby 编写，其语法功能都十分全面，可以说它完全把 CSS 变成了一门编程语言。另外在国内外都很受欢迎，并且它的项目团队很是强大，是一款十分优秀的预处理语言。
Stylus 诞生于 2010 年，来自 Node.js 社区，语法功能也和 Sass 不相伯仲，是一门十分独特的创新型语言。
Less 诞生于 2009 年，受Sass的影响创建的一个开源项目。它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充（引用于官网）。
选择预处理语言
这是一个十分纠结的问题。

在我看来，这就好比找女朋友，有人喜欢贤惠安静的，就有人喜欢活泼爱闹的，各有各的爱好，可晚上闭灯后其实都差不多，所以你不用太过纠结。当然了，首先你要有女朋友。

在网上讨论看来，Sass 与 Stylus 相比于 Less 功能更为丰富，但对于学习成本以及适应时间，Less 稍胜一筹，这也是我选择 Less 的原因。

Less 没有去掉任何 CSS 的功能，而是在现有的语法上，增添了许多额外的功能特性，所以学习 Less 是一件非常舒服的事情。

如果你之前没有接触过预处理语言，纠结应该学哪一个，不如先看看下面 Less 的介绍，我相信你会爱上它的。

使用 Less 的前奏
使用 Less 有两种方式

在页面中引入 Less.js
可在官网下载
或使用CDN

需要注意的是，link 标签一定要在 Less.js 之前引入，并且 link 标签的 rel 属性要设置为stylesheet/less。

   <link rel="stylesheet/less" href="style.less">
   <script src="less.min.js"></script>

在命令行使用npm安装
npm install -g less
具体使用命令

  $ lessc styles.less > styles.css

假如还有问题，官网已经有了明确的步骤。

如果你也是 Webpack 的使用者，还需要配合 less-loader 进行处理，具体可见我的这篇文章：Webpack飞行手册，里面详细说明了 less 的处理方式。

如果你在本地环境，可以使用第一种方式，非常简单；但在生产环境中，性能非常重要，最好使用第二种方式。

正文
下面我将简介 Less 的功能特性。

变量
我们常常在 CSS 中看到同一个值重复多次，这样难易于代码维护。
理想状态，应是下面这样：

const bgColor=“skyblue”;
$(".post-content").css(“background-color”,bgColor);
$("#wrap").css(“background-color”,bgColor);
$(".arctive").css(“background-color”,bgColor);
只要我们修改 bgColor这一个变量，整个页面的背景颜色都会随之改变。

而 Less 中的变量十分强大，可化万物，值得一提的是，其变量是常量，所以只能定义一次，不能重复使用。
值变量

  /* Less */
  @color: #999;
  @bgColor: skyblue;//不要添加引号
  @width: 50%;
  #wrap {
    color: @color;
    width: @width;
  }

  /* 生成后的 CSS */
  #wrap {
    color: #999;
    width: 50%;
  }

以 @ 开头定义变量，并且使用时直接键入 @名称。

在平时工作中，我们就可以把常用的变量封装到一个文件中，这样利于代码组织维护。

  @lightPrimaryColor: #c5cae9;
  @textPrimaryColor: #fff;
  @accentColor: rgb(99, 137, 185);
  @primaryTextColor: #646464;
  @secondaryTextColor: #000;
  @dividerColor: #b6b6b6;
  @borderColor: #dadada;

选择器变量

让选择器变成动态

  /* Less */
  @mySelector: #wrap;
  @Wrap: wrap;
  @{mySelector}{ //变量名 必须使用大括号包裹
    color: #999;
    width: 50%;
  }
  .@{Wrap}{
    color:#ccc;
  }
  #@{Wrap}{
    color:#666;
  }

  /* 生成的 CSS */
  #wrap{
    color: #999;
    width: 50%;
  }
  .wrap{
    color:#ccc;
  }
  #wrap{
    color:#666;
  }

属性变量

可减少代码书写量

  /* Less */
  @borderStyle: border-style;
  @Soild:solid;
  #wrap{
    @{borderStyle}: @Soild;//变量名 必须使用大括号包裹
  }

  /* 生成的 CSS */
  #wrap{
    border-style:solid;
  }

url 变量

项目结构改变时，修改其变量即可。

  /* Less */
  @images: "../img";//需要加引号
  body {
    background: url("@{images}/dog.png");//变量名 必须使用大括号包裹
  }

  /* 生成的 CSS */
  body {
    background: url("../img/dog.png");
  }

声明变量

有点类似于下面的混合方法

  - 结构: @name: { 属性: 值 ;};
  - 使用：@name();
  /* Less */
  @background: {background:red;};
  #main{
      @background();
  }
  @Rules:{
      width: 200px;
      height: 200px;
      border: solid 1px red;
  };
  #con{
    @Rules();
  }

  /* 生成的 CSS */
  #main{
    background:red;
  }
  #con{
    width: 200px;
    height: 200px;
    border: solid 1px red;
  }

变量运算

不得不提的是，Less 的变量运算完全超出我的期望，十分强大。

加减法时以第一个数据的单位为基准
乘除法时注意单位一定要统一
/* Less /
@width:300px;
@color:#222;
#wrap{
width:@width-20;
height:@width-205;
margin:(@width-20)5;
color:@color2;
background-color:@color + #111;
}

/* 生成的 CSS */
#wrap{
width:280px;
height:200px;
margin:1400px;
color:#444;
background-color:#333;
}

变量作用域

一句话理解就是：就近原则，不要跟我提闭包。

借助官网的Demo

  /* Less */
  @var: @a;
  @a: 100%;
  #wrap {
    width: @var;
    @a: 9%;
  }

  /* 生成的 CSS */
  #wrap {
    width: 9%;
  }

用变量去定义变量

  /* Less */
  @fnord:  "I am fnord.";
  @var:    "fnord";
  #wrap::after{
    content: @@var; //将@var替换为其值 content:@fnord;
  }
  /* 生成的 CSS */
  #wrap::after{
    content: "I am fnord.";
  }

嵌套
& 的妙用

& ：代表的上一层选择器的名字，此例便是header。

  /* Less */
  #header{
    &:after{
      content:"Less is more!";
    }
    .title{
      font-weight:bold;
    }
    &_content{//理解方式：直接把 & 替换成 #header
      margin:20px;
    }
  }
  /* 生成的 CSS */
  #header::after{
    content:"Less is more!";
  }
  #header .title{ //嵌套了
    font-weight:bold;
  }
  #header_content{//没有嵌套！
      margin:20px;
  }

媒体查询

在以往的工作中，我们使用媒体查询，都要把一个元素分开写

  #wrap{
    width:500px;
  }
  @media screen and (max-width:768px){
    #wrap{
      width:100px;
    }
  }

Less 提供了一个十分便捷的方式

  /* Less */
  #main{
      //something...

      @media screen{
          @media (max-width:768px){
            width:100px;
          }
      }
      @media tv {
        width:2000px;
      }
  }
  /* 生成的 CSS */
  @media screen and (maxwidth:768px){
    #main{
        width:100px; 
    }
  }
  @media tv{
    #main{
      width:2000px;
    }
  }

唯一的缺点就是每一个元素都会编译出自己 @media 声明，并不会合并。

实战技巧

可以借助 Less 在元素中，去定义自己的私有样式。

  /* Less */
  #main{
    // something..
    &.show{
      display:block;
    }
  }
  .show{
    display:none;
  }
  const main = document.getElementById("main");
  main.classList.add("show");

结果：

  #main.show{
    display:block;
  }
  .show{
    display:none; //会被覆盖。
  }

混合方法
无参数方法

方法犹如声明的集合，使用时直接键入名称即可。

  /* Less */
  .card { // 等价于 .card()
      background: #f6f6f6;
      -webkit-box-shadow: 0 1px 2px rgba(151, 151, 151, .58);
      box-shadow: 0 1px 2px rgba(151, 151, 151, .58);
  }
  #wrap{
    .card;//等价于.card();
  }
  /* 生成的 CSS */
  #wrap{
    background: #f6f6f6;
    -webkit-box-shadow: 0 1px 2px rgba(151, 151, 151, .58);
    box-shadow: 0 1px 2px rgba(151, 151, 151, .58);
  }

其中 .card 与 .card() 是等价的。
个人建议，为了避免代码混淆，应写成 :

  .card(){
    //something...
  }
  #wrap{
    .card();
  }

要点：
. 与 # 皆可作为方法前缀。
方法后写不写 () 看个人习惯。
默认参数方法

Less 可以使用默认参数，如果没有传参数，那么将使用默认参数。

@arguments 犹如 JS 中的 arguments 指代的是全部参数。

传的参数中必须带着单位。

  /* Less */
  .border(@a:10px,@b:50px,@c:30px,@color:#000){
      border:solid 1px @color;
      box-shadow: @arguments;//指代的是 全部参数
  }
  #main{
      .border(0px,5px,30px,red);//必须带着单位
  }
  #wrap{
      .border(0px);
  }
  #content{
    .border;//等价于 .border()
  }

  /* 生成的 CSS */
  #main{
      border:solid 1px red;
      box-shadow:0px,5px,30px,red;
  }
  #wrap{
      border:solid 1px #000;
      box-shadow: 0px 50px 30px #000;
  }
  #content{
      border:solid 1px #000;
      box-shadow: 10px 50px 30px #000;
  }

方法的匹配模式

与面向对象中的多态很相似

  /* Less */
  .triangle(top,@width:20px,@color:#000){
      border-color:transparent  transparent @color transparent ;
  }
  .triangle(right,@width:20px,@color:#000){
      border-color:transparent @color transparent  transparent ;
  }

  .triangle(bottom,@width:20px,@color:#000){
      border-color:@color transparent  transparent  transparent ;
  }
  .triangle(left,@width:20px,@color:#000){
      border-color:transparent  transparent  transparent @color;
  }
  .triangle(@_,@width:20px,@color:#000){
      border-style: solid;
      border-width: @width;
  }
  #main{
      .triangle(left, 50px, #999)
  }
  /* 生成的 CSS */
  #main{
    border-color:transparent  transparent  transparent #999;
    border-style: solid;
    border-width: 50px;
  }

要点

第一个参数 left 要会找到方法中匹配程度最高的，如果匹配程度相同，将全部选择，并存在着样式覆盖替换。
如果匹配的参数是变量，则将会匹配，如 @_ 。
方法的命名空间

让方法更加规范

  /* Less */
  #card(){
      background: #723232;
      .d(@w:300px){
          width: @w;
          
          #a(@h:300px){
              height: @h;//可以使用上一层传进来的方法
              width: @w;
          }
      }
  }
  #wrap{
      #card > .d > #a(100px); // 父元素不能加 括号
  }
  #main{
      #card .d();
  }
  #con{
      //不得单独使用命名空间的方法
      //.d() 如果前面没有引入命名空间 #card ，将会报错
      
      #card; // 等价于 #card();
      .d(20px); //必须先引入 #card
  }
  /* 生成的 CSS */
  #wrap{
    height:100px;
    width:300px;
  }
  #main{
    width:300px;
  }
  #con{
    width:20px;
  }

要点

在 CSS 中> 选择器，选择的是儿子元素，就是必须与父元素有直接血源的元素。
在引入命令空间时，如使用 > 选择器，父元素不能加括号。
不得单独使用命名空间的方法必须先引入命名空间，才能使用其中方法。
子方法可以使用上一层传进来的方法
方法的条件筛选

Less 没有 if else，可是它有 when

/* Less */
#card{
    
    // and 运算符 ，相当于 与运算 &&，必须条件全部符合才会执行
    .border(@width,@color,@style) when (@width>100px) and(@color=#999){
        border:@style @color @width;
    }

    // not 运算符，相当于 非运算 !，条件为 不符合才会执行
    .background(@color) when not (@color>=#222){
        background:@color;
    }

    // , 逗号分隔符：相当于 或运算 ||，只要有一个符合条件就会执行
    .font(@size:20px) when (@size>50px) , (@size<100px){
        font-size: @size;
    }
}
#main{
    #card>.border(200px,#999,solid);
    #card .background(#111);
    #card > .font(40px);
}
/* 生成后的 CSS */
#main{
  border:solid #999 200px;
  background:#111;
  font-size:40px;
}

要点

比较运算有： > >= = =< <。
= 代表的是等于
除去关键字 true 以外的值都被视为 false：
数量不定的参数

如果你希望你的方法接受数量不定的参数，你可以使用… ，犹如 ES6 的扩展运算符。

  /* Less */
  .boxShadow(...){
      box-shadow: @arguments;
  }
  .textShadow(@a,...){
      text-shadow: @arguments;
  }
  #main{
      .boxShadow(1px,4px,30px,red);
      .textShadow(1px,4px,30px,red);
  }

  /* 生成后的 CSS */
  #main{
    box-shadow: 1px 4px 30px red;
    text-shadow: 1px 4px 30px red;
  }

方法使用important！

使用方法非常简单，在方法名后加上关键字即可。

  /* Less */
  .border{
      border: solid 1px red;
      margin: 50px;
  }
  #main{
      .border() !important;
  }
  /* 生成后的 CSS */
  #main {
      border: solid 1px red !important;
      margin: 50px !important;
  }

循环方法

Less 并没有提供 for 循环功能，但这也难不倒聪明的程序员，使用递归去实现。

下面是官网中的一个 Demo，模拟了生成栅格系统。

  /* Less */
  .generate-columns(4);

  .generate-columns(@n, @i: 1) when (@i =< @n) {
    .column-@{i} {
      width: (@i * 100% / @n);
    }
    .generate-columns(@n, (@i + 1));
  }
  /* 生成后的 CSS */
  .column-1 {
    width: 25%;
  }
  .column-2 {
    width: 50%;
  }
  .column-3 {
    width: 75%;
  }
  .column-4 {
    width: 100%;
  }

属性拼接方法
+_ 代表的是空格；+ 代表的是逗号。

逗号
/* Less /
.boxShadow() {
box-shadow+: inset 0 0 10px #555;
}
.main {
.boxShadow();
box-shadow+: 0 0 20px black;
}
/ 生成后的 CSS */
.main {
box-shadow: inset 0 0 10px #555, 0 0 20px black;
}
空格
/* Less */
.Animation() {
transform+: scale(2);
}
.main {
.Animation();
transform+: rotate(15deg);
}

/* 生成的 CSS */
.main {
transform: scale(2) rotate(15deg);
}
实战技巧
下面是官网中的一个非常赞的 Demo

/* Less */
.average(@x, @y) {
@average: ((@x + @y) / 2);
}

div {
.average(16px, 50px); // 调用方法
padding: @average; // 使用返回值
}

/* 生成的 CSS */
div {
padding: 33px;
}
可以说 Less 是一门优雅编程语言。

继承
extend 是 Less 的一个伪类。它可继承所匹配声明中的全部样式。
extend 关键字的使用

  /* Less */
  .animation{
      transition: all .3s ease-out;
      .hide{
        transform:scale(0);
      }
  }
  #main{
      &:extend(.animation);
  }
  #con{
      &:extend(.animation .hide);
  }

  /* 生成后的 CSS */
  .animation,#main{
    transition: all .3s ease-out;
  }
  .animation .hide , #con{
      transform:scale(0);
  }

all 全局搜索替换

使用选择器匹配到的全部声明。
/* Less */
#main{
width: 200px;
}
#main {
&:after {
content:“Less is good!”;
}
}
#wrap:extend(#main all) {}

  /* 生成的 CSS */
  #main,#wrap{
    width: 200px;
  }
  #main:after, #wrap:after {
      content: "Less is good!";
  }

减少代码的重复性

从表面看来，extend 与方法最大的差别，就是 extend 是同个选择器共用同一个声明，而方法是使用自己的声明，这无疑增加了代码的重复性。

方法示例与上面的 extend 进行对比：

  /* Less */
  .Method{
    width: 200px;
    &:after {
        content:"Less is good!";
    }
  }
  #main{
    .Method;
  }
  #wrap{
    .Method;
  }

  /* 生成的 CSS */
  #main{
    width: 200px;
    &:after{
      content:"Less is good!";
    }  
  }
  #wrap{
    width: 200px;
    &:after{
      content:"Less is good!";
    }  
  }

要点

翻译官网

选择器和扩展之间是允许有空格的：pre:hover :extend(div pre).
可以有多个扩展: pre:hover:extend(div pre):extend(.bucket tr) - 注意这与 pre:hover:extend(div pre, .bucket tr)一样。
这是不可以的，扩展必须在最后 : pre:hover:extend(div pre).nth-child(odd)。
如果一个规则集包含多个选择器，所有选择器都可以使用extend关键字。

导入
导入 less 文件可省略后缀

import “main”;
//等价于
import “main.less”;
@import 的位置可随意放置

#main{
font-size:15px;
}
@import “style”;
reference

Less 中最强大的特性
使用引入的 Less 文件，但不会编译它。

/* Less */
@import (reference) “bootstrap.less”;

#wrap:extend(.navbar all){}
翻译官网：

使用@import (reference)导入外部文件，但不会添加把导入的文件编译到最终输出中，只引用。
once

@import语句的默认行为。这表明相同的文件只会被导入一次，而随后的导入文件的重复代码都不会解析。

@import (once) “foo.less”;
@import (once) “foo.less”; // this statement will be ignored
multiple

使用@import (multiple)允许导入多个同名文件。

/* Less */

// file: foo.less
.a {
color: green;
}
// file: main.less
@import (multiple) “foo.less”;
@import (multiple) “foo.less”;

/* 生成后的 CSS */
.a {
color: green;
}
.a {
color: green;
}
函数
判断类型

isnumber

判断给定的值是否是一个数字。

isnumber(#ff0);     // false
isnumber(blue);     // false
isnumber("string"); // false
isnumber(1234);     // true
isnumber(56px);     // true
isnumber(7.8%);     // true
isnumber(keyword);  // false
isnumber(url(...)); // false

iscolor

判断给定的值是否是一个颜色。
isurl

判断给定的值是否是一个 url 。
颜色操作

saturate

增加一定数值的颜色饱和度。
lighten

增加一定数值的颜色亮度。
darken

降低一定数值的颜色亮度。
fade

给颜色设定一定数值的透明度。
mix

根据比例混合两种颜色。
数学函数

ceil

向上取整。
floor

向下取整。
percentage

将浮点数转换为百分比字符串。
round

四舍五入。
sqrt

计算一个数的平方根。
abs

计算数字的绝对值，原样保持单位。
pow

计算一个数的乘方。
由于文章篇幅有限，所以只能介绍一些使用效率高的函数。

如果你想了解更多，可以去官网的函数链接

其他
注释

/* / CSS原生注释，会被编译在 CSS 文件中。
/ / Less提供的一种注释，不会被编译在 CSS 文件中。
避免编译
/ Less */
#main{
width:~‘calc(300px-30px)’;
}

  /* 生成后的 CSS */
  #main{
    width:calc(300px-30px);
  }

结构： ~' 值 '
使用 JS
因为 Less 是由 JS 编写，所以 Less 有一得天独厚的特性：代码中使用 Javascript 。

  /* Less */
  @content:`"aaa".toUpperCase()`;
  #randomColor{
    @randomColor: ~"rgb(`Math.round(Math.random() * 256)`,`Math.round(Math.random() * 256)`,`Math.round(Math.random() * 256)`)";
  }
  #wrap{
    width: ~"`Math.round(Math.random() * 100)`px";
    &:after{
        content:@content;
    }
    height: ~"`window.innerHeight`px";
    alert:~"`alert(1)`";
    #randomColor();
    background-color: @randomColor;
  }
  /* 生成后的 CSS */

  // 弹出 1
  #wrap{
    width: 随机值（0~100）px;
    height: 743px;//由电脑而异
    background: 随机颜色;
  }
  #wrap::after{
    content:"AAA";
  }
前几个月 ， 有个 CSS in JS 的概念非常火，现在 看来 JS in CSS 也未曾不可。

我觉得完全可以根据 Less 这个特性来造个轮子，JS来控制 CSS ，形成动态属性，如果成功很可能会改变现在前端的打开姿势。

欢迎使用Markdown编辑器

你好！这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

新的改变

我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：

全新的界面设计 ，将会带来全新的写作体验；
在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示；
增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示；
全新的 KaTeX数学公式 语法；
增加了支持甘特图的mermaid语法¹ 功能；
增加了 多屏幕编辑 Markdown文章功能；
增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能，功能按钮位于编辑区域与预览区域中间；
增加了 检查列表 功能。

功能快捷键

撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
检查列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G

合理的创建标题，有助于目录的生成

直接输入1次#，并按下space后，将生成1级标题。
输入2次#，并按下space后，将生成2级标题。
以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

如何改变文本的样式

强调文本 强调文本

加粗文本 加粗文本

标记文本

~~删除文本~~

引用文本

H₂O is是液体。

2¹⁰ 运算结果是 1024.

插入链接与图片

链接: link.

图片:

带尺寸的图片:

居中的图片:

居中并且带尺寸的图片:

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

如何插入一段漂亮的代码片

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

// An highlighted block
var foo = 'bar';

生成一个适合你的列表

项目
- 项目
  - 项目

项目1
项目2
项目3

计划任务
完成任务

创建一个表格

一个简单的表格是这么创建的：

项目	Value
电脑	$1600
手机	$12
导管	$1

设定内容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列	第二列	第三列
第一列文本居中	第二列文本居右	第三列文本居左

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

TYPE	ASCII	HTML
Single backticks	`'Isn't this fun?'`	‘Isn’t this fun?’
Quotes	`"Isn't this fun?"`	“Isn’t this fun?”
Dashes	`-- is en-dash, --- is em-dash`	– is en-dash, — is em-dash

创建一个自定义列表

Markdown

Text-to- HTML conversion tool

Authors

John

Luke

如何创建一个注脚

一个具有注脚的文本。²

注释也是必不可少的

Markdown将文本转换为 HTML。

KaTeX数学公式

您可以使用渲染LaTeX数学表达式 KaTeX:

Gamma公式展示 $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ 是通过欧拉积分

$\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.$

你可以找到更多关于的信息 LaTeX 数学表达式here.

新的甘特图功能，丰富你的文章

关于 甘特图 语法，参考这儿,

UML 图表

可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图：:

这将产生一个流程图。:

关于 Mermaid 语法，参考这儿,

FLowchart流程图

我们依旧会支持flowchart的流程图：

关于 Flowchart流程图 语法，参考这儿.

导出与导入

导出

如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ，生成一个.md文件或者.html文件进行本地保存。

导入

如果你想加载一篇你写过的.md文件或者.html文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，
继续你的创作。

mermaid语法说明 ↩︎
注脚的解释 ↩︎

dandan_222

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【转载】Less

@TOC前言CSS的短板作为前端学习者的我们或多或少都要学些 CSS ，它作为前端开发的三大基石之一，时刻引领着 Web 的发展潮向。而 CSS 作为一门标记性语言，可能给初学者第一印象就是简单易懂，毫无逻辑，不像编程该有的样子。在语法更新时，每当新属性提出，浏览器的兼容又会马上变成绊脚石，可以说 CSS 短板不容忽视。问题的诞生往往伴随着技术的兴起，在 Web 发展的这几年，为...
复制链接

扫一扫