发表于: 2019-12-23 22:14:50

1 1090


今天完成的事情:学习了一下less
明天计划的事情:继续任务
遇到的问题:less的概念较多,今天看了一天也没看完,明天继续
收获:了解了一下less的基本概念,例如

变量(Variables)

无需多说,看代码一目了然:

@width10px;

@height@width + 10px;

#header {

    width@width;

    height@height;

}

编译为:

#header {

    width10px;

    height20px;

}

混合(Mixin)是一种将一组属性从一个规则集包含(或混入)到另一个规则集的方法。假设我们定义了一个类(class)如下:

.bordered {

    border-topdotted 1px black;

    border-bottomsolid 2px black;

}

如果我们希望在其它规则集中使用这些属性呢?没问题,我们只需像下面这样输入所需属性的类(class)名称即可,如下所示:

#menu a {

    color#111;

    .bordered();

}

.post a {

    colorred;

    .bordered();

}

嵌套(Nesting)

Less 提供了使用嵌套(nesting)代替层叠或与层叠结合使用的能力。假设我们有以下 CSS 代码:


#header {
    colorblack;
}

#header .navigation {
    font-size12px;
}

#header .logo {
    width300px;
}


用 Less 语言我们可以这样书写代码:

#header {
    colorblack;

    .navigation {
        font-size12px;
    }

    .logo {
        width300px;
    }
}

用 Less 书写的代码更加简洁,并且模仿了 HTML 的组织结构。

你还可以使用此方法将伪选择器(pseudo-selectors)与混合(mixins)一同使用。下面是一个经典的 clearfix 技巧,重写为一个混合(mixin) (& 表示当前选择器的父级):

.clearfix {
        displayblock;
        zoom1;

        &:after {
            content" ";
            displayblock;
            font-size0;
            height0;
            clearboth;
            visibilityhidden;
        }
    }

@规则嵌套和冒泡

@ 规则(例如 @media 或 @supports)可以与选择器以相同的方式进行嵌套。@ 规则会被放在前面,同一规则集中的其它元素的相对顺序保持不变。这叫做冒泡(bubbling)。

.component {
    width300px;

    @media (min-width768px) {
        width600px;

        @media (min-resolution192dpi) {
            background-imageurl(/img/retina2x.png);
        }
    }

    @media (min-width1280px) {
        width800px;
    }
}

编译为:

.component {
    width300px;
}

@media (min-width768px) {
    .component {
        width600px;
    }
}

@media (min-width768pxand (min-resolution192dpi) {
    .component {
        background-imageurl(/img/retina2x.png);
    }
}

@media (min-width1280px) {
    .component {
        width800px;
    }
}

明天继续学习


返回列表 返回列表
评论

    分享到