less的使用

变量、嵌套、Mixin混合,示例:

@ly_width:100px;
@ly_height:200px;
@ly_color:green;
.border {
    .two {
       border:1px solid red;
    }  
}
.one {
    width:@ly_width;
    height:@ly_height;
    background-color:@ly_color;
    .border;
}

分离规则集合,也可以使用它作为一个mixin参数

// 声明 detached 规则集合
@detached-ruleset: { background: red; };

// 使用 detached 规则集合
.top {
    @detached-ruleset(); //圆括号是必须的
}

带参数的混合。引用mixin时可以通过参数名称而不是参数的位置来为mixin提供参数值。任何参数都已通过它的名称来引用,这样就不必按照任意特定的顺序来使用参数::

@ly_width:100px;
@ly_height:200px;
@ly_color:green;
.mixin(@color: black; @border_width:3px;) {
    border:@border_width solid red;
    color:@color;
}
.one {
    width:@ly_width;
    height:@ly_height;
    background-color:@ly_color;
    .mixin(#efca44; @border_width:5px);
}

@arguments变量

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

命名空间,同样 > 是可选的,这种用法的效果相当于我们熟知的命名空间,你可以把混合集放到一个id选择器里面,这样可以确保它(这个混合集)不会跟其他的库冲突。

#outer {
  .inner {
    color: red;
  }
}

.c {
  #outer > .inner;
}

Mixins as Functions(作为函数使用的混合)

.average(@x, @y){
    @average:((@x + @y)/2)
}
div{
    .average(16px, 50px);
    padding: @average;
}
结果:
.div{
    padding: 33px;
}

less循环

//定义
.intro-loop(@n, @i:1) when (@i <= @n) {
    .intro-@{i} {
        img {
            background-image: url("../images/intro-@{i}.jpg");
        }
    }
    .intro-loop(@n, (@i + 1));
}
//调用
.introduction {
    .intro-loop(4);
}

//下面是less官方文档给的循环实例,其实实际上这就是递归调用
.loop(@counter) when (@counter > 0) {
    .loop((@counter - 1));
    width: (10px + @counter);
}

使用

@keyframes moveTable {
  from {
    transform: translateX(300%);
  }
  to {
    transform: translateX(0);
  }
}

.intro-loop(@n, @i:1) when (@i <= @n) {
  &:nth-child(@{i}){
    animation: moveTable ( .15s * @i ) ease-in-out;
  }
  .intro-loop(@n, (@i + 1));
}

 

### 配置 Vue 项目以支持 LESS 为了使 Vue 项目能够利用 LESS 编写样式,需先确保环境已准备好解析 `.less` 文件。这涉及到安装必要的构建工具和支持库。 #### 安装依赖包 通过 npm 或 yarn 来获取 `less` 和 `less-loader`,这是编译 LESS 到 CSS 所必需的组件[^1]: ```bash npm install less less-loader --save-dev ``` 对于希望在整个应用程序中共享某些 LESS 资源(比如变量定义或混入),可以考虑使用 `style-resources-loader` 插件来自动导入这些资源到每一个 LESS 文件中[^2]。 #### 修改配置文件 如果采用的是 Vue CLI 创建的应用程序,则可以在项目的根目录下找到名为 `vue.config.js` 的配置文件,在其中添加对 LESS 支持的相关设置[^3]: ```javascript // vue.config.js module.exports = { css: { loaderOptions: { less: { additionalData: '@import "@/styles/variables.less";' } } } } ``` 上述代码片段展示了如何让所有的 LESS 文件默认加载特定路径下的自定义变量文件,从而实现全局可用的样式定制化选项。 #### 使用 LESS 开发样式 一旦完成了以上准备工作之后,就可以像平常一样在单文件组件 (SFC) 中编写 `<style lang="less">...</style>` 块内的 LESS 语法了;也可以创建独立的 .less 文件并按常规方式引入它们。 ```html <template> <div class="example"> {{ message }} </div> </template> <script> export default { data() { return {message: 'Hello, world!'} } }; </script> <style scoped lang="less"> .example { color: @primary-color; } </style> ``` 在这个例子中,假设已经有一个包含了颜色变量定义的全局 LESS 文件被正确地载入到了整个应用里,那么这里可以直接引用该变量而无需重复声明。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值