Less快速入门学习
昨天学习微信小程序的过程中,发现老师用了less来写css,因为我只学过基础的css,所以对这个不是很熟悉,打算快速入门一下,想快速了解下的兄弟们可以看下。

LESS

中文文档

https://less.bootcss.com/

在官方中文文档中,对less做了简要概述:

Less (Leaner Style Sheets 的缩写) 是一门向后兼容的 CSS 扩展语言。

也就是说less兼容了css的所有特性,并且对css做了一些扩充,让我们在使用过程中更加简单。正如中文文档中所说:

因为 Less 和 CSS 非常像,因此很容易学习。而且 Less 仅对 CSS 语言增加了少许方便的扩展,这就是 Less 如此易学的原因之一。

vscode使用方法

首先在vscode中安装less插件,比如这个easy less

%title插图%num

然后我们在扩展中增加下这个设置,这里.css指的是你要写的样式文件的后缀,如果你写小程序的style,把这里改为.wxss即可。

%title插图%num

之后我们在文件列表创建一个style.less文件,在写一些样式之后保存,就会自动生成一个style.css文件。

快速入门

Less 到底为 CSS 添加了什么功能?以下就是这些新加功能的概览。

我们以下面这个html页面为例

<body>
    <div class="box">
        <header></header>
        <section>
            <span></span>
        </section>
        <footer></footer>
    </div>
</body>

变量(Variables)

在less文件中我们可以这么写,感觉一看就明白了

@weight1:600px;
@color1:pink;
.box {
    width: @weight1;
    height: 800px;
    background-color: @color1;
}

%title插图%num

嵌套

 
/* 变量 */
@weight1:600px;
@color1:pink;
.box {
    width: @weight1;
    height: 800px;
    background-color: @color1;
    section{
        width: 400px;
        height: 400px;
        background-color: yellow;
        span{
            display: block;
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    }
}

%title插图%num

 

伪类

&:hover{
    background-color: #fff;
}

其中“&”的作用是父类选择器,比如我们在selection标签中加上这个属性,让鼠标移动到selection上的时候,其背景颜色变为白色

 /* 变量 */
@weight1:600px;
@color1:pink;
.box {
    width: @weight1;
    height: 800px;
    background-color:  @color1;
    section{
      width: 400px;
      height: 400px;
      background-color: yellow;
      // & 作用:父类选择器
      &:hover{
        background-color: #fff;
      }
      span{
        display: block;
        width: 200px;
        height: 200px;
        background-color: skyblue;
      }
    }
  }

%title插图%num

此外还有伪元素、媒体查询等,后续再继续学习

 

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇