Less的基本使用

2024-03-12 21:01:38

为什么要使用css预处理器Less

Less是一门CSS预处理语言，对CSS语言进行了扩展，增加了变量、函数、Mixin等特性，使得CSS通过Less编写更容易维护和扩展。

通过@定义变量

css中需要统一维护，或出现次数较多的可以提取成变量的形式，便于维护。变量可以用在常规css规则中，也可以用在选择器名称、属性名称、URL和@import语句中

// 在常规css规则中使用变量
@link-color: #f00; // 定义变量
a, link {
    color: @link-color;
}
// 编译为
a, link{ color: #f00; }

// 使用@{}插值的方式使用变量，作为class名
@cusMenu: menu;
.@{cusMenu} {
    line-height: 40px;
}
// 编译为
.menu{ line-height: 40px; }

// URL中使用
@images: "../img";
body{
    background: url("@{images}/logo.png");
}

// 在@import语句中使用
@themes: "../css/themes";
@import "@{themes}/pc.less";

// 作为属性使用
@property: color;
.widget {
    @{property}: #eee;
}

// 变量重命名
@primary: green;
.section {
    @color: primary; // 重新命名为color
    color: @@color;  // 使用时需要多加一个@
}

// 也存在变量提升, 可以先使用后声明，最后一个生效
.section {
    width: @var;
}
@var: 100%;

// $prop语法，可以将属性作为变量使用
.widget{
    color: #efefef;
    background-color: $color;
}
// 编译为
.widget {
    color: #efefef;
    background-color: #efefef;
}
// 父子作用域中
.block {
    color: red;
    .inner{
        background-color: $color;
    }
    color: blue;
}
// 编译为
.block {
    color: red;
    color: blue;
}
.block .inner{
    background-color: blue;
}

Mixins (混合)

Minxins 是一种将一组属性从一个规则集包含到另一个规则集的方法。Mixin中调用的括号是，不推荐使用。

// 定义Minxin方法，可以是混合类选择器和ID选择器
.a, #b{
    color: red;
}
.mixin-class{
    .a; // 混入
}
.mixin-id{
    #b(); // 括号是可选的
}
// 编译为
.a, #b{
    color: red;
}
.mixin-class {
    color: red;
}
.mixin-id {
    color: red;
}

// 声明不输出css的Mixin方法
.my-mixin{
    color: black;
}
.my-other-mixin() { // 将不会输出css
    background: white; 
}
.class {
    .my-mixin();
    .my-other-mixin();
}
// 编译为
.my-mixin {
    color: black;
}
.class {
    color: block;
    background: white;
}

// Mixin 中的选择器
.my-hover-mixin() {
    &:hover {
        border: 1px solid red;
    }
}
button {
    .my-hover-mixin();
}
// 编译为
button:hover {
    border: 1px solid red;
}

// 命名控件(可以减少与其他库mixin或用户mixin的冲突)
#my-library {
    .my-mixin() {
        color: black;
    }
}
.class {
    // 可以使用以下三种方式使用命名控件mixin方法
    #my-library.my-mixin();
    #my-library .my-mixin();
    #my-library > .my-mixin();
}

// 受保护的命名控件(保护条件返回true时才使用定义的mixin
#namespae when (@mode = huge) {
    .mixin() {}
}
#namespace {
    .mixin() when (@mode = huge) {}
}

// 在mixin方法后使用!important关键字
// !important在mixin调用之后使用关键字将其继承的所有属性标记为!important
.foo() {
    background: red;
    color: blue;
}
.important {
    .foo()!important;
}
// 编译为
.important {
    background: red!important;
    color: blue!important;
}

// Mixin可以设置参数，并应用到属性中
.border-radius(@radius: 5px){
    -webkit-border-radius: @radius;
       -moz-border-radius: @radius;
            border-radius: @radius;
}
.button{
    // 如果不传参数，则默认为5px
    .border-radius(6px);
}

嵌套中的父选择器 &

注意：& 代表所有父选择器，不仅仅是最近的祖先

a {
    &:hover {
        color: green;
    }
}
// 编译为
a:hover {
    color: green;
}

// 利用&产生重复的类名
.button {
    &-ok{}
    &-cancel{}
}
// 编译为
.button-ok{}
.button-cancel{}

// &可能会在选择器中出现多次，这样可以重复引用父选择器而不重复其名称
.link {
    & + & {}
    & & {}
    && {}
    &, &ish {}
}
// 编译为
.link + .link{}
.link .link{}
.link.link{}
.link, .linkish{}
// 在深层次中出现多个&时
.grand {
    .parent{
        & > & {}
        & & {}
        && {}
        &, &ish {}
    }
}
// 编译为
.grand .parent > .grand .parent {}
.grand .parent .grand .parent {}
.grand .parent.grand .parent {}
.grand .parent, .grand .parentish {}

映射(Maps)

通过命名空间与查找[]语法相结合，将规则集/混合转换为映射

#colors() {
    primary: blue;
    secondary: green;
}
.button {
    color: #colors[primary];
    border: 1px solid #colors[secondary]
}
// 多层混合
#library() {
    .colors() {
        primary: green;
        secondary: blue;
    }
}
.button {
    color: #library.colors[primary];
    border-color: #library.colors[secondary];
}

关于注释

和JS中的注释保持一致

/* 这是一个块注释 */
@var: red;
// 单行注释
@var：white;

导入@import

@import "library"; // 省略.less扩展名
@import "reset.css";

码农公寓