less 语法入门笔记

最新推荐文章于 2022-08-21 21:02:42 发布

jarineee

最新推荐文章于 2022-08-21 21:02:42 发布

阅读量468

点赞数

分类专栏： Less 文章标签： less

本文链接：https://blog.csdn.net/jarineee/article/details/76254433

版权

这篇博客详细介绍了Less预处理器的基础语法，包括变量定义、类函数Mixin的使用、注释、运算、避免编译的技巧、嵌套选择器、&字符的应用、!important声明以及@import的用法。通过实例展示了Less如何提升CSS编写效率和代码复用性。

摘要由CSDN通过智能技术生成

less 语法入门笔记

根据慕课网busy老师的课程和网上资料整理的笔记

变量的定义与使用

变量

less中的变量也是存在作用域的，确保变量声明在目标类里面或上面。
用 @ 去声明一个变量，变量的值可以是数字，颜色，或其他样式值。

例如： @themeColor: #e9232e;

类(class)函数Mixin的定义与使用

同样需要注意作用域。

样式类的混合(Mixin)

将样式内容保存在一个类中，只需要声明该类，就可以直接将样式内容插入到其他样式后面。

例如：

// less中定义：

    .default {
        background-color: lightcyan; 
        color: gold;
    }
    body {
        font-size: 12px; 
        border: 1px #dedede, solid;
        .default; //此处一定是类，写标签会报错，即不能写成 div；p;
    }

// 编译为css后：

    body {
        font-size: 12px; 
        border: 1px #dedede, solid;
        background-color: lightcyan; 
        color: gold;
    }