less学习笔记

原创 yanliping 随笔 less 55阅读 15 天前 举报

1.什么是less
less是一种动态的样式处理语言
2.如何使用less
<link rel="stylesheet/less" type="text/css" href="less/styles.less">
  <script src="js/less.js" type="text/javascript"></script>
less样式在前,js导入在后,顺序不可颠倒
3.less的主要要点
3.1变量
3.2混入使用与方法,定义一个公共类,然后其他都引用这个公共类方法
3.3嵌套
从上在的实例代码中,都很清楚的了解到,嵌套规则可以让我们写样式时能像DOM树形那样有结构的去写代码,从而减了选择器的层级关系,更主要的是这样使用我们的代码更简洁,更具有阅读性,这种嵌套规则对我们操作伪元素更为方便和重要
注意了,这里的&很重要,在Less中嵌套书写中有没有&区别是完全不一样的效果,有&时解析的是同一个元素或此元素的
伪类,没有&解析是后代元素:
3.4functions & Operations
运算这一部分其实应用并没有那么广泛,目前了解
lighten(@color, 10%); // return a color which is 10% lighter than @color
darken(@color, 10%); // return a color which is 10% darker than @color
saturate(@color, 10%); // return a color 10% more saturated than @color
desaturate(@color, 10%); // return a color 10% less saturated than @color
fadein(@color, 10%); // return a color 10% less transparent than @color
fadeout(@color, 10%); // return a color 10% more transparent than @color
spin(@color, 10); // return a color with a 10 degree larger in hue than @color
spin(@color, -10); // return a color with a 10 degree smaller hue than @color

3.85命名空间 将一样的提取
例如

bundle {

.button () {
    display: block;
    border: 1px solid black;
    &:hover { background-color: white }
}
.tab { ... }
.citation { ... }

}

header a {

color: orange;
#bundle > .button;

}
3.6变量范围-scope
3.7less注释
一般使用css那种注释
/**/ /***/
也可像js一样注释//
less学习相关博客链接:
http://www.bootcss.com/p/lesscss/#-comments
https://www.w3cplus.com/css/less
https://www.cnblogs.com/azhai-biubiubiu/p/5957132.html

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复