您的当前位置:首页Less安装与使用步骤详解

Less安装与使用步骤详解

2023-11-30 来源:华拓教育
这次给大家带来Less安装与使用步骤详解,Less安装与使用的注意事项有哪些,下面就是实战案例,一起来看一下。

node.js 的安装

官网:http://nodejs.cn/

在命令行检验是否安装成功

切换到项目目录,初始化了一个package.json文件

安装与卸载jQuery包(例子)  安装

  卸载

安装淘宝镜像

2. 安装less

试一试:

test.html

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="style.css" rel="external nofollow" /></head><body><p id="box"> <ul> <li>你好</li> <li>hello</li> </ul></p></body></html>

style.less

#box{ width:200px; height:200px; background-color:blue; ul{ color:white; li{ line-height:50px; } }}

在命令行中输入lessc xxx.less xxx.css,

如下:

用浏览器打开test.html 看一下效果吧3. less 的基本用法

https://less.bootcss.com/

变量

@red:red;@w:200px;#big{ width:@w; height:@w; background-color:@red; #small{ width:@w; height:@w; background-color:@red; }}p{ color:@red;}

混合

.bt{ width:200px; height:200px; border-top:2px solid red; background-color:red;}#big{ .bt; #small{ .bt; }}

?嵌套

#box{ width:100%; height:60px; background-color:#ccc; h3{ width:100%; height:20px; background-color:yellow; } ul{ list-style:none; li{ height:40px; line-height:40px; float:left; padding:0 10px; } }}

?运算

@color:#333;#box{ width:100%; height:60px; background-color:@color+#111;}?calc()@var:50vh/2;#box{ width:calc(50% + (@var - 20px));}

?固定函数

@base:#f04615;@width:0.5;#box{ width:percentage(@width); color:saturate(@base,5%); background-color:spin(lighten(@base,25%),8);}

?注释

//单行注释///*多行 注释*/?引入其他less文件@import "other.less";

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

JS中常出现哪些BUG和错误

vue个人信息查看与密码修改如何实现

小编还为您整理了以下内容,可能对您也有帮助:

less使用

1、npm i less --save-dev 把less源码安装到开发环境

/* less文件是通过less.loader.js 来编译成css最后加载到页面中的 */

2、npm i less-loader@6 --save-dev 安装less解析器 (★一定要指定版本)

3、lessc -v 查看版本

4、在main.js  import less from 'less'  Vue.use(less)

5、独立的vue文件需要引入less <style lang="less"></style>

less中变量的使用 定义方式:@key:value; 使用方式:@key;

字符串拼接变量使用方式 @img:'./img/'; background:url("@{img}1.png")

写减法的时候左右要加空格,否则会理解为杠-

多层嵌套+变量计算;

<div class="box1">

    <div class="box2">

        <div class="box3"></div>

    </div>

</div>

<style lang="less">

@k:100px;

.box1{

    width: @k;

    height:@k;

    background: red;

    .box2{

        width: @k/2;

        height:@k/2;

        background: green;

        .box3{

            width: @k/3;

            height:@k/3;

            background: blue;

        }

    }

}

</style>

混合 = 函数

<div class="box1">我是box1</div>

<div class="box2">我是box2</div>

<style lang="less">

//定义一个函数;

.test(@color:red,@size:14px){

    background: @color;

    font-size:@size;

}

.box1{

//  不传参,使用默认的;

    .test()

}

.box2{

//  给函数传参;

    .test(@color:green,@size:30px)

}

</style>

运算符

可以对高度、宽度、角度进行计算;

<ul>

    <li v-for="item in 4">{{item}}</li>

</ul>

<style lang="less" scoped>

  @k:10px;

    ul{

        list-style: none;

          li{

              border:1px solid ;

              margin:10px 0 ;

          }

            li:nth-child(1){

                width: @k + @k;

                height:@k;

            }

            li:nth-child(2){

                width: @k -5px;

                height:@k;

            }

            li:nth-child(3){

                width: @k * @k;

                height:@k;

            }

            li:nth-child(4){

                width: @k / 2;;

                height:@k;

            }

    }

</style>

less使用

1、npm i less --save-dev 把less源码安装到开发环境

/* less文件是通过less.loader.js 来编译成css最后加载到页面中的 */

2、npm i less-loader@6 --save-dev 安装less解析器 (★一定要指定版本)

3、lessc -v 查看版本

4、在main.js  import less from 'less'  Vue.use(less)

5、独立的vue文件需要引入less <style lang="less"></style>

less中变量的使用 定义方式:@key:value; 使用方式:@key;

字符串拼接变量使用方式 @img:'./img/'; background:url("@{img}1.png")

写减法的时候左右要加空格,否则会理解为杠-

多层嵌套+变量计算;

<div class="box1">

    <div class="box2">

        <div class="box3"></div>

    </div>

</div>

<style lang="less">

@k:100px;

.box1{

    width: @k;

    height:@k;

    background: red;

    .box2{

        width: @k/2;

        height:@k/2;

        background: green;

        .box3{

            width: @k/3;

            height:@k/3;

            background: blue;

        }

    }

}

</style>

混合 = 函数

<div class="box1">我是box1</div>

<div class="box2">我是box2</div>

<style lang="less">

//定义一个函数;

.test(@color:red,@size:14px){

    background: @color;

    font-size:@size;

}

.box1{

//  不传参,使用默认的;

    .test()

}

.box2{

//  给函数传参;

    .test(@color:green,@size:30px)

}

</style>

运算符

可以对高度、宽度、角度进行计算;

<ul>

    <li v-for="item in 4">{{item}}</li>

</ul>

<style lang="less" scoped>

  @k:10px;

    ul{

        list-style: none;

          li{

              border:1px solid ;

              margin:10px 0 ;

          }

            li:nth-child(1){

                width: @k + @k;

                height:@k;

            }

            li:nth-child(2){

                width: @k -5px;

                height:@k;

            }

            li:nth-child(3){

                width: @k * @k;

                height:@k;

            }

            li:nth-child(4){

                width: @k / 2;;

                height:@k;

            }

    }

</style>

去除iphone手机内的广告的LessAD软件安装及使用教程介绍

LessAD 能为你的iPhone,iPad,iPod Touch 提供强劲的去广告支持。有了它的守护,再也不用担心看到各种软件里烦人的广告啦。支持系统为 iOS5.0+ 和越狱环境(你桌面有Cydia这个软件就说明越狱了哟)

其他功能:

- 无。 除了去广告这个牛叉功能外,就别要求太多了。

支持环境:

- iPhone3GS iPhone4 iPhone5 iTouch123 iPad

- iOS 5.0 +

- 越狱!必须的

以上是作者的介绍, 虽然没说ios6,但是我在自己的6.0.1上测试了(原文下面有用户留言说支持6.1了),可用~~~ 有人可能要问有什么用。。。对普通用户,也就打开新浪围脖,qq,糗百和暴漫蔽这些没有广告了而已(装了lessAD,需要关了qq这些再开才生效的,以后都生效),对访问x站点的用户,帮助。。。你懂得

如何安装: – 打开Cydia 选择软件源管理 – 新建软件源 http://apt.ixhan.com – 搜索 LessAD 并安装

教程 :

隔壁幼儿班3岁的王小杰小朋友表示:本软件非常简单,立刻上手。

FAQ:

广告过滤无效?修改软件设置后,需要杀死其他软件并重新打开才能看到效果

如何举报过滤失败软件?打开还有广告的软件,截图。打开LessAD,选择对应的app点击举报,并选择对应的截图。然后在出现的邮件中告诉本大侠如何重现广告,发送。我就能看到了。

会和其他软件冲突不?理论不会。您也可以添加出问题的app到白名单里避免收到影响

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。