Less使用教程和步骤_less的使用-程序员宅基地

技术标签: css  前端  

个人录制的最新Vue项目学习视频:B站

小胖梅-的个人空间_哔哩哔哩_Bilibili

1. less


    1. 介绍:

less是css的预处理语言,可以使用变量、函数、表达式等动态语言功能。其他常用的css预处理语言 sass stylus 

    2. 创建less文件


        .less文件结尾的文件 写css样式
        less文件不能直接被浏览器识别,使用前需要把less转成css文件

    3. 常用的把less转成css工具


        1.命令行工具
            1. lessc命令工具
                需要全局安装:npm i less -g 
                可以在命令中执行命令行功能语句
               

    lessc xxx.less 
    lessc xx.less xx.css

            2. gulp
            3. webpack

        2. 软件
            考拉 less 

        更新npm (npm install -g npm to update)

    4. 使用less 


        1. 项目初始化: npm init -y(初始化保留默认配置)
        2. 安装项目依赖:npm i less -S 
        3. 创建less文件 xx.less 
        4. 编写less样式
        5. 把less文件生成css文件
        6. 把css引入到页面html中
        
        代码演示:xx.less
           

 @w:20px;
            .base(@bw:1px,@type:solid,@color:red){
                border:@bw @type @color;
            }
            .box{
                width: 10*@w;
                height: 4*@w;
                .base(3px);
            }

    npm命令回顾
        安装命令:npm install [email protected] --global --save --dev-save --force
            install 简写 i
            --global 简写 g  : 全局安装,一般是安装到c盘,一般的作用都是提供命令行中运行的命令
            --save  简写 -S  :项目依赖,安装的是开发阶段和生产阶段都需要的模块
            --dev-save 简写 -D :项目依赖,安装的是开发阶段使用的模块
            --force : 强制安装,替代旧版本
    
            [email protected] : 模块名称后的 @1.1.1 叫版本号
        卸载命令: npm uninstall [email protected] 
    
        npm scripts 命令:
            npm run scriptsName
        


    5.  变量


        1. 定义语法:@var:value;
        2. 使用变量:@var
            1. 作为普通的值使用
            2. 选择器变量
            3. 属性变量
            4. url 变量
            5. 声明变量

        3. 变量的作用域
            和js中变量作用域一致
        
        代码演示:
            //1.定义变量  @变量:变量值;

            //2.选择器变量 
           

@box:#box;
            @class:.content;
            @{box}{//#box{border: 1px solid red;}
                .base()
            }
            @{class}{
                width: @w;
            }
            //3.属性变量
            @h:height;
            .wrapper{
                @{h}:@w*10;
            }
            //4. url变量
            @images:'./img/bg.jpg';
            .aa{
                width: 100*@w;
                height: 10*@w;
                background: url('@{images}');
            }
            //5. 声明变量
            @fontSize:{font-size: 20px;}
            .bb{
                @fontSize();
            }

    6. 嵌套


        1. 按照页面的层级结构来定义css
        2. & 能指代外层标签的作用    7. 混合
        1. 定义函数
            没有参数函数
            有参数的函数
            有默认值的函数
            数量不定的参数 base3(...){box-shadow:@arguments;}
            循环方法
                .generate-columns(@n, @i: 1) when (@i =< @n) {
                    .column-@{i} {
                        width: (@i * 100% / @n);
                    }
                }
        2. 使用函数
            没有参数的函数直接使用,可以不加小括号
            有参数的函数调用时需要传参
            代码演示:
            //函数
           

.generate(@n: 1, @w: 100px) when(@n<=10) {
                .item@{n} {
                    width:@w - (@n - 1)*10;
                    height: @w - (@n - 1)*10;
                    border:2px solid #000000;
                    position:absolute;
                    top:@n*5 - 2px;
                    left:@n*5 - 2px;
                    box-sizing: border-box;
                }

                .generate(@n+1, 100px)
            }

            //循环函数
            .content {
                width: 100px;
                height: 100px;
                border: 2px solid #000;
                position: relative;
                .generate() 
            }

    8. 继承


        1. extend 关键字来实现继承
        2. 全部继承 all        代码演示:  
     

  //继承
        .box8{
            &:extend(.box .content all);
            color: red;
        }

        .box9:extend(.box ){
            margin: 20px;
        }
    


    9. 导入


        @import可以导入less文件
        @import './xx.css';


    
    10. 内置函数


        数学函数
        颜色函数

     

  .one{
            color: rgb(0,0,0);
        }
        .two{
            color: lighten(rgb(0, 0, 0),50%);
        }

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/xm1037782843/article/details/118356558

智能推荐

使用lua_next()遍历表-程序员宅基地

文章浏览阅读193次。转自:http://hi.baidu.com/bitbull/blog/item/bc27581eca1886f61bd5768e.html问题概要: 用lua写了个函数,返回的是一个表.需要在C里对返回的表里元素做二次处理.在C里我们可以通过lua_gettable()或者lua_rawget()来获取表里元素值,但使用这两个接口的前提是你得知道key,它才能给你value. 当然对于顺..._lua_next遍歷

JAVA关键字替换-程序员宅基地

文章浏览阅读832次。import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;import org.apache.commons.lang3.StringUtils;/** * 关键字替换类 * */public class Keywor..._java 多个关键词全词匹配替换

Android View坐标系详解(getTop()、getX、getTranslationX...)_findviewbyposition-程序员宅基地

文章浏览阅读3.7w次,点赞20次,收藏59次。View 提供了如下 5 种方法获取 View 的坐标:1. View.getTop()、View.getLeft()、View.getBottom()、View.getRight();2. View.getX()、View.getY();3. View.getTranslationX()、View.getTranslationY();4. View.getLocationOnScreen(_findviewbyposition

QT的QQmlProperty类的使用_qqmlproperty::read-程序员宅基地

文章浏览阅读817次。详细说明QQmlProperty类抽象了从QML创建的对象的访问属性。由于QML使用Qt的元类型系统,因此所有现有的QMetaObject类都可以用于自省和与QML创建的对象进行交互。但是,QML提供的一些新功能(例如类型安全性和附加属性)最容易通过QQmlProperty类使用,从而简化了某些自然复杂性。与QMetaProperty代表类类型的属性不同,QQmlProperty封装特定对象实例上的属性。为了读取属性的值,程序员创建一个QQmlProperty实例并调用read()方法。同样地,使用w_qqmlproperty::read

PL SQL基本语法要术_\pl/sql的基本语法:_____________、_____________、_________-程序员宅基地

文章浏览阅读321次。转自: http://www.cnblogs.com/HondaHsu/archive/2007/06/20/776303.html常量 1. 定义常量的语法格式 常量名 constant 类型标识符 [not null]:=值; 常量,包括后面的变量名都必须以字母开头,不能有空格,不能超过30个字符长度,同时不能和保留字同名,常(变)量名称不区分大小_\pl/sql的基本语法:_____________、_____________、_____________、_____________

QT的QAudioRecorder类的使用-程序员宅基地

文章浏览阅读1.5k次。QAudioRecorder类用于记录音频。QAudioRecorder类是高级媒体录制类,并且包含与QMediaRecorder相同的功能。 audioRecorder = new QAudioRecorder; QAudioEncoderSettings audioSettings; audioSettings.setCodec("audio/amr"); audioSettings.setQuality(QMultimedia::HighQuality); audioRecor_qaudiorecorder

随便推点

[android源码分析]enable_native中的hci dev注册和up-程序员宅基地

文章浏览阅读193次。2、enableNative的分析 enable Native是真正的蓝牙使能的函数,蓝牙打开的一系列操作都是通过他来真正实现的。可以认为,这个函数蓝牙使能的主干,其余几个方面都可以认为是旁枝末节而已,因此,无论如何,我们必须了解到这个函数真正的精髓所在。 先来看jni层究竟是如何实现这个函数的:static jint enableNative(JNIEnv *env, jobje..._hci_dev没有voice_setting 成员

canal-使用-总结_canal使用心得-程序员宅基地

文章浏览阅读200次。typora-root-url: imagesAdminGuideCanal-Admin-Guide简介canal [kə’næl],译意为水道/管道/沟渠,主要用途是基于 MySQL 数据库增量日志解析,提供增量数据订阅和消费。工作原理canal 模拟 MySQL slave 的交互协议,伪装自己为 MySQL slave ,向 MySQL master 发送 dump 协议MySQL master 收到 dump 请求,开始推送 binary log 给 slave (即 canal._canal使用心得

JMX 连接 Docker 内 java 应用注意事项_-dcom.sun.management.jmxremote=true-程序员宅基地

文章浏览阅读295次。由于近期可能需要观察程序运行的内存以及线程等指标,需要监控在Docker中java应用,在尝试与之前的方式添加后,并不能生效,因此在这里记录,和大家分享。需要添加JMX配置如下-Dcom.sun.management.jmxremote=true -Dcom.sun.management.jmxremote.authenticate=false -Dcom.sun.management.jmxremote.ssl=false -Dcom.sun.management.jmxremote.local_-dcom.sun.management.jmxremote=true

jacob合并几个word文件到一个word文件-程序员宅基地

文章浏览阅读466次。 因项目需要将几个word文件合并到一个word文件,后面附项目运用的jar包jacob-1.9jacob运用中,需要将附件内的jacob.dll放到windows/system32下 直接上代码:public static void main(String[] args) { List list = new ArrayList(); String f..._jacob insertfile hebing

iOS-MJRefresh框架-程序员宅基地

文章浏览阅读75次。1.用MJRefresh框架实现上下拉刷新1.1如何使用这个框架,只需要告诉控件的scrollView是谁,就能将框架添加到我们的滚动视图中了//下拉刷新MJRefreshHeaderView*header = [MJRefreshHeaderViewheader];header.scrollView=self.tableView;...

误删除SSIS中的“Maintenance Plans”文件夹的恢复-程序员宅基地

文章浏览阅读115次。在SQL Server 2005/2008中,维护计划的功能通过SSIS包来完成。如果不小心在SSIS管理中删除了"Maintenance Plans"文件夹,则在SQL Server中建立维护计划的时候会出现问题,如下图所示。 在Management studio中创建误删除的"Maintenance Plans"文件夹,如下图所示。 建立好"Maintenance Plan..._package=maintenance plans 路径