• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

【Less】给 CSS 加点料

开发技术 开发技术 3小时前 2次浏览

【Less】给 CSS 加点料

博客说明

文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢!

说明

相比Sass的高调宣言,Less就比较低调了,看下面官网的介绍

【Less】给 CSS 加点料

官网地址:Less中文网

什么是 Less

已经知道了什么是Sass的情况下,相信对什么是Less应该也会比较的清晰了,它也是CSS的武器,让CSS更加强大。(感觉最近说话有点朴素了哈)

官方回答:Less (Leaner Style Sheets 的缩写) 是一门向后兼容的 CSS 扩展语言。

总结:既然官方都怎么简洁低调了,就不用太多花里胡哨的了

安装Less

可以使用 npm来安装 Less。

npm install -g less

在浏览器中也可以使用

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>

Less变量

变量这种东西当然是第一个来讲的。Less 变量使用 @ 符号。

语法
@variablename: value;
示例
@base-font: Helvetica, sans-serif;
@my-color: red;
@my-font-size: 18px;

body {
  font-family: @base-font;
  font-size: @my-color;
  color: @y-font-size;
}

转换为CSS代码

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

其实就是把变量的使用直接放入对应的值内。

变量的作用域

Sass的变量其实是有作用域的,Sass 变量的作用域只能在当前的层级上有效果,如果当前找不到,就像父节点上寻找

@myColor: red;

h1 {
  @myColor: green;   // 只在 h1 里头有用,局部作用域
  color: @myColor;  // green
}
p {
  color: @myColor;  // red
}

Less的嵌套规则

这个是方便我们书写的好东西,也是最显而易见的新增。

嵌套

嵌套还是直接看代码来的痛快

less代码

nav {
  ul {
    margin: 0;
    padding: 20px;
  }
  li {
    color: #FFFFFF;
  }
}

css代码

nav ul {
  margin: 0;
  padding: 20px;
}
nav li {
  color: #FFFFFF;
}

有点像HTML的形式了

@规则嵌套和冒泡

@ 规则(例如 @media@supports)可以与选择器以相同的方式进行嵌套。

@ 规则会被放在前面,同一规则集中的其它元素的相对顺序保持不变。这叫做冒泡(bubbling)。

// less
.component {
  width: 300px;
  @media (min-width: 768px) {
    width: 600px;
    @media  (min-resolution: 192dpi) {
      background-image: url(/img/retina2x.png);
    }
  }
  @media (min-width: 1280px) {
    width: 800px;
  }
}

// css
.component {
  width: 300px;
}
@media (min-width: 768px) {
  .component {
    width: 600px;
  }
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
  .component {
    background-image: url(/img/retina2x.png);
  }
}
@media (min-width: 1280px) {
  .component {
    width: 800px;
  }
}

导入文件@import

“导入”的工作方式和你预期的一样。你可以导入一个 .less 文件,此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名,则可以将扩展名省略掉。

现在就不要问为什么要使用导入文件的方式了,问就是方便!就是真香!方便面:真香???

语法
@import filename; //less可省略
@import "filename.css";

混合Mixins

混合(Mixin)是一种将一组属性从一个规则集包含(或混入)到另一个规则集的方法

示例
.important-text {
  color: red;
  font-size: 24px;
  font-weight: bold;
}

咋一看,这不就是一个普通的class样式吗

使用混合
.text {
  .important-text();
}

less的使用混合,那是相当的随意,非常好用!

映射Maps

从 Less 3.5 版本开始,你还可以将混合(mixins)和规则集(rulesets)作为一组值的映射(map)使用。

比如在做一个主题色的时候,就可以很好的选择Less的映射。

示例
// less
#colors() {
  primary: blue;
  secondary: green;
}

.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}

// css
.button {
  color: blue;
  border: 1px solid green;
}

写在最后的话

写了Sass之后写了less,发现了很多共通的,也有许多差一点,感觉知识又浏览了一遍。使用Less呢,如果你的应用需要使用多种主题,可以考虑使用less。

感谢

万能的网络

以及勤劳的自己,个人博客,GitHub测试,GitHub

公众号-归子莫,小程序-小归博客


程序员灯塔
转载请注明原文链接:【Less】给 CSS 加点料
喜欢 (0)