使用CSS预处理器Less

简介: 前天写了一篇文章,关于如何使用Harp来加快人的开发效率,在Mac系统和Linux系统上测试是没有问题的,但没有在Windows上测试,使用Windows的刚入门的前端工程师,安装Harp失败后,不知道怎么解决问题。

前天写了一篇文章,关于如何使用Harp来加快人的开发效率,在Mac系统和Linux系统上测试是没有问题的,但没有在Windows上测试,使用Windows的刚入门的前端工程师,安装Harp失败后,不知道怎么解决问题。不管学习什么,解决问题的能力是最重要的,学会自己动手。

简介

css有以下特点:

  • 语法不够强大,比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器;选择父级元素,对子元素选择的时候还要再写一次。

  • 没有变量和合理的样式复用机制,使得逻辑上相关的属性值必须以字面量的形式重复输出,导致难以维护。页面中的主色调就几个而已,如果使用CSS,假如主色调改变了,那么要改变css的很多样式,维护起来非常麻烦。

然而css的预处理器刚好给我们提供了一些便利。这里我们主要说明Less。它提供了以下功能。这些用法这里不会完全涉及,可以参考官方文档。

  • 基本语法
  • 嵌套语法
  • 变量
  • @import
  • 混入
  • 继承
  • 函数
  • 逻辑控制

使用Less

这里主要说的是在客户端使用less
1、新建html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Less</title>
    <link rel="stylesheet/less" type="text/css" href="css/my.less">
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

</head>
<body>

<div>
    <p>你好啊</p>
    <h1>
        我正在使用<span>Less</span>
    </h1>
</div>

</body>
</html>

注意里面要先引入自己写的less文件。
<link rel="stylesheet/less" type="text/css" href="css/my.less" />

再引入less的js文件,可以使用CDN,也可以下载到本地引入
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

2、less文件的内容


@base: #f938ab;

div{
  background: red;
  h1{
    background: yellow;
    span{
      background: blue;
    }
  }

  p{
    background: @base;
  }
}

可以这些基本的less写法,已经比css简单很多了,这里主要涉及到嵌套选择器定义颜色变量

3、直接在浏览器打开HTML页面即可

img_94d0d563808f53267a716af94b0ef9b0.png
效果图

总结

这篇文章主要介绍了css的劣势,以及简单说了css预处理器的一些特点。最后使用一个案例来说明less的使用。

生产环境尽量使用css,可以直接使用命令将less编译为css文件,再在html页面里面引入css即可。平时开发可直接使用less。

注意: harp现在在windows不好用

附录

相关文章
|
前端开发 开发者
CSS预处理器Less、Scss
【10月更文挑战第3天】
238 59
|
前端开发 开发者
在 Vite 中使用 CSS 预处理器的劣势是什么?
在 Vite 中使用 CSS 预处理器的劣势是什么?
|
11月前
|
前端开发
create-react-app 如何使用 less/sass 和 react-css-modules?
本文详细介绍了在 create-react-app 项目中如何使用 less/sass 和 react-css-modules 来管理和应用样式。首先,通过安装相应依赖并配置 webpack 支持 less/sass;接着,介绍如何使用这些预处理器编写样式;最后,讲解了如何配置和使用 react-css-modules 实现样式的模块化管理,以及如何结合使用 less/sass 和 react-css-modules 提高开发效率和代码质量。
241 3
|
前端开发 开发者
CSS的预处理器是什么?
CSS的预处理器是什么?
160 4
|
前端开发
在 Vite 中使用 CSS 预处理器的优势是什么?
在 Vite 中使用 CSS 预处理器的优势是什么?
|
存储 前端开发 开发者
深入了解 Sass 和 SCSS:CSS 预处理器的强大功能
Sass(Syntactically Awesome Stylesheets)是一个强大的 CSS 预处理器,为开发者提供了诸多高级特性,如变量、嵌套、混合、继承等,简化了 CSS 的编写和管理。SCSS 是 Sass 3 引入的新语法,完全兼容 CSS3,并增强了 Sass 的动态功能。本文详细介绍了 Sass 和 SCSS 的核心特性及其在实际开发中的应用,如变量定义、嵌套规则、混合、继承、以及常用的操作符与扩展功能。
456 0
|
前端开发 开发者 容器
Vue3中Sass的安装与使用指南:轻松上手CSS预处理器
Vue3中Sass的安装与使用指南:轻松上手CSS预处理器
1013 0
|
前端开发 C++
CSS预处理器之Sass(一)
CSS预处理器之Sass(一)
138 2
expectedcss(css-rcurlyexpected),使用:变红怎么整,给他改成less就可以了
expectedcss(css-rcurlyexpected),使用:变红怎么整,给他改成less就可以了
|
前端开发
CSS预处理器之Sass(三)
CSS预处理器之Sass(三)
78 0

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
  • 7
    React 中如何安装与使用 Tailwind CSS
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
  • 9
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation