精华内容
下载资源
问答
  • less 定义一个方法
    2015-09-30 00:41:51
    引入文件
    <link rel="stylesheet/less" href="less/文件名" type="text/css">
    定义空间
    文本类
    text_namespace{
    .font(@size,@style,@weight){
    font-size:@size;
    font-style:@style;

    font-weight:@weight;

    }}

    .text(@color,@spacing,@dec){
    color:@color;
    white-space:@spacing;

    text_decoration:@dec;

    }}

    导入文件名用@import
    导入图片background:url("@{str}/img2.png")
    定义全局变量和局部变量

    定义在最外面的变量为全局在整个文件里面都有效
    定义在类里面的变量叫做局部变量只在类有效
    如果局部变量和全局变量名称相同时则局部优先级高
    更多相关内容
  • Less的几种使用方法

    2021-01-07 16:36:21
    在Vue中使用Less 1、安装依赖 处理普通的.css 文件, 需要安装css-loader,style-loader  .less 文件, 需要安装 less-loader npminstall css-loader style-loader –save-dev npminstall less-loader –save-dev 2...
  • 当你想要在vue项目的一个组件中使用全局样式文件中定义好的变量,此时只在main.js中import是不行的。 目录结构如下: 即在MHeader.vue中想要使用src下的less下的variables.less文件中定义好的变量。 此时,只用...
  • 较少定义 一个用于简单功能的LESS插件,可让您检查是否定义了变量。 有关用法,请参阅。 将此插件与gulp结合使用,请参阅无。
  • Less定义变量

    千次阅读 2019-10-04 22:29:38
    使用 @ 符号来定义变量 ,在Less中开头是 @ 则是变量,关于变量的命名方法,大家可以参考js中命名的规则,毕竟是做前端的,有着统一的习惯有助于我们统一风格。个人推荐变量名的命名规则使用驼峰命名法。第一个单词...

    1. 定义:

    使用 @ 符号来定义变量 ,在Less中开头是 @ 则是变量,关于变量的命名方法,大家可以参考js中命名的规则,毕竟是做前端的,有着统一的习惯有助于我们统一风格。个人推荐变量名的命名规则使用驼峰命名法。第一个单词首写字母小写,从第二个开始,单词首写字母大写。如boxAaa,boxBbbb,boxContainer,……,当然也是可是使用香肠命名法用下划线“_”来命名。如,box_main,border_bottom,……

    2. 使用:

    在样式属性值中使用时,直接用 @variable 即可调用变量;

    在其他地方,包括选择器名称、属性名称、URL和@import语句使用时,变量必须以插值的形式使用,例如:

    复制代码
    @variable: 200px; //定义变量作为样式属性值使用
    @classname: .nav_a; //变量值不可用中划线,此变量作为插值用于选择器名称
    
    
    @{classname}{ //作为插值 必须加 {}
        width: @variable; //作为属性值直接调用
    }
    复制代码

    输出:

    .nav_a {
      width: 200px;
    }

    转载于:https://www.cnblogs.com/xiaozhang666/p/11331115.html

    展开全文
  • LESS定义: LESS是一门CSS预处理语言,它扩展了CSS语言,增加了变量,Mixin,函数等特性。优点:使得CSS更易维护与扩展。 简单的说:可以更方便的编写CSS代码,并更方便维护与扩展。 注意:LESS只是一个纯文本...

    一、首先介绍什么是LESS:

    LESS定义:

    LESS是一门CSS预处理语言,它扩展了CSS语言,增加了变量,Mixin,函数等特性。优点:使得CSS更易维护与扩展。

    简单的说:可以更方便的编写CSS代码,并更方便维护与扩展。

    注意:LESS只是一个纯文本,不影响代码的编写

    二、LESS的基本使用步骤

    1. 首先创建一个后缀名为.less的文件
    2. 在这里需要介绍一个软件koala(考拉)
      http://koala-app.com/index-zh.html
      这里写图片描述
      • koala软件的相关概念:
        它是一个前端预处理器语言图形编译工具,支持Less、Sass、Compass、CoffeeScript,帮助web开发者更高效地使用它们进行开发。跨平台运行,完美兼容windows、linux、mac。
      • koala软件的用法:
        a) . 首先将进行编写less文件的文件夹拖入到koala中,点击refresh进行刷新,不要关闭koala界面。
        b) . 开启koala后,进行编写less代码,当进行保存less文件时,会将less中的语法自动生成对应的.css文件
        c) .得到的.css文件,就可通过link引入样式
    3. koala(考拉)编译注意点:
      a) . 当在保存时,右下角弹出红色框,说明,编译出错,请检查你的代码是否有误
      b) . 如果放置.less文件的文件夹名为 less,那么在编译的时候,会在该文件夹下生成css文件。
      c) . 如果不叫less,那么会在同级目录下

    三、LESS基本语法

    ① 变量定义:

    格式: (变量名: 变量值;)

    其中: @jdRed为变量名,rgba(201,21,35,0.8)为变量值。

    @jdRed:rgba(201,21,35,0.8);

    变量定义完毕后,就可以使用该变量代替固定的值,如果需要值时,直接修改该变量的值即可,更利于维护代码。

    /* 设置了body,h3,ul的背景颜色均为一样 */
    body {
      background-color: @jdRed;
    }
    h3 {
      background-color: @jdRed;
    }
    ul {
      background-color: @jdRed;
    }

    ② 注释:

    a). less支持和js一样的注释,并且这样的注释,不会被编译。

    //@minWidth: 100px;   不会被编译

    b). 使用css注释 name编译的时候,注释也会被保留。

    /* 
        @minWidth: 100px;
        @imagesSize: 100px 100px;   会被编译
    */

    ③ 混合(Mixin):

    目的: 从现有的样式中添加属性

    • 由代码可知,定义了一个oneColor 的类
    .oneColor(){
      background-color: red;
      border:1px solid red;
      color: red;
    }
    • 定义了两个id,并且引用了oneColor类
    #item {
        .oneColor;
        font-size: 20px;
    }
    #menu {
        .oneColor;
        line-height: 50px;
    }
    • 编译完成,得到的css代码如下:(#item和#menu都得到了oneColor类的属性集)
    .oneColor(){
      background-color: red;
      border:1px solid red;
      color: red;
    }
    #item {
        background-color: red;
        border:1px solid red;
        color: red;
        font-size: 20px;
    }
    #menu {
        background-color: red;
        border:1px solid red;
        color: red;
        line-height: 50px;
    }
    • 还可以使用的更为复杂一点,(加上变量),定义了一个带参数的oneColor类
    .oneColor(@color:#0094ff){
          background-color: @color;
          border:1px solid @color;
          color: @color;
    }
    • 同样的在#item和#menu中引用oneColor的属性集
    /* 带参数的引用 */
    #item {
      .oneColor(#fff);
    }
    /* 不带参数的引用(会采用默认值) */
    #menu {
      .oneColor();
    }
    • 根据如上编写的less代码,编译后,得到的css文件如下:
      注意:(oneColor类将不会出现在css文件中)
    /* 由于带有参数,会修改内部的值,变为yellow */
    #item {
          background-color: #ffffff;
          border:1px solid #ffffff;
          color: #ffffff;
    }
    #menu {
          background-color: #0094ff;
          border:1px solid #0094ff;
          color: #0094ff;
    }

    这里写图片描述
    - 还可以用在兼容性写法内

        .border(@color: #aaa) {
            -webkit-border-radius: @color;
            -moz-border-radius: @color;
            border-radius: @color;
        }

    ④ 嵌套(比较常用)
    - -a). 伪元素,交集选择器,:hover等,需要紧挨着元素的样式,并用“ & ”符号来替代元素

    .main{
         width: 100%;
         height: 40px;
         /* 利用&符号来替代元素名 */
         &:hover{
             height: 90px;
         }
         &::before {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: red;
            border-radius: 10px;
        }
    }

    编译后将会得到:

    .main {
         width: 100%;
         height: 40px;
    }
    .main:hover {
        height: 90px;
    }
    .main::before {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: red;
        border-radius: 10px;
    }
    • b) . 如果,只想要是该class里面的样式,不传递任何参数时,可以不写括号。
    • c) . 如果直接往下写,生成的css,是后代
      (可以是子元素或着子元素的子元素…)
    ul{
        width: 100%;
        li {
             width: 100%;
             text-align: center;
             height: 50px;
             line-height: 50px;
             border-bottom: 1px solid gray;
             border-right: 1px solid gray;
             a{
               color: black;
             }
        }
    }

    经过编译后,将会得到:

    ul{
        width: 100%;
    }
    ul li{
            width: 100%;
            text-align: center;
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid gray;
            border-right: 1px solid gray;
    }
    ul li a {
        color: black;
    }

    ⑤ 运算
    less中还提供了加、减、乘、除等运算(其中可以用来颜色和属性值的运算)

    /* 定义一个变量 */
    @width: 100px;
    .plus {
        /* 运算时,可以不用加上单位,最终将得到宽度加10 */
        width: @width+10;
    }

    编译得:

    .plus {
        width: 110px;
    }
    展开全文
  • 定义的别名重写导入路径 首先,非常感谢 ,此软件包依赖它(路径替换部分)。 在复杂的开发过程中,最终您将遇到LESS文件组织方面的问题。 多亏了aliases,这插件将帮助您更好地理解路径的语法(甚至是相对的)...
  • 我只管知道预处理是一个好主意,管它是那种。 都是为了偷懒,不就是要让css更加自能化吗! 在知乎上有位“海皮飞”的博主提出了如下场景。 1. 要做各种内核都兼容的圆角效果,这个CSS效果是有固定模版的,那每个用到...
  • :wrapped_gift: 少输入模块 为用LESS( .less )编写CSS模块生成TypeScript定义( .d.ts )文件。 typed-less-modules用于将.less转换为对应的.d.ts TypeScript类型声明文件。 例如,给出以下LESS: @import " ...
  • vue项目使用less定义全部变量

    千次阅读 2020-07-07 11:15:03
    vue项目要使用less首先要下载less...然后如果你想使用css的全局变量,这个时候需要定义一个less文件,然后在项目引入,一开始想直接在main.js中引用,发现是不起效果的,这个时候你需要这样操作 1、下载sass-resources

    vue项目要使用less首先要下载less插件

    npm install less less-loader --save

    然后在vue页面的style使用

    <style lang="less" scoped></style>

    那么这个使用你的项目就支持less css预处理

    然后如果你想使用css的全局变量,这个时候需要定义一个less文件,然后在项目引入,一开始想直接在main.js中引用,发现是不起效果的,这个时候你需要这样操作

    1、下载sass-resources-loader 插件

    npm install less sass-resources-loader --save

    然后修改build中的utils.js

    把原来的 less: generateLoaders('less'),注释,添加一下代码

    less: generateLoaders('less').concat({

                loader: 'sass-resources-loader',

                options: {

                    resources: path.resolve(__dirname, '../static/css/index.less')

                }

            }),

     

    展开全文
  • LESS 使用方法

    千次阅读 2017-12-24 17:47:30
    LESS简介 第节 变量 第二节 混合 第三节 嵌套规则 第四节 函数 运算 第二章 使用 第节 客户端使用 第二节 服务端使用 第三章 语法 第节 变量 第二节 混合用法 第三节 带参数混合 第四节 嵌套规则 第五...
  • 1.首页在css中写入base.css: /* root选择器用匹配文档的根.../*此时的背景色就是base.css中定义的 */ width:100px; height: 100px; } 3.页面元素: demoColor 最终的效果如图: 如果觉得有帮助留下你们的小爱心吧! 
  • less文件中,任何数字、颜色或变量都能参与运算,就是less提供了(+)(-)(*)(/)算术的运算。 代码示范: /*是在less文件里写*/ @width:10px + 5; div { /*其实就变成了15px的边框*/ border:@width solid ...
  • 项目搭建用的vue—cli,...定义一个.theme()方法,写上需要的颜色参数如图: 2.2 styles文件夹下再新建一个存放各类主题的color.less文件,里面根据自己需求定义各类主题,记得把theme.less文件引入 @import url('.
  • less:即时 LESS 编译器

    2021-06-13 06:32:54
    即时 LESS 编译器这个库定义一个对象,你可以在 URL 空间中绑定(通过 Stapler)来从类路径编译 LESS 文件并将它们作为 CSS 文件提供。 这使模块化 Web 应用程序能够在运行时组合它们的 LESS 文件以启用后期绑定。...
  • less定义数组,获取长度

    千次阅读 2018-10-14 22:51:41
    //数组 wadapterDeviceList: 750px,720px,640px,540px,480px,424px,414px,400px,384px,375px,360px,320px; //数组长度 @len:length(@adapterDeviceList);
  • 基本上,它是这样工作的:您定义一个自定义精灵伪类,它将精灵项目位置或精灵项目名称作为每个精灵的参数。 该参数将与一些自定义精灵“配置”-东西一起传递给 .sprite mixin。 然后 mixin 完成它的工作并计算偏移...
  • less 自定义函数

    千次阅读 2021-08-25 16:07:00
    vue-cli3以上配置 ... less: { javascriptEnabled: true } } } } vue-cli3以下版本 // module.rules { test: /\.less/, exclude: /node_modules/, use: ['style-loader', 'css-loader', { loader:
  • 浏览器端如何使用Less

    2020-12-13 21:12:56
    之前项目用过Less,现在负责的项目也要使用,所以就总结下Less,也方便以后查看。... 本质上,LESS 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对
  • less开发指南

    2020-09-25 03:37:36
    LESS(是.less后缀名的文件) 包含一套自定义的语法及一个解析器,我们根据这些语法定义自己的样式规则,为 CSS 加入程序式语言的特性,如变量、继承、运算、嵌套等,更方便CSS的编写和维护
  • LESS的基本使用方法

    千次阅读 2019-10-20 23:27:55
    在写css的时候,可以直接写一个.css文件,但是实际开发中也会使用less方法写css。 less的写法比css的写法功能更加强大。 Less简介 Less 是一门 CSS 预处理语言,它扩展了 CSS 的写法,增加了变量、函数等特性。 ...
  • 1、首先使用npm下载依赖; npm install --save less less-loader 2、安装完成后检查是否安装成功;...在less,允许我们使用以变量的形式来定义定义方式:@k:v; 使用方式:@k; 此时就会有一个宽100px
  • :新建样式文件 文件目录可自定义:我的demo如下图,styles主要用于对于样式的全局设置,比如vant样式,样式变量等;index.less只要用于对文件的引入 index.less文件中 @import './var'; var.less文件中 @...
  • umi 使用 less 变量定义主题色

    千次阅读 2020-06-08 22:34:01
    umi 提供了主题变量替换的能力,只需要在配置文件中按照键值对形式进行替换,即可一键替换主题色。 但是,直接使用 js 来书写...用 less-vars-to-js 包将 less 变量转为 js对象 import lessToJs from 'less-vars-to-
  • LESS 函数方法

    千次阅读 2018-04-22 15:22:17
    颜色定义 (Color Definition) 颜色操作 颜色混合 混合 (misc) // 字符转颜色 color("#CCC") //返回图像尺寸(示例尺寸100*50) image-size("file.jpg"); // =&gt; 10...
  • 最近在探究使用vite+vue3搭建一个后台框架,为了更好的扩展性,将系统可能用到的所有颜色以及部分属性定义变量作为单独的less文件。 在全局的index.less定义之后,在其它文件使用直接报错,提示@primary-color为...
  • 1.less定义变量的方式 : 使用符号@ 例如 @blue:#5B83AD; @mySelector:width; @commonFontSize:16px; 2.注意事项: @之后的变量名随意自取 使用:为变量赋值,不是使用= 赋的值不用加""或' ' 三,less变量的使用 1....
  • less学习变量的定义(1)

    万次阅读 2014-11-25 08:02:35
    less 文件内容 @charset "utf-8"; //定义变量 @test-width:200px; @test-height:300px; //定义样式 .testDiv{ width:@test-width; height:@test-height; background-color: aquamarine; }
  • css预处理预言,前端开发必备的基础知识,编写动态css的基础知识前端开发工程师必会!css预处理预言,前端开发必备的基础知识,编写动态css的基础知识前端开发工程师必会!

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 165,179
精华内容 66,071
关键字:

less 定义一个方法