精华内容
下载资源
问答
  • 在我的现实世界中,我需要创建一个Web应用程序,该应用程序将显示多个品牌,并且每个品牌都有自己的文本颜色,背景等等。因此,我开始寻找一种在LESS中实现此目标的方法, 可以轻松地在SASS上执行,结果如下:减// ...

    我知道这个问题已经很老了,但是对于那些发表这篇文章的人,我的回答也许会有所帮助

    我不确定您要使用什么,但是我的建议之一是基于@ScottS答案。 在我的现实世界中,我需要创建一个Web应用程序,该应用程序将显示多个品牌,并且每个品牌都有自己的文本颜色,背景等等。因此,我开始寻找一种在LESS中实现此目标的方法, 可以轻松地在SASS上执行,结果如下:

    // Code from Seven Phase Max

    // ............................................................

    // .for

    .for(@i, @n) {.-each(@i)}

    .for(@n) when (isnumber(@n)) {.for(1, @n)}

    .for(@i, @n) when not (@i = @n) {

    .for((@i + (@n - @i) / abs(@n - @i)), @n);

    }

    // ............................................................

    // .for-each

    .for(@array) when (default()) {.for-impl_(length(@array))}

    .for-impl_(@i) when (@i > 1) {.for-impl_((@i - 1))}

    .for-impl_(@i) {.-each(extract(@array, @i))}

    // Brands

    @dodge : "dodge";

    @ford : "ford";

    @chev : "chev";

    // Colors

    @dodge-color : "#fff";

    @ford-color : "#000";

    @chev-color : "#ff0";

    // Setting variables and escaping than

    @brands: ~"dodge" ~"ford" ~"chev";

    // Define our variable

    .define(@var) {

    @brand-color: '@{var}-color';

    }

    // Starting the mixin

    .color() {

    // Generating the loop to each brand

    .for(@brands); .-each(@name) {

    // After loop happens, it checks what brand is being called

    .define(@name);

    // When the brand is found, match the selector and color

    .brand-@{name} & {

    color: @@brand-color;

    }

    }

    }

    .carColor {

    .color();

    }

    结果将是:

    的CSS

    .brand-dodge .carColor {

    color: "#fff";

    }

    .brand-ford .carColor {

    color: "#000";

    }

    .brand-chev .carColor {

    color: "#ff0";

    }

    这非常棘手,我不得不使用几个元素来获得所需的东西,首先使用了Seven Phase Max提供的一组mixin,您可以在这里找到它,然后@ScottS的答案就是我的难题所缺少的部分 ...希望这对您和其他需要创建一组变量以成为另一个变量的一部分并创建更少动态文件的人有所帮助。

    您可以复制我的整个代码并在[http://lesstester.com/]进行测试

    展开全文
  • Less 变量

    2020-10-12 11:46:50
    本节我们来学习 Less 中的变量,很多编程语言中都有变量这个概念,而不同的语言中定义...例如在 CSS 代码中,某个颜色值 #f93d66 在多个地方被使用: .xkd{ border: 1px solid #f93d66; } .xkd h3{ background-color:

    本节我们来学习 Less 中的变量,很多编程语言中都有变量这个概念,而不同的语言中定义变量的方式也不一样。例如在 JavaScript 中可以通过 var 关键字定义变量。

    变量表示可以改变的值, Less 中的变量可以帮助我们为重复定义的样式类或者属性值起一个别名。这是什么意思呢,看下面这个例子。

    示例:

    例如在 CSS 代码中,某个颜色值 #f93d66 在多个地方被使用:

    .xkd{
      border: 1px solid #f93d66;
    }
    .xkd h3{
      background-color: #f93d66;
    }
    .xkd .circle{
      color: #f93d66;
    }
    

    如果使用 Less 语言来写,如下所示:

    @color: #f93d66;
    
    .xkd{
       border: 1px solid @color;
       h3{
          background-color: @color;
       }
       .circle{
          color: @color;
       }
    }
    

    将这个颜色值赋给了一个变量 @color,然后在使用的时候直接使用这个变量名。

    这样有一个什么好处呢,可能上述代码还不明显,如果是在大型项目中,一个相同的值可能重复几十上百次。如果后期我们想要修改这个颜色,一个一个去改会很麻烦,而使用变量,就只要修改这个变量值即可,不需要修改多个地方,让代码更加容易维护。

    变量的语法

    在 Less 语言中,我们可以使用 @ 符号来定义变量,变量分配使用冒号 : 来分配 ,注意是冒号不是等号哟。

    @变量名:变量值;
    
    示例:

    例如下面这段代码,定义了一个变量 @border

    @border:1px solid #ccc;
    .xkd{
       font-size: 14px;
       border: @border;
    }
    .hava{
       border: @border;
    }
    

    编译成 CSS 代码:

    .xkd {
      font-size: 14px;
      border: 1px solid #ccc;
    }
    .hava {
      border: 1px solid #ccc;
    }
    

    注意使用的时候,变量名前面也要带 @ 符号。

    变量的使用

    Less 语言中变量的使用方式主要有以下几种:

    • 普通变量
    • 选择器变量
    • 属性名变量
    • URL变量
    普通变量

    普通变量就是我们上面使用到的变量,定义方式一般为 @变量名:变量值,通常用于定义颜色值或字体大小等。

    示例:
    @color: pink;
    @radius : 5px;
    
    .xkd{
      color: @color;
      border-radius: @radius;
    }
    

    编译成 CSS 代码:

    .xkd {
      color: pink;
      border-radius: 5px;
    }
    
    选择器变量

    变量可以把选择器变为一个动态的选择器,也可以复用选择器中重复的字符。在使用选择器变量时,变量名需要放在用 @ 符号前缀的花括号 {} 内。

    示例:

    下面是一段 Less 代码,其中定义了一个变量 @name,变量的值为 xkd_top,使用时需要将这个变量 @name 使用花括号包起来:

    @name: xkd_top;
    
    .@{name} {
        font-size: 14px;
    
    }
    #@{name} {
        color: #aaa;
    }
    .div_@{name} {
        padding: 10px;
    }
    

    编译成 CSS 后输出为:

    .xkd_top {
      font-size: 14px;
    }
    #xkd_top {
      color: #aaa;
    }
    .div_xkd_top {
      padding: 10px;
    }
    
    属性名变量

    属性名变量的使用其实和选择器变量的使用差不多,都是通过 {} 将变量名括起来。

    示例:

    例如将 font-size 属性定义为一个属性名变量,然后只要使用到这个属性,就可以用 @{fz} 代替:

    @fz:font-size;
    
    h3{
        @{fz}:18px;
    }
    
    p{
        @{fz}:12px;
    }
    

    编译成 CSS 代码:

    h3 {
      font-size: 18px;
    }
    p {
      font-size: 12px;
    }
    
    URL变量

    文件的 URL 也可以作为一个变量使用。

    示例:

    例如我们将某个地址放到一个变量中:

    @xkd:"https://www.9xkd.com/";
    
    .banner{
        background: url("@{xkd}/img.png");
    }
    

    编译成 CSS

    .banner{
      background: url("https://www.9xkd.com//img.png");
    }
    

    总结

    在实际应用中,一般我们会将多个页面公用的样式放到一个单独的文件中。声明变量也可以单独放到一个文件内,这样利于我们维护代码。

    展开全文
  • 想把变量抽到一公共的less文件中,然后在项目的各个组件都可以使用,试了很方法都报错 <style scoped lang="less"> @import "../assets/css/common.less"; .left-nav{ width: 58px; height: 1080px; ...

    想把变量抽到一个公共的less文件中,然后在项目的各个组件都可以使用,试了很多方法都报错

    vue-cli2.x

    一,安装loader

    npm install sass-resources-loader --save-dev
    

    二,添加代码到build 的utils.js中exports.cssLoaders = function (options) {}中

     function lessResourceLoader() {
            var loaders = [
                cssLoader,
                'less-loader',
                {
                    loader: 'sass-resources-loader',
                    options: {
                        resources: [
                            path.resolve(__dirname, '../src/assets/styles/common.less'),
                        ]
                    }
                            }
            ];
            if (options.extract) {
                return ExtractTextPlugin.extract({
                    use: loaders,
                    fallback: 'vue-style-loader'
                })
            } else {
                return ['vue-style-loader'].concat(loaders)
            }
        }
    
    

    ps:path.resolve(__dirname, ‘…/src/assets/styles/common.less’)为自己对应的文件

    然后后面将 return{} 块中的 less: generateLoaders(‘less’) 替换成上面自定义的函数 less: lessResourceLoader()
    在这里插入图片描述
    最后重启服务 less生效!!
    然后发现不需要在main.js里引入,也不需要在app.vue里引入

    vue-cli3及以上

    安装loader

    vue add style-resources-loader
    

    vue.cogfig.js添加以下代码

    const path = require("path");//这一段需要自行添加
    module.exports = {
      pluginOptions: {
        'style-resources-loader': {
          preProcessor: 'less',
          patterns: [
            path.resolve(__dirname, "src/style/global.less")//需要自行添加,这里的路径不要写错了
          ]
        }
      }
    }
    

    也可以把以上的less路径写成一个index.less,然后在index.less里去@import各个文件

    记住!less定义变量时一定要以;结尾
    记住!less定义变量时一定要以;结尾
    记住!less定义变量时一定要以;结尾

    展开全文
  • less 全局变量使用

    2018-11-18 10:09:00
    忽然想定义个变量,但是却需要每个 .vue 文件都需要单独引入这个全局变量才可以,导致很重复不必要的工作,因而得寻找一种可以任何地方都可以访问的方法 借助换肤这个功能 sass-resources-loader /** vue-cli...

    less 全局变量使用

    忽然想定义一个变量,但是却需要每个 .vue 文件都需要单独引入这个全局变量才可以,导致很多重复不必要的工作,因而得寻找一种可以任何地方都可以访问的方法

    /** vue-cli3.0 **
    // vue.config.js
    module.exports = {
      chainWebpack: config => {
        const oneOfsMap = config.module.rule('less').oneOfs.store
        oneOfsMap.forEach(item => {
          item
            .use('sass-resources-loader')
            .loader('sass-resources-loader')
            .options({
              // Provide path to the file with resources
              resources: './path/to/resources.less',
    
              // Or array of paths
              resources: ['./path/to/vars.scss', './path/to/mixins.scss']
            })
            .end()
        })
      }
    }

    总结

    • 后期再进行记录,一步步来吧

    转载于:https://www.cnblogs.com/sinosaurus/p/9977102.html

    展开全文
  • 我们开发过程中经常会使用很 less ... 定义 themes.less 文件,将你想用的全局变量装入其中@primary-color: #32b642; // 全局主色@link-color: #32b642; // 链接色@warning-color: #faad14; // 警告色@error-c...
  • 背景通常我们在用less时,会定义诸多变量,来减轻更改时的负担,但是在vue开发时,如果我们有一variable.less文件,在组件中使用变量时不得不写入这文件的引用,如下图@assets:"~@/assets";@import "@{assets}/...
  • 1. 定义 themes.less 文件,将你想用的全局变量装入其中 @primary-color: #32b642; // 全局主色 @link-color: #32b642; // 链接色 @warning-color: #faad14; // 警告色 @error-color: #f5222d; // 错误色 @...
  • /*用@定义个变量*/ @light-color: @nice-color + #111111; /*颜色可以进行加减*/ #header_group{ color: @light-color; } 也可以用变量名定义变量 @pig:"today you are a pig"; @message:"pig"; //这
  • 让我们考虑下场景:当使用rem/vw开发移动端的时候,你定义了一px转rem的函数,或者是网站配色的全局变量等,然后到工程里为每vue文件或者组件@import ‘publicfilename.scss’,那得重复做这样的工作很…次,...
  • less

    2021-04-05 16:13:42
    ** less的注释: ** 如果注释在less文件中使用 / / 时,编译在css文件中这注释不可以(不显示),是给开发者看的...比如在一CSS文件中,pink色使用的次数比较 那么我们就可以进行定义变量 @color:pink backgroun
  • Sass 定义 Sass(英文全称:Syntactically Awesome Stylesheets)是一最初由Hampton Catlin设计并由Natalie ...Sass语法的编排语法,比CSS出很功能,变量、嵌套。运算,继承,颜色处理,函数等。完全兼容CSS3...
  • 让我们考虑下场景:当使用rem/vw开发移动端的时候,你定义了一px转rem的函数,或者是网站配色的全局变量等,然后到工程里为每vue文件或者组件@import ‘publicfilename.scss’,那得重复做这样的工作很......
  • Less

    千次阅读 2020-02-18 21:49:45
    Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端 下面通过一些例子来加深对它的理解 情景一 ...
  • less的使用

    2021-04-20 23:32:44
    定义多个相同名称的变量时 在当前作用域由下向上,取最近,最新定义的一个的值 一、混合 普通混合 如上图所示,是普通的混合,h1,h2 都含有第2、3行相同的内容,就使用混合 二、混合不带输出 如果想让1至4行不...
  • less学习笔记

    2020-09-22 17:10:16
    Less变量混合引入(import)可带参数条件表达式 ...-定义多个相同的名称的变量变量存在作用域 —— 块级作用域 @var: 0px; .class { @var: 1px; .brass { @var: 2px; height: @var; // 这里的值是3 @va
  • less 入门

    2019-09-02 16:31:05
    使用@来定义个变量,比如 @test_width:300px 3、混合 可以将一个元素中多个的的样式写在一起,比如 我定义了一个边框的样式为border .border{ border:solid 5px yellow } 我可以在不同的私房去使用这个...
  • Less学习笔记

    2020-02-18 22:53:08
    文章目录1.初见Less1.1 什么是Less1.2 Less官方网站1.3 与Less的第一次...变量(variables)3.1 普通的变量3.2 作为选择器和属性名3.3 作为URL3.4 延迟加载3.5 定义多个相同名称的变量时4.混合(mixins)4.1 普通混合4.2...
  • less混合 + less计算

    千次阅读 2020-11-01 16:53:08
    less中的混合 混合的意思: 混合就是将一系列属性...带多个参数的混合 命名参数 匹配模式 arguments变量 普通混合 即直接写一个不影响html中元素的选择器,然后代码体里面写上规则集,然后直接让其他规则集调用 这种
  • LessCss

    2016-02-16 15:08:35
    网页客户端 1.建立styles.less 文件(less样式文件...2.当你引入多个 .less 样式表时,它们都是独立编译的。所以,在每个文件中定义变量、混合、命名空间都不会被其它的文件共享。     下列所有代码在styles.
  • less学习之基本语法

    2019-12-18 11:46:58
    了解LessLess注释符编译模式延时加载特性变量变量用作属性名变量用作类名变量用作链接定义多个变量混合混合(带选择器)混合(带参数)混合(多个参数)arguments变量匹配模式得到混合变量的返回值嵌套规则父元素...
  • Less混入

    2019-10-17 13:47:14
    混合类似于编程语言中的函数。 Mixins 是一组CSS属性,允许我们将一个类的...在Less中,可以使用类或者是id选择器以与CSS样式相同的方式声明mixin,它可以存储多个值,并且可以在必要的时候在代码中重复使用。 注...
  • less快速入门

    2021-04-27 09:58:06
    Less CSS 是一使用广泛的 CSS 预处理器,对 CSS 进行扩展,减少很 CSS 的代码量。 less运用起来非常的简单方便,相信没学过的人阅读完后就懂了,主要是以下几点: 变量 style.less写法: //定义变量:@ @nice-...
  • LESS的好处

    2017-07-06 09:28:00
    今日目标: 1:今天的学习内容是在工作完成的情况下...如果加载多个.less样式表文件,每个文件都会被单独编译。因此,一个文件中所定义的任何变量、mixin 或命名空间都无法在其它文件中访问 注意,由于变量只能...
  • less教程

    2017-06-17 19:44:00
    他不像js一样,定义变量、函数,需要修改某些值,直接修改方法就行了。less的出现,恰恰帮我们解决了这问题 在这呢,我们简要说明一下less:  LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的...
  • LESS基础用法

    2020-05-10 22:33:23
    LESS 语法: LESS 做为 CSS 的一种形式的扩展,它并没有阉割 CSS 的功能,而是在现有的 CSS 语法上,添加了很额外的功能,所以学习 LESS 是一...在 LESS 中我们可以定义一些通用的属性集为一class,然后在另一clas
  • less手记

    2020-09-21 09:43:07
    以上是官方文档的定义,通俗的讲就是提供一能够把属性的键值对同时输出的方案 @min768: ~"(min-width: 768px)"; 就是把min-width:768px作为值在后面的代码中引用 2. 函数 less中内置了很的函数,可以处理颜色,数学...
  • 关于less

    2017-02-17 10:34:11
    css是不能够定义变量的,也不能嵌套。它没有编程语言的特性。在项目开发中,常常发现有很css代码是相同的,但我们通常都是复制然后粘贴。 举例子:假设h5应用里主题色是#FF3A6D,可能用于文字或者背景色。通常...

空空如也

空空如也

1 2 3 4 5 ... 7
收藏数 121
精华内容 48
关键字:

less定义多个变量