资讯专栏INFORMATION COLUMN

常见的CSS预处理器之Less初体验

desdik / 1595人阅读

摘要:预处理器的技术现在已经很成熟了,而且也出现了各种不同的预处理器语言,但是呢不可能一一列出,面面俱到,这篇文章呢,主要是介绍一下比较常见的预处理器语言之一之初体验。

CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。

简单来说,CSS预处理器用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,以供项目使用。
CSS预处理器的技术现在已经很成熟了,而且也出现了各种不同的 CSS 预处理器语言,但是呢不可能一一列出,面面俱到,这篇文章呢,主要是介绍一下比较常见的CSS预处理器语言之一之 Less初体验。

Less

Alexis Sellier与2009年设计
LESS的第一个版本是用Ruby编写的,在后来的版本中,它被JavaScript替代了。
Less是一门CSS预处理语言,扩充了 css语言,增加了诸如变量、混合(mixin)、函数等功能,让 css 更易于维护,方便制作主题。

关于Less的基本使用,我们需要从嵌套、混合、变量、函数以及引入这几个方面来一一认识。

1 Less的安装使用和编译:

引用Less,全局安装

npm install less -g

新建一个index.html文件和main.less,在index.html 中引入main.css,然后输入下面语句自动编译成main.css

lessc main.less main.css

2 Less 的基本语法

嵌套
在 css 中父子元素的写法通常如下:

.container {
    padding: 0;
}
.container .header {
    background-color: red;
}

通过Less 写法如下,父子嵌套关系一目了然。也就是下面的代码编译就成了上面的css语法。

.container {
    padding: 0;
    .header {
        background-color: red;
    }
}

伪类
伪类的写法,在 css 中写法如下:

#header :after {
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}

在less 引入可以用一个符号 & 代替主类 #header;&就代表了上一层的类名。

#header {
  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

变量
也就是说定义一个公共的变量不用多次重复编写相同的代码;比如将三个div的背景颜色改成蓝色,我们只需要如下所示:

@background:blue;

less就是js的写法来写css

使用@符号定义变量

@变量名 看成是一个字符串

变量可以作为样式属性值:background-color:@color;

也可以作为类名,我们需要把{ }包起来:如下代码.@classname 表示的就是 .main。

.@{classname}{
    background-color:@color;
}
@classname:main;
@color:red;

函数

使用 $ lessc func.less 进行转译 func.css 文件

.border-radius(@radius) {
  -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
          border-radius: @radius;
}
#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);
}

转化成了css如下:
#header {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.button {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

函数的参数允许设置默认值

.border-radius(@radius: 10px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}
#header{
    .border-radius();
}
.button{
    .border-radius();
}

编译css后的代码为:
#header {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.button {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

函数有多个参数时用分号隔开,调用时就是通过变量名称,而不是位置

.mixin(@radius:10px;@color:green;) {
 -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
  color:@color;
}
#header{
    .mixin(@color:green);
}
.button{
    .mixin(@color:green);
}

编译成css为:
#header{
    -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
      color:green;
}
.button{
    -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
      color:green;
}

Less 内置函数(自己本身存在的函数)
1 escape
2 percentage(百分比)

.mixin(@radius:10px;@color:green;) {
 -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
  color:@color;
  width:percentage(.5);
}
#header{
 .mixin(@color:green);
}
.button{
 .mixin(@color:green);
}
     编译成css为:
     #header{
  -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    color:green;
    width:50%;
     }
     .button{
  -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    color:green;
    width:50%;
     }

3 convert(单位的转换)

抽取公共类,例如下面的css代码可以用less这样编写

在css中的代码:
#header a {
    color: #111;
    border-top: solid 1px #595959;
    border-bottom: solid 2px #595959;
}
#header span {
    height: 16px;
    border-top: solid 1px #595959;
    border-bottom: solid 2px #595959;
}
#header p {
    color: red;
    border-top: solid 1px #595959;
    border-bottom: solid 2px #595959;
}
.borde_style {
    border-top: solid 1px #595959;
    border-bottom: solid 2px #595959;
}

在less中我们可以定义一个公共的样式名border-style,然后编译出来的css就是上面的css代码:
.borde_style {
    border-top: solid 1px #595959;
    border-bottom: solid 2px #595959;
}
#header a {
    color: #111;
    .borde_style;
}
#header span {
    height: 16px;
    .borde_style;
}
#header p {
    color: red;
    .borde_style();
}

3 Less的引入

比如新建一个one.less,@import ‘./main.less ’ ;然后编译一下,我们会发现编译出来的。one.css里面就包含了main.less里面的样式内容。

4 Less的优势与劣势

优点

开发速度提升

代码优化效率提高(对开发者而言)

代码更通俗易懂(对开发者而言)

代码更干净,优美

维护简单便捷

功能更多更强

缺点

功能上比Sass弱,比如对象、循环和判断

生态环境略逊于Sass(2006)

需要多一个编译器来重新编译一次CSS代码,也就是给浏览器多了一道工序,网页显示的速度会减慢

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/114834.html

相关文章

  • CSS 处理器之目录

    sass入门总结less之常用语法总结IDEA自动编译less文件输出css

    jackwang 评论0 收藏0
  • less入门体验

    摘要:有众多的预处理器,其中比较流行的三个是,本文就一起来体验编写代码官方文档官网栗子编译成文件编译客户端浏览器通过在源代码中引入文件,用于实时对样式表文件进行编译并不推荐注意你的样式文件一定要在引入前先引入,并且需要 css有众多的预处理器,其中比较流行的三个是less、sass、stylus,本文就一起来体验less编写css代码官方文档:http://lesscss.org/官网栗子:...

    chinafgj 评论0 收藏0
  • sass入门体验

    摘要:接上文入门初体验,接下来讲讲,有两种文件后缀名,一种是,另一种是。 接上文less入门初体验,接下来讲讲sass,sass有两种文件后缀名,一种是.sass,另一种是.scss。前者类似于ruby的语法规则,没有花括号,没有分号,具有严格的缩进;而后者更贴近于css的语法规则,易于阅读,更具语义性,所以本文采用.scss后缀名来编写sass代码 编译 1、Ruby:sass是由Rub...

    aisuhua 评论0 收藏0
  • CSS选择器——伪元素选择器之处理父元素高度及外边距溢出

    摘要:子元素浮动导致父元素高度不够问题描述最小高度为的父元素,嵌套一个高度的子元素,当子元素浮动时,父元素高度并不随之升高。 1. 子元素浮动导致父元素高度不够 问题描述:最小高度为100px的父元素,嵌套一个300px高度的子元素,当子元素浮动时,父元素高度并不随之升高。问题视图:showImg(https://segmentfault.com/img/bVboBW8?w=352&h=22...

    Jason_Geng 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<