Less 食用指南

最新推荐文章于 2023-12-22 14:20:18 发布

leemraz

最新推荐文章于 2023-12-22 14:20:18 发布

阅读量333

点赞数

分类专栏： AboutFrontend

本文链接：https://blog.csdn.net/Tmraz/article/details/109621755

版权

AboutFrontend 专栏收录该内容

48 篇文章 0 订阅

订阅专栏

文章目录

简介
几个概念
食用

简介

效果就是看了这篇文章能使用less来进行开发。其他的更详细的可以参考官网或者别人的blog
参考文章：https://segmentfault.com/a/1190000012360995?utm_source=sf-related

几个概念

vw
说明：相对于视口的宽度，视口被均分为100单位的vw
示例代码

h1 {
	font-size: 8vw;
}

如果视口的宽度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100
浅绿 = 支持
红色 = 不支持
粉色 = 部分支持

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title></title>

<style>
p {
	font-size: 5vw;
}
</style>
</head>
<body>
<p>相对于viewport宽度大小的文字</p>
</body>
</html>

全局字体设置

html {
    font-size: 14px;
    height: 0;
    font-family: Helvetica, '微软雅黑'; // Mac系统默认设置：Helvetica. Windows系统默认设置：'微软雅黑'
  }

写后端的程序员对前端布局这些确实没那么感冒。字体的样式跟系统（windows，Mac）以及浏览器的内核有关系。
一般前端遵循风格统一的原则，所以一般设置一个全局字体样式。其他地方只修改字体的颜色和大小等。

Helvetica 是一种被广泛使用的的西文字体，于1957年由瑞士字体设计师爱德华德·霍夫曼（Eduard Hoffmann）和马克斯·米耶丁格（Max Miedinger）设计。体现了瑞士设计的理性主义精神，同时被认为是现代主义设计理念的典范。
Helvetica 也是苹果电脑的默认字体，微软常用的Arial字体同样来自于它。2007年是Helvetica诞生的第50年，作为在平面设计和商业上非常普及和成功的一款字体，英国导演 Gary Hustwit 专门为它拍摄了一部纪录片《Helvetica》。
Helvetica 被大量使用于企业Logo上，如3M、美国航空、BMW、德国汉莎航空公司、Fendi、Jeep、英特尔、无印良品、雀巢、松下、Microsoft、三菱电机、摩托罗拉、丰田、三星、渣打银行等。

选择预处理语言

节选自《学习Less-看这篇就够了》
这是一个十分纠结的问题。
在我看来，这就好比找女朋友，有人喜欢贤惠安静的，就有人喜欢活泼爱闹的，各有各的爱好，可晚上闭灯后其实都差不多，所以你不用太过纠结。当然了，首先你要有女朋友。
在网上讨论看来，Sass 与 Stylus 相比于 Less 功能更为丰富，但对于学习成本以及适应时间，Less 稍胜一筹，这也是我选择 Less 的原因。
Less 没有去掉任何 CSS 的功能，而是在现有的语法上，增添了许多额外的功能特性，所以学习 Less 是一件非常舒服的事情。
如果你之前没有接触过预处理语言，纠结应该学哪一个，不如先看看下面 Less 的介绍，我相信你会爱上它的。

关于else

节选自《https://tomotoes.com/blog/weibo/》
我 coding 时有一个怪癖, 说出来可能很可笑
我非常痛恨 else 的存在, 如果我写的代码中存在多个 else 那简直是对自己的侮辱. 在我眼里 else 就是丑陋的象征,
每当我看到 else , 我都会想方设法把它优化掉. 抛去特定的业务不谈, 如果一段代码的存在多个 else ,
那很有可能是整个数据传递的设计都存在着问题. 平时我用到的技巧如下:

双分支 => 使用默认值多分支 => 提前退出双分支且代码很短时 => 三元运算符 5个分支以上时 => switch
分支与分支逻辑存在抽象时 => map 映射, 提取成 enum 提前对分支逻辑做更细致的抽象, 或者状态提升等语言相关的模式语法
(比如: java8 optional) 暂时想到这么多

贴一段我上周写的代码:
// NOTE: 利用一点语法糖, 让代码逻辑变得清晰明了 
const [patchedAngle] = [angle]
	.map(angle => angle % 180) 	.map(angle => angle < 90 ? angle : 180 -
angle) 

食用

1 变量

值变量

以 @ 开头定义变量，并且使用时直接键入 @名称。
在平时工作中，我们就可以把常用的变量封装到一个文件中，这样利于代码组织维护。

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

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

选择器变量

让选择器变成动态

      /* 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-20*5;
        margin:(@width-20)*5;
        color:@color*2;
        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.";
      }

用变量去定义变量

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

2 嵌套

& 的妙用

& ：代表的上一层选择器的名字，此例便是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 提供了一个十分便捷的方式
唯一的缺点就是每一个元素都会编译出自己 @media 声明，并不会合并。

      /* 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;
        }
      }

实战技巧

可以借助 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的操作了，更多的高效方法可以看完下面这篇文章
https://tomotoes.com/blog/learning-less-seeing-this-is-enough/
https://segmentfault.com/a/1190000012360995?utm_source=sf-related