Less学习笔记

最新推荐文章于 2024-09-28 19:02:04 发布

weixin_47360323

最新推荐文章于 2024-09-28 19:02:04 发布

阅读量154

点赞数

文章标签： less 前端 css

本文链接：https://blog.csdn.net/weixin_47360323/article/details/122959764

版权

前言

less官网：Less 快速入门 | Less.js 中文文档 - Less 中文网

了解less

Less是一种css预编译语言。（less、sass是主流的css预编译器）

由于css不能嵌套、很多重复。不能定义变量，没有编程语言的特性。

所以less是为css增加一些编程特性。以面向对象的思想看待css。

less的引入

方法一：这种方法因为直接引用less是在每次在加载网页时才对less进行编译所以不常用。

不仅要引入需要的less源文件，还要下载引入less.js文件，这样才能编译less文件。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet/less" href="less/style.less" />
  </head>
  <body>
    <script src="js/less.js"><script/>
  </body>
</html>

方法二：先编译less文件，然后直接引入css文件。

vscode可以使用esay less插件。

变量

在less中写@用来表示定义变量

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

Less可以多次解析：

@primary:  green;
@color: primary;

.section {
  .element {
    color: @@color;
}

字符串中写变量需要加{}:

@img_url："/src/img";

header{
    background-image:url("@{img_url}/bg.jpg");
}

伪选择器：

第一种写法：

p{
  color: yellow;  
  a{
        color: red;
    }
    a:hover{
        color: aqua;
    }
}

第二种写法：&表示当前选择器的父级

p{
    color: yellow;
    a{
        color: red;
        &:hover{
            color: aqua;
        }
    }
}

选择器：（写变量名的时候记得加 {} ）

@my-selector: banner;

.@{my-selector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

编译结果：

.banner {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

混合

不传参：

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}


#menu a {
  color: #111;
  .bordered();//可以加括号
}

.post a {
  color: red;
  .bordered;//也可以不加括号
}

传参：（可设置默认值）

.foo (@bg: #f5f5f5, @color: #900) {
  background: @bg;
  color: @color;
}
//这里设置可传参背景颜色和字体颜色，默认值分别为#f5f5f5和#900


.unimportant {
  .foo();
}
.important {
  .foo(red,yellow) !important;
}

模式匹配：

.mixin(@_; @color) {
  display: block;
}
.mixin(dark; @color) {
  color: darken(@color, 10%);
}
.mixin(light; @color) {
  color: lighten(@color, 10%);
}



@switch: light;

.class {
  .mixin(@switch; #888);
}

@_其他任意值匹配（应该放到最前面，因为会覆盖）

命名空间和访问符

有时候混合只是为了提高复用，注意命名规范。

#bundle() {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white;
    }
  }
  .tab { ... }
  .citation { ... }
}


//只使用bundle中的button的样式
#header a {
  color: orange;
  #bundle.button();  // 还可以书写为 #bundle > .button 形式
}

作用域

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

所以下文两端代码一样：

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

@var: red;

#page {
  #header {
    color: @var; // white
  }
  @var: white;
}

weixin_47360323

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫