精华内容
下载资源
问答
  • 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

    展开全文
  • 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定义数组,获取长度

    千次阅读 2018-10-14 22:51:41
    //数组 wadapterDeviceList: 750px,720px,640px,540px,480px,424px,414px,400px,384px,375px,360px,320px; //数组长度 @len:length(@adapterDeviceList);
    	//数组
    	wadapterDeviceList: 750px,720px,640px,540px,480px,424px,414px,400px,384px,375px,360px,320px;
    	//数组长度
    	@len:length(@adapterDeviceList);
    
    展开全文
  • LESS 使用方法

    千次阅读 2017-12-24 17:47:30
    LESS简介 第节 变量 第二节 混合 第三节 嵌套规则 第四节 函数 运算 第二章 使用 第节 客户端使用 第二节 服务端使用 第三章 语法 第节 变量 第二节 混合用法 第三节 带参数混合 第四节 嵌套规则 第五...

    第一章 LESS简介

    less是一种动态样式语言;为提高css应用的灵活性和效率;
    LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js或者Rhino在服务端运行。

    第一节 变量

    变量允许我们单独定义一系列通用的样式,然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。

     // LESS
    @color: #4D926F;
    #header {
      color: @color;
    }
    h2 {
      color: @color;
    }
    
    /* 生成的 CSS */
    #header {
      color: #4D926F;
    }
    h2 {
      color: #4D926F;
    }

    第二节 混合

    混合可以将一个定义好的class A轻松的引入到另一个class B中,从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用,就像使用函数一样。

    // LESS
    .rounded-corners (@radius: 5px) {
      border-radius: @radius;
      -webkit-border-radius: @radius;
      -moz-border-radius: @radius;
    }
    #header {
      .rounded-corners;
    }
    #footer {
      .rounded-corners(10px);
    }
    
    /* 生成的 CSS */
    #header {
      border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
    }
    #footer {
      border-radius: 10px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
    }

    第三节 嵌套规则

    我们可以在一个选择器中嵌套另一个选择器来实现继承,这样很大程度减少了代码量,并且代码看起来更加的清晰。

    // LESS
    #header {
      h1 {
        font-size: 26px;
        font-weight: bold;
      }
      p { font-size: 12px;
        a { text-decoration: none;
          &:hover { border-width: 1px }
        }
      }
    }
    
    /* 生成的 CSS */
    #header h1 {
      font-size: 26px;
      font-weight: bold;
    }
    #header p {
      font-size: 12px;
    }
    #header p a {
      text-decoration: none;
    }
    #header p a:hover {
      border-width: 1px;
    }

    第四节 函数 & 运算

    运算提供了加,减,乘,除操作;我们可以做属性值和颜色的运算,这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码,如果你愿意的话可以操作属性值。

    // LESS
    @the-border: 1px;
    @base-color: #111;
    @red:        #842210;
    #header {
      color: @base-color * 3;
      border-left: @the-border;
      border-right: @the-border * 2;
    }
    #footer { 
      color: @base-color + #003300;
      border-color: desaturate(@red, 10%);
    }
    
    /* 生成的 CSS */
    #header {
      color: #333;
      border-left: 1px;
      border-right: 2px;
    }
    #footer { 
      color: #114411;
      border-color: #7d2717;
    }

    第二章 使用

    第一节 客户端使用

    引入 .less 样式文件的时候要注意设置 rel 属性值为 “stylesheet/less”:

    link rel="stylesheet/less" type="text/css" href="styles.less">

    然后将下载的 less.js 文件, 在head中引入:

    <script src="less.js" type="text/javascript"></script>

    注意你的less样式文件一定要在引入less.js前先引入。

    备注:请在服务器环境下使用!本地直接打开可能会报错!

    第二节 服务端使用

    安装
    在服务器端安装 LESS 的最简单方式就是通过 npm(node 的包管理器), 像这样:

    $ npm install less

    如果你想下载最新稳定版本的 LESS,可以尝试像下面这样操作:

    $ npm install less@latest

    第三章 语法

    第一节 变量

    LESS 做为 CSS 的一种形式的扩展,它并没有阉割 CSS 的功能,而是在现有的 CSS 语法上,添加了很多额外的功能!

    例:

    @nice-blue: #5B83AD;
    @light-blue: @nice-blue + #111;
    
    #header { color: @light-blue; }
    //输出:
    #header { color: #6c94be; }

    第二节 混合用法

    在 LESS 中我们可以定义一些class作为属性的集合,然后在另一个class中去调用这个类名,就等同于调用这些属性了!

    例:

    .bordered {
      border-top: dotted 1px black;
      border-bottom: solid 2px black;
    }
    
    //那如果我们现在需要在其他class中引入那些通用的属性集,那么我们只需要在任何class中像下面这样调用就可以了:
    
    #menu a {
      color: #111;
      .bordered;
    }
    .post a {
      color: red;
      .bordered;
    }
    
    //.bordered class里面的属性样式都会在 #menu a 和 .post a中体现出来:
    
    #menu a {
      color: #111;
      border-top: dotted 1px black;
      border-bottom: solid 2px black;
    }
    .post a {
      color: red;
      border-top: dotted 1px black;
      border-bottom: solid 2px black;
    }

    任何 CSS class, id 或者 元素 属性集都可以以同样的方式引入

    第三节 带参数混合

    在 LESS 中,还可以像函数一样定义一个带参数的属性集合:

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

    然后在其他class中像这样调用它:

    #header {
      .border-radius(4px);
    }
    .button {
      .border-radius(6px);  
    }

    我们还可以像这样给参数设置默认值:

    .border-radius (@radius: 5px) {
      border-radius: @radius;
      -moz-border-radius: @radius;
      -webkit-border-radius: @radius;
    }

    所以现在如果我们像这样调用它的话:

    #header {
      .border-radius;  
    }

    radius的值就会是5px.
    你也可以定义不带参数属性集合,如果你想隐藏这个属性集合,不让它暴露到CSS中去,但是你还想在其他的属性集合中引用,你会发现这个方法非常的好用:

    .wrap () {
      text-wrap: wrap;
      white-space: pre-wrap;
      white-space: -moz-pre-wrap;
      word-wrap: break-word;
    }
    
    pre { .wrap }

    输出:

    pre {
      text-wrap: wrap;
      white-space: pre-wrap;
      white-space: -moz-pre-wrap;
      word-wrap: break-word;
    }

    @arguments 变量
    @arguments包含了所有传递进来的参数. 如果你不想单独处理每一个参数的话就可以像这样写:

    .box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
      box-shadow: @arguments;
      -moz-box-shadow: @arguments;
      -webkit-box-shadow: @arguments;
    }
    .box-shadow(2px, 5px);

    将会输出:

      box-shadow: 2px 5px 1px #000;
      -moz-box-shadow: 2px 5px 1px #000;
      -webkit-box-shadow: 2px 5px 1px #000;

    第四节 嵌套规则

    LESS 可以以嵌套的方式编写层叠样式,就像写结构一样

    #header { color: black; }
    #header .navigation {
      font-size: 12px;
    }
    #header .logo { 
      width: 300px; 
    }
    #header .logo:hover {
      text-decoration: none;
    }

    在 LESS 中,就可以这样写:

    #header {
      color: black;
    
      .navigation {
        font-size: 12px;
      }
      .logo {
        width: 300px;
        &:hover { text-decoration: none }
      }
    }

    或者这样写:

    #header        { color: black;
      .navigation  { font-size: 12px }
      .logo        { width: 300px;
        &:hover    { text-decoration: none }
      }
    }

    注意 & 符号的使用—如果你想写串联选择器,而不是写后代选择器,就可以用到&了. 这点对伪类尤其有用如 :hover:focus
    例如:

    .bordered {
      &.float {
        float: left; 
      }
      .top {
        margin: 5px; 
      }
    }

    会输出

    .bordered.float {
      float: left;  
    }
    .bordered .top {
      margin: 5px;
    }

    第五节 运算

    任何数字、颜色或者变量都可以参与运算
    例:

    @base: 5%;
    @filler: @base * 2;
    @other: @base + @filler;
    
    color: #888 / 4;
    background-color: @base-color + #111;
    height: 100% / 2 + @filler;

    LESS 的运算已经超出了我们的期望,它能够分辨出颜色和单位。如果像下面这样单位运算的话:

    @var: 1px + 5;

    LESS 会输出 6px.
    括号也同样允许使用:

    width: (@var + 5) * 2;

    并且可以在复合属性中进行运算:

    border: (@width * 2) solid black;

    第六节 作用域

    跟其他编程语言非常类似,首先会从本地查找变量或者混合模块,如果没找到的话会去父级作用域中查找,直到找到为止.

    @var: red;
    #page {
      @var: white;
      #header {
        color: @var; // white
      }
    }
    
    #footer {
      color: @var; // red  
    }

    第七节 注释

    与JS雷同

    /* Hello, I'm a CSS-style comment */
    .class { color: black }
    
    LESS 同样也支持双斜线的注释, 但是编译成 CSS 的时候自动过滤掉:
    
    // Hi, I'm a silent comment, I won't show up in your CSS
    .class { color: white }

    第八节 避免编译

    有时候我们需要输出一些不正确的CSS语法或者使用一些 LESS不认识的专有语法.
    要输出这样的值我们可以在字符串前加上一个 ~
    例:

    .class {
      filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
    }

    我们可以将要避免编译的值用 “”包含起来,输出结果为:

    .class {
      filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
    }
    展开全文
  • less的类和方法

    千次阅读 2018-01-20 14:56:41
    less的类和方法 1.在一个类中调另一个类 less1.less a{ color:red } b{ .a; } 编译后的 less1.css ...1.在一个类中调一个方法 less1.less a(){ color:red } b{ .a(); } 编译后的 l
  • 定义一个类Demo,其中定义一个求两个数据和的方法定义一个测试了Test,进行测试。 变量什么时候定义为成员变量: 如果这个变量是用来描述这个类的信息的,那么,该变量就应该定义为成员变量。 变量到底...
  • umi 使用 less 变量定义主题色

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

    千次阅读 热门讨论 2020-08-13 15:13:45
    最近做一个主题切换功能,查了一下网上的实现方式,找到的都...首先我们要全局引入一个style.less文件,这样可以在项目中直接调用style.less中的变量,为了实现这个功能我们需要借助插件。 npm i style-resources-loade
  • less文件中,任何数字、颜色或变量都能参与运算,就是less提供了(+)(-)(*)(/)算术的运算。 代码示范: /*是在less文件里写*/ @width:10px + 5; div { /*其实就变成了15px的边框*/ border:@width solid ...
  • LESS定义: LESS是一门CSS预处理语言,它扩展了CSS语言,增加了变量,Mixin,函数等特性。优点:使得CSS更易维护与扩展。 简单的说:可以更方便的编写CSS代码,并更方便维护与扩展。 注意:LESS只是一个纯文本...
  • 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; }
  • LESS 函数方法

    千次阅读 2018-04-22 15:22:17
    颜色定义 (Color Definition) 颜色操作 颜色混合 混合 (misc) // 字符转颜色 color("#CCC") //返回图像尺寸(示例尺寸100*50) image-size("file.jpg"); // =&gt; 10...
  • LESS简介及使用方法

    千次阅读 2016-03-31 16:39:55
    2)程序员在自己的开发电脑上运行一个Less编译程序,把.less编译为.css文件 3)编写.html文件,直接链接.css文件即可     3.在服务器端编译Less源文件的步骤——易出错!  (1)下载并安装一个服务器...
  • Less

    千次阅读 2020-02-18 21:49:45
    定义 Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、...是不是要一个一个的替换,这样做是不是显得很麻烦且浪费时间 我们想像,既...
  • Less变量

    千次阅读 2017-11-20 10:30:47
    Less变量 定义变量 Less 中的变量和其他编程语言一样,可以实现值的复用,同样它也有作用域(scope)。简单的讲,变量作用域就是局部变量和全局变量的...先看一个简单的例子,Less 文件如下: @width : 20px; #homeDiv
  • less的几种常见编译方法

    千次阅读 2018-12-26 10:13:24
    当写完less文件后,浏览器并不能直接的识别less文件,所以需要先编译一下,有以下几种方法 1.可以安装一个koala软件,安装完之后,添加less文件,即可编译出相对应的css文件 ...
  • LESS中,通过Mixin的函数多态特性可以降低调用的复杂度,显著提高工作效率,并能大幅减少代码工作量,实现多态的方法有两种,如下。1. 函数调用方式函数定义的方式如下:.tr-td-style(@size:12px;@color) { tr { ...
  • less混合 + less计算

    千次阅读 2020-11-01 16:53:08
    通俗来讲,规则集即指一套代码,一套定义一定规则的代码,比如一套定义样式的代码,就是一个规则集 比如: 这里面的样式就是一个规则集 混合就是把一套规则集用于另一个元素上面 混合类别: 普通混合 不带输出的混合...
  • 当你想要在vue项目的一个组件中使用全局样式文件中定义好的变量,此时只在main.js中import是不行的。 目录结构如下: 即在MHeader.vue中想要使用src下的less下的variables.less文件中定义好的变量。 此时,...
  • less

    千次阅读 2013-11-20 16:14:21
    js动态修改less: 首先,less有client或server两种compile模式,可以在server side先编译成为css,也可以直接使用less到客户端。如果直接在客户端使用less,如下,就可以用js来动态修改变量。此时要引用less.js。 ...
  • 想把变量抽到一个公共的less文件中,然后在项目的各个组件都可以使用,试了很多方法都报错 <style scoped lang="less"> @import "../assets/css/common.less"; .left-nav{ width: 58px; height: 1080px; ...
  • 、HBuildex编译设置(已配置node与Less插件) 本人使用的是HbuilderX编译,可以实现保存自动编译,在配置文件设置key:"ctrl+s"和onDidSaveExecution:"true" 这里是手动编译 二、代码学习模块 使用的是css的...
  • vue配置全局less变量/方法 详细过程

    千次阅读 2018-10-25 19:26:45
    核心:sass-resources-loader组件 实现过程如下: 1.安装 npm i sass-resources-loader -S   ...2.修改配置文件build/utils.js ...// 全局less变量配置 function lessResourceLoader() { var loaders = [ c...
  • less的几种编译成css的方法

    千次阅读 2019-07-18 00:39:27
    当你在写CSS代码时,面对成百上千的CSS代码项目,遇到需要改变一些颜色时都需要进行替换操作既费时效率也不高。...变量 - 它可以让你更轻松的在整个样式表中定义和更改值(这功能 CSS 在未来某天...
  • less入门教程

    万次阅读 2015-09-14 16:55:05
    什么是LESSCSS LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、...变量允许我们单独定义一系列通用的样式,然后在需要的时候去调用。所以在
  • Less混入

    千次阅读 2019-10-17 13:47:14
    Mixins 是一组CSS属性,允许我们将一个类的属性嵌套于另一个类,被嵌入的类可以看作是变量,并且包含类名作为其属性,也就是说我们可以用一个定义样式然后把它当作变量,在另一个类中,只要引用变量的名字,就能够...
  • less变量

    2019-07-15 22:32:55
    编写less的变量,和我们平时定义js变量的方法不太一样,在less中是使用 @ 标识符来定义变量的,如: @font-color: blue; @border-color: #ddd; 这里就定义了两变量,分别是font-color 和 border-color。 二:...
  • less一个功能强大的css超集,可以方便我们进行css代码的书写,less具有很多现代语言的特性,而不是简单的标记语言,包括分支和循环,这里我们使用循环来进行元素的自动化生成。下面的代码需要一些less知识:less...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 141,604
精华内容 56,641
关键字:

less定义一个方法