Less入门

最新推荐文章于 2024-05-06 18:44:39 发布
最新推荐文章于 2024-05-06 18:44:39 发布
阅读量62 收藏
点赞数
文章标签： less css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/firenaimal/article/details/130004007
版权

第一章 什么是less

less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展LESS 既可以在 客户端 上运行 ，也可以借助Node.js在服务端运行

在这里插入图片描述

第二章 less的案例

2.1 less的入门测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>less的入门测试</title>
    <style type="text/less">
    	<!--less允许在选择器内再进行编写选择器-->
        #app{
            width: 800px;
            height: 400px;
            background-color: antiquewhite;
            <!--.adv在#app中，这样便于查看-->
            .adv{
                height: 100px;
                width:100px;
                background-color:yellow;
                }
            }
    </style>
    <!--需要引入less.min.js ，让其进行编译-->
    <script src="../lessmin/less.min.js"></script>
</head>
<body>
    <div id="app">
        <div class="adv"></div>
    </div>
</body>
</html>

2.2 less的嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>less的入门测试</title>
    <style type="text/less">
    	<!--嵌套有平级嵌套和父级嵌套-->
        #app{
            width: 800px;
            height: 400px;
            background-color: antiquewhite;
            <!--这里.adv是父级嵌套-->
            .adv{
                height: 100px;
                width:100px;
                background-color:yellow;
                }
            }
        #app2{
            width: 100px;
            height: 100px;
            background-color: aqua;
            <!--#app2{}（id选择器）与input{}（标签选择器）是父级嵌套，-->
                input{
                    background-color: pink;
                    <!--input{}和name=“u1”{}（属性选择器）用"&"连接，是平级嵌套-->
                    &[name="u1"]{
                        background-color: blueviolet;
                    }
                }
        }
    </style>
    <script src="../lessmin/less.min.js"></script>
</head>
<body>
    <div id="app">
        <div class="adv"></div>
    </div>
    <div id="app2">
        <input type="text">
        <input type="text">
        <input type="text" name="u1">
        <input type="text">
    </div>
</body>
</html>

2.3 变量与计算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>变量与计算</title>
    <style type="text/less">
        #app{
            @width:100px;
            .adv{
            	<!--进行计算-->
                width:@width*3;
                height:300px;
                background-color:red;
            }
        }
    </style>
    <script src="../lessmin/less.min.js"></script>
</head>
<body>
    <div id="app">
        <div class="adv"></div>
    </div>
</body>
</html>

2.4 普通混合

几个混合类似

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>普通混合</title>
    <style type="text/less">
        #app{
            width: 800px;
            height: 400px;
            background-color: red;
            .juzhong{
                width: 100px;
                height:100px;
                background-color:blue;
                margin:20px auto;
            }
            <!--类似于C语言的调用，-->
            .adv1{
                .juzhong();
            }
            .adv2{
                .juzhong();
            }
        }
    </style>
    <script src="../lessmin/less.min.js"></script>
</head>
<body>
    <div id="app">3
        <div class="adv1">dd</div>
        <div class="adv2"></div>
    </div>
</body>
</html>

2.5 带参数的混合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>普通混合</title>
    <style type="text/less">
        #app{
            width: 800px;
            height: 400px;
            background-color: red;
            .juzhong(@w,@h){
                width: @w;
                height:@h;
                background-color:blue;
                margin:20px auto;
            }
            .adv1{
                .juzhong(100px,100px);
            }
            .adv2{
                .juzhong(200px,200px);
            }
        }
    </style>
    <script src="../lessmin/less.min.js"></script>
</head>
<body>
    <div id="app">3
        <div class="adv1">dd</div>
        <div class="adv2"></div>
    </div>
</body>
</html>

2.6 带默认值的混合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>普通混合</title>
    <style type="text/less">
        #app{
            width: 800px;
            height: 400px;
            background-color: red;
            .juzhong(@w:100px,@h:200px){
                width: @w;
                height:@h;
                background-color:blue;
                margin:20px auto;
            }
            .adv1{
                .juzhong();
            }
            .adv2{
                .juzhong();
            }
        }
    </style>
    <script src="../lessmin/less.min.js"></script>
</head>
<body>
    <div id="app">3
        <div class="adv1">dd</div>
        <div class="adv2"></div>
    </div>
</body>
</html>

2.7 带命名参数的混合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>普通混合</title>
    <style type="text/less">
        #app{
            width: 800px;
            height: 400px;
            background-color: red;
            .juzhong(T,@n){
                width:@n;
                height:100px;
                background-color:blue;
                margin:20px auto;
            }
            .juzhong(W,@n){
                width:100px;
                height:@n;
                background-color:blue;
                margin:20px auto;
            }
            .adv1{
                .juzhong(T,200px);
            }
            .adv2{
                .juzhong(W,400px);
            }
        }
    </style>
    <script src="../lessmin/less.min.js"></script>
</head>
<body>
    <div id="app">3
        <div class="adv1">dd</div>
        <div class="adv2"></div>
    </div>
</body>
</html>
香香不学习
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
less入门.pptx
07-02
less入门.pptx
less 入门
qq_36146167的博客
01-23 195
less 简介 less是一门预处理语言，它是一个css的增强版，通过less可以编写更少的代码实现更大的样式 在less中添加了许多的新特性：像对变量的支持、对mixin的支持等等 less的语法大体上和css语法一致，但是less中增添了许多对css的扩展，所以浏览器是无法直接执行less代码的，要执行必须要将less转换为css，然后再由浏览器执行 css3 变量 .box1 { width: 100px; height: 200px; background-color: #b
Less入门教程
Y_one的博客
05-19 739
一、 什么是Less Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。 Less 可以运行在 Node 或浏览器端。 二、 使用方法 2.1 ------> Node环境的使用方法 安装 在服务器上安装Less的最简单方法是通过node.js软件包管理器npm进行，如下所示： $ npm install -g less 命令行用法 安装后，您可以从命令行调用编译器，如下所示： $ lessc styles.less 这
less入门
一捆铁树枝的博客
03-13 648
Less 的出现是为了解决 CSS 中过于呆板的写法。Less 官方文档中对 Less 的使用有详细的介绍，总结一下为：Less = 变量 + 混合 + 函数。 下面我就用实际案例来具体介绍less 首先，我介绍一下在webstorm中配置less文件自动生成css； 一、配置webstorm 1.使用 Npm 全局安装 Less $ npm install less -g 2.配...
Less 快速入门
imByte的博客
12-08 722
Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。 Less 作为 CSS 的一种形式扩展，并没有减少 CSS 的功能，而是在现有的 CSS 语法上，添加了程序式语言的特性。
less入门教程
xin.wang的博客
05-17 1567
什么是LESSCSSLESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。LESSCSS可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。语言特性快速预览：变量：变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几...
1. Less 入门
shiyibushiwei的博客
07-07 70
Less的 引入
Less入门以及一些前端面试题
qq_45120080的博客
05-19 3036
Less入门Less是什么？如何安装？less变量赋值less封装函数less与sass的异同 Less是什么？ Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。这里呈现的是 Less 的官方文档（中文版），包含了 Less 语言以及利用 JavaScript 开发的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。 因为 Less 和 CSS 非常像，因此很容易学习。而且 Less 仅对 CSS 语言增加了少许方便的扩展，这就是 Less
Less入门，超好用css写法
qq_44769099的博客
03-27 951
目录 变量(Variables) 混合(Mixins) 嵌套(Nesting) 运算(Operations) 转义(Escaping) 函数(Functions) 命名空间和访问符() 映射(Maps) 注释(Comments) 导入(importing) less是一门向后兼容的css扩展语言,跟css非常像，因此很容易学习。而且less对css语言增加了一些方便的扩展，这也是less易学的原因之一 <style lang="less"> ... &l..
Less入门小册
betty_grant的博客
11-18 85
1.简介 Less是一种Css的样式预处理器，比起css能达到更好的管理和服用样式表的作用。 2.快速入门 2.1变量+运算 无需多说，看代码一目了然： @width: 10px; @height: @width + 10px; #header { width: @width; height: @height; } 编译为： #header { width: 10px; height: 20px; } 2.2嵌套 Less 提供了嵌套代替层叠或与层叠结合使用的场景。假..
前端构建 Less入门(CSS预处理器)
10-20
众多CSS预处理器中Less的语法最接近原生CSS，因此相对来说更容易上手，假如有JS、C#等编程经验的话，其实上述的几种预处理器的学习成本也不会特别高。下面是我们这阵子的学习笔记，以便日后查阅
Less入门视频教程
06-10
本课程以通俗易懂的方式讲解Less技术，课程内容包括：1.Less简介、基本用法2.变量、混合Mixin、导引表达式3.运算、函数4.嵌套5.继承6.导入import通过多个案例逐一讲解Less的用法，通俗易懂，最适合初学者的教程！
less简单入门(CSS 预处理语言)
08-31
Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充
跟TED演讲学英文：What moral decisions should driverless cars make by Iyad Rahwan
最新发布
阿正的梦工坊
05-06 907
The tragedy of the commons
c3 笔记8 css排版技巧
weixin_63492023的博客
05-03 299
相关内容：边界、边框、位置（absolute、relative、static）、overflow、z-index、超链接、鼠标光标特效、……©《HTML5+CSS3+JavaScript网页设计》陈婉凌编，清華大学出版社。margin:上边界值 右边界值 下边界值 左边界值。
前端科举八股文-CSS篇
星海拾遗
04-25 1767
BFC 块级格式化上下文，它是指页面的一块独立的渲染区域，和其他区域相互独立出来互不干扰。它可以解决外边距折叠和高度塌陷的问题。根据它的定义，可以设置position不为static，overflow不为visible，或者设置浮动都可以设置BFC。
前端初学者的 CSS 入门
weixin_40348267的博客
05-03 624
CSS 是层叠样式表（Cascading Style Sheets）的缩写，是一种用于控制网页或文档的外观和布局的标记语言。从这篇文章开始，瑶琴带着大家一起学习 CSS 的知识，如果把 HTML 比喻成一棵树的枝干，那么 CSS 就是枝干上的树叶和花果，让这颗树活了起来。总之，CSS 是前端开发的关键部分，用于控制网页的外观和布局。通过学习和掌握 CSS，你能够创建精美且功能强大的网页，提供出色的用户体验。最后啰嗦一句，好记性不如烂笔头，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。
Vue 插槽
体系化很难，碎片归纳很简单。
05-06 816
Vue插槽是一种特殊的语法，用于在组件中定义可复用的模板部分。它允许开发者在组件的标记中声明一个或多个插槽，然后在使用该组件时，可以根据自己的需求将内容插入到这些插槽中。Vue插槽分为默认插槽和具名插槽两种。
boostrap快速入门
09-10
您可以选择下载编译后的CSS和JavaScript文件，或者使用Sass、Less、SCSS等源代码。 2. 引入Bootstrap：将下载的Bootstrap文件解压缩后，将CSS和JavaScript文件复制到您的项目文件夹中。在HTML文件的`<head>`部分...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值