【CSS】LESS即学即用

最新推荐文章于 2024-09-20 13:52:59 发布
最新推荐文章于 2024-09-20 13:52:59 发布
阅读量449 收藏
点赞数
文章标签： css less less入门 less使用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32629809/article/details/78573192
版权
##less介绍

less是一门CSS预处理语言，它扩充了CSS语言，增加了诸如变量、混合(mixin)、函数等功能，让CSS更容易维护/方便制作主题/扩展。

如果我们已经安装了node，那么我们可以执行下面命令来安装less。

$ npm install -g less

然后执行或者lessc styles.less > styles.css进行编译，其中styles.less表示要编译的文件，styles.css表示的是要编译生成的文件。

我们也可以直接借助koala来进行自动化编译，前提是必须安装less，即用上面的npm install -g less进行安装。
koala的使用 - 设置less编译

将包含.less文件的目录拖放入koala工具里，然后设置输出路径

koala的使用 - 设置输出路径

less的使用入门
  • 我们在项目中新建style.less文件，文件目录级别如下图所示：

less的使用入门

  • index.html代码如下
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
</body>
</html>
  • style.less文件代码如下：
body {
    background-color: #EBEDEF;
}
  • 在koala中进行设置，不设置默认生成的为less文件当前目录层级的同名css文件：

less的使用入门

这时我们【执行编译】之后，将会生成style.css文件，文件内容如下：
less的使用入门

less的注释
  • less中有两种注释方式，分别为//和/**/，两种注释：
//这是less注释，不会变编译到css文件中去
/*
这段代码将会被编译到css文件中去
body {
    background-color: #EBEDEF;
}*/

这时我们打开，style.css文件显示如下：
less的使用入门 - 注释

less的变量
  • style.less文件内容如下：
@bg_color: #EBEDEE;
body {
    background-color: @bg_color;
}
  • 编译打开style.css的内容如下：
body {
  background-color: #EBEDEE;
}
less的混合
  • inde.html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div class="box"></div>
</body>
</html>
  • style.less文件如下：
.less_border {
    border: 1px solid gray;
}
.box {
    height: 100px;
    width: 100px;
    .less_border;
}

最后我们打开style.css文件如下所示：

.less_border {
  border: 1px solid gray;
}
.box {
  height: 100px;
  width: 100px;
  border: 1px solid gray;
}
less的匹配模式

less的匹配模式功能类似于js中的if，满足条件后才能匹配，下面来举个例子

  • index.html文件代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div class="sanjiao"></div>
</body>
</html>
  • style.less文件代码如下：
.triangle_defaul() {
    width: 0;
    height: 0;
    overflow: hidden;
}
//匹配模式
.triangle(top,@w:5px,@c:#ccc) {
    border-width: @w;
    border-color: transparent transparent @c transparent;
    border-style: dashed dashed solid dashed;
}
.triangle(bottom,@w:5px,@c:#ccc) {
    border-width: @w;
    border-color: @c transparent transparent transparent;
    border-style: solid dashed dashed dashed;
}
.triangle(right,@w:5px,@c:#ccc) {
    border-width: @w;
    border-color: transparent transparent transparent @c;
    border-style: dashed dashed dashed solid;
}
.triangle(left,@w:5px,@c:#ccc) {
    border-width: @w;
    border-color: transparent @c transparent transparent;
    border-style: dashed solid dashed dashed;
}

.sanjiao {
    .triangle_defaul();
    .triangle(left,10px,red);
}
  • style.css通过triangle传入的参数不同将会生成不一样的代码，下面是传入left表示箭头方向朝左，如下所示：
.sanjiao {
  width: 0;
  height: 0;
  overflow: hidden;
  border-width: 10px;
  border-color: transparent red transparent transparent;
  border-style: dashed solid dashed dashed;
}
less的运算
  • index.html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div class="box"></div>
</body>
</html>
  • style.less文件代码如下：
@box_width: 100px;
.test () {
    height: 100px + 10;
}
.box {
    width: @box_width + 10px;
    .test();
}

最后我们发现style.css里面的值计算显示结果如下代码所示：

@box_width: 100px;
.test () {
    height: 100px + 10;
}
.box {
    width: @box_width + 10px;
    .test();
}
less的嵌套
  • index.html中的代码如下：
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <ul class="list">
            <li><a href="#">这里是一个测试的文字</a><span>2014-10-22</span></li>
            <li><a href="#">这里是一个测试的文字</a><span>2014-10-22</span></li>
            <li><a href="#">这里是一个测试的文字</a><span>2014-10-22</span></li>
            <li><a href="#">这里是一个测试的文字</a><span>2014-10-22</span></li>
            <li><a href="#">这里是一个测试的文字</a><span>2014-10-22</span></li>
            <li><a href="#">这里是一个测试的文字</a><span>2014-10-22</span></li>
        </ul>
    </body>
</html>
  • 在style.less文件中，使用less嵌套规则制定样式：
.list {
    width: 600px;
    margin: 30px auto;
    padding: 0;
    list-style: none;

    li {
        height: 30px;
        line-height: 30px;
        background-color: pink;
        margin-bottom: 5px;
        padding: 0 10px;
    }
    &:hover {
        //放到这层表示list，注意a标签是不继承color属性的
        color: red;
    }
    a { //不写到li里面是因为.list li a比.list a层级较深。
        float: left;
        //&：代表他的上一层选择器
        &:hover {
            color: red;
        }
    }
    span {
        float: right;
    }
}
  • 最终编译生成的style.css文件内容如下：
.list {
  width: 600px;
  margin: 30px auto;
  padding: 0;
  list-style: none;
}
.list li {
  height: 30px;
  line-height: 30px;
  background-color: pink;
  margin-bottom: 5px;
  padding: 0 10px;
}
.list:hover {
  color: red;
}
.list a {
  float: left;
}
.list a:hover {
  color: red;
}
.list span {
  float: right;
}
less的@arguments变量
  • 在less文件中使用@arguments变量，代码如下所示：
.border_arg(@w:30px,@c:red,@xx:solid) {
    //border: @w @c @xx;
    border: @arguments;     //替换上面的写法
}
less的避免编译
.reject_comp {
    width: ~'calc(300px - 30px)';
}
less添加!important
.border_radius(@radius:5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}
.test_important {
    .border_radius() !important;
}

最后生成.css文件内容如下：

.test_important {
  -webkit-border-radius: 5px !important;
  -moz-border-radius: 5px !important;
  border-radius: 5px !important;
}
有心博客
关注
前端学习项目 HTML CSS Less H5 .zip
01-05
前端学习项目 HTML CSS Less H5 前端学习项目 HTML CSS Less H5 前端学习项目 HTML CSS Less H5 前端学习项目 HTML CSS Less H5 前端学习项目 HTML CSS Less H5 前端学习项目 HTML CSS Less H5 前端学习项目 ...
CSS Less框架基础教程
12-13
【CSS Less框架基础教程】 Less 是一种 CSS 预处理器，它扩展了 CSS 语言，引入了变量、混合（mixins）、函数等特性，极大地提高了 CSS 的可维护性、可扩展性和可复用性。本教程旨在帮助初学者理解和掌握 Less 语言...
css-Less
weixin_34306446的博客
01-22 274
介绍 语法 介绍 Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护,提高开发效率。 但正因为它是预处理语言，因此不能直接被使用，需要进行编译后才可以。 less需要 nodejs支持。 安装： > npm install -g less 查看: > lessc 编译 命令编...
CSS——less
Fan_web的博客
08-15 435
本文主要分享less的一些简单地学习内容，以及对于混合函数的一些引入，下一篇我们即将学习CSS的弹性盒知识。
【PGCCC】10本你值得收藏的 PostgreSQL 学习书籍推荐
最新发布
PGCCC的博客
09-20 1167
本书基于PostgreSQL 10编写，重点介绍PostgreSQL的丰富特性以及生产实践运维技巧。全书共18章，分为基础篇、核心篇、进阶篇三部分。
CSS——LESS
01-08 416
去年就初次接触了LESS,并用他制作了一个Less.org的首页页面，但由于CSS的固有模式，没有让自己喜欢上他。由于前段时间学习bootstrap from twitter再次让我接触了这个Less（我在《CSS——Bootstrap From Twitter》有简单的提到过Less），又发现了他的强大与方便，于是横下心来又重新开始学习Less。这次的学习中让我发现了他的更强大，从而也让
CSS预处理器—less
weixin_52629158的博客
04-16 956
CSS预处理器的概念 首次成为前端web开发工作流程的主流 并改变了我们编写CSS的方式。CSS预处理器是一种工具，用于通过自己的脚本语言扩展默认普通CSS的基本功能。它可以帮助我们使用复杂的逻辑语法，比如变量、函数、混合、代码嵌套和继承等等，使普通的CSS更加强大。通过使用CSS预处理器，您可以无缝地自动化日常任务，构建可重用的代码段，避免代码重复和膨胀，并编写组织良好且易于阅读的嵌套代码块。目前世界各地开发人员使用的3种最流行的CSS预处理器，即LESS、Stylus和Sass。
less css
金溪的博客
12-13 687
Less是一个CSS的超集，Less允许我们定义变量，使用嵌套式声明，定义函数等。严格说Less包含两部分：（1）Less的语法 （2）Less预处理器。浏览器终究只认识CSS，所以Less文件需要经过Less预处理器编译成为CSS。 在工具的支持下，一个Less文件首先会经过CSS modules的编译，把类名全局唯一化，然后才被Less 预处理器编译成为CSS文件，所以Less文件可以和CS...
动态的样式表lesscss:简单学习lesscss语法
01-19
lesscss使用方法有两种：1.页面添加一个 less.js的文件，css使用 style.less 文件后缀来编写，不过需要有服务器的环境支持 <link rel=stylesheet/less type=text/css href=styles.less>[removed][removed]2.在...
学习CSS预处理器:Sass和less进行对比
12-13
- Sass使用缩进式语法，类似于Python，而Less则使用更接近CSS的分号和大括号语法。 - Sass支持嵌套规则，使代码结构更清晰；Less在这方面同样支持，但Sass的嵌套规则更为灵活。 2. **变量和常量** - 两者都支持...
css之less
qq_36939013的博客
05-05 295
文章目录css变量less变量&语法&就代表父选择器继承 extend基本语法选择器分组混合语法基本语法声明变量语法 css变量 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- <meta name="viewport"...
css less使用
honghuzhiyan的博客
01-09 969
less Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。 自己的理解： Less是一门动态CSS语言，使得CSS样式更加灵活地作用于Html标签。如果没有Less，我们要对样式做一些逻辑计算的时候只能依靠Js去实现，有了Less之后，可以方便地动态给...
CSS框架——Less
sunshine_hl的博客
10-21 577
CSS框架——Less
css Less基础
黄大仙
08-23 503
维护css的弊端less介绍Less使用less变量变量名语法规范less编译less嵌套less算数运算 维护css的弊端 CSS是一门非程序式语言,没有变量、函数、 SCOPE(作用域)等概念CSS需要书写大量看似没有逻辑的代码,CSS冗余度是比较高的。不方便维护及扩展,不利于复用，没有很好的计算能力。非前端开发工程师来讲,往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CS代码项目。 less介绍 Less( Leaner Style Sheets的缩写)是一门CSS扩展语言,也成为CSS预
从CSS理解LESS
riddle1981的博客
07-12 505
首先要知道LESS 做为 CSS 的一种形式的扩展，它并没有阉割 CSS 的功能，而是在现有的 CSS 语法上，添加了很多额外的功能，所以学习 LESS 是一件轻而易举的事情，果断学习之！ Less中文网站上这样介绍到： Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。 Less 可以运行在 Node 或浏览器端。 那么与css相比它到
less，css样式扩展
Libra99WU的博客
09-12 245
文章目录前言二、使用步骤1.less使用语法2.读入数据总结 前言 less使用的一点小结 # 一、less简介？ less是一门css的预处理语言 - less是一个css的增强版，通过less可以编写更少的代码实现更强大的样式 - 在less中添加了许多的新特性：像对变量的支持、对mixin的支持... ... -- less的语法大体上和css语法一致，但是less中增添了许多对css的扩展， 所以浏览器无法直
Less：简化CSS编写的利器
qq_73992463的博客
11-04 104
在前端开发中，CSS是必不可少的一部分。然而，随着项目规模的扩大和复杂性的增加，纯CSS编写的样式表变得越来越冗长和难以维护。这时，Less（Leaner Style Sheets）作为一种CSS预处理器，为我们提供了一种优雅的解决方案。
CSS预处理器Less（学习记录）
qq_57872258的博客
10-15 117
常见的CSS预处理器Less
理解Less：CSS的动态语言扩展
使用Less编写CSS的一个重要步骤是编译。上面的示例展示了Less代码如何被编译成常规的CSS，这样浏览器就可以理解和应用这些样式。在开发过程中，通常会配置自动化工具，如Gulp或Webpack，来实时编译Less文件，确保...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值