资讯专栏INFORMATION COLUMN

less入门初体验

chinafgj / 1912人阅读

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

css有众多的预处理器,其中比较流行的三个是lesssassstylus,本文就一起来体验less编写css代码
官方文档:http://lesscss.org/
官网栗子:

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
    -webkit-box-shadow: @style @c;
    box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
    .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
    color: saturate(@base, 5%);
    border-color: lighten(@base, 30%);
    div { .box-shadow(0 0 5px, 30%) }
}

编译成css文件:

.box {
    color: #fe33ac;
    border-color: #fdcdea;
}
.box div {
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
编译

1、客户端(浏览器)
通过在源代码中引入less.js文件,用于实时对.less样式表文件进行编译(并不推荐)
注意:你的less样式文件一定要在引入less.js前先引入,并且需要设置rel属性值为stylesheet/less


2、NodeJs
需要在全局安装less模块,然后借助lessc命令把less文件编译成css文件

sudo npm install -g less
lessc style.less style.css

3、Koala
推荐的是国人自主开发的实时编译软件Koala,不仅支持多种css预处理器,而且也可以跨平台运行,从而帮助web开发者更高效地进行开发

变量

变量是个好东西,允许我们多带带定义一系列通用的样式,然后在需要的时候去调用,了解css中如何定义变量可查看张大神的小tips:了解CSS/CSS3原生变量var

@color: #999;
body {
    background-color: @color;
}
h2 {
    color: @color;
}

编译后:

body {
    background-color: #999;
}
h2 {
    color: #999;
}
Mixin(混合)

将一个定义好的class A轻松的引入到另一个class B中,从而简单实现class B继承class A中的所有样式

.br (@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}
#logo {
    .br;
}
#avatar {
    .br(50%);
}

编译后:

#logo {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
#avatar {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
嵌套

在一个选择器中嵌套另一个选择器来实现继承,从而减少代码量

ul{
    background-color: #666;
    padding: 10px;
    list-style: none;

    li{
        background-color: #fff;
        border-radius: 5px;
        margin: 10px 0;
    }
    a{
        text-decoration:none;
        &:hover{
            color:red;
        }
    }
}

编译后:

ul {
    background-color: #666;
    padding: 10px;
    list-style: none;
}
ul li {
    background-color: #fff;
    border-radius: 5px;
    margin: 10px 0;
}
ul a {
    text-decoration: none;
}
ul a:hover {
    color: red;
}
运算

我们可以在less中进行加减乘除运算

@bdw: 5px;
@bgc: #333;
@tc: #030405;
body{
    border-width: @bdw + 10;
    background-color: @bgc * 2;
    color: @tc + #336699;
}

编译后:

body {
    border-width: 15px;
    background-color: #666666;
    color: #366a9e;
}
函数

less提供了一系列的颜色运算函数

@c1: #369;
@c2: #963;
.test1{
    background-color:lighten(@c1,10%);
    color:darken(@c1,10%);
}
.test2{
    background-color:saturate(@c1,10%);
    color:desaturate(@c1,10%);
}
.test2{
    background-color:fadein(@c1,10%);
    color:fadeout(@c1,10%);
    border-color:fade(@c1,50%);
}
.test4{
    background-color:spin(@c1,10);
    color:spin(@c1,-10);
    border-color:mix(@c1,@c2);
}

编译后:

.test1 {
    background-color: #407fbf;
    color: #264c73;
}
.test2 {
    background-color: #2966a3;
    color: #3d668f;
}
.test2 {
    background-color: #336699;
    color: rgba(51, 102, 153, 0.9);
    border-color: rgba(51, 102, 153, 0.5);
}
.test4 {
    background-color: #335599;
    color: #337799;
    border-color: #666666;
}
注释
注意:两种注释的区别
/* Hello Less(我依然在这里) */
.comment-show { color: black }
// Hello Less(你看不到我了)
.comment-hide { color: white }

编译后:

/* Hello Less(我依然在这里) */
.comment-show {
    color: black;
}
.comment-hide {
    color: white;
}

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

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

相关文章

  • sass入门体验

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

    aisuhua 评论0 收藏0
  • 常见的CSS预处理器之Less体验

    摘要:预处理器的技术现在已经很成熟了,而且也出现了各种不同的预处理器语言,但是呢不可能一一列出,面面俱到,这篇文章呢,主要是介绍一下比较常见的预处理器语言之一之初体验。 CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。 简单来说,CSS预处理器用一种专门的编程语言,进行We...

    desdik 评论0 收藏0
  • stylelint体验

    摘要:当初在用的时候用过来检查语法。现在用替代,而插件市场上那款插件目前不支持配置文件,有些不爽,于是研究了下其它相关插件。就在这个期间发现,粗粗看了看,甚合我意。所有配置项配置项说明配置项说明提示请使用花括号来包围声明。 当初在用sublime的时候用过csslint来检查css语法。现在用vscode替代sublime,而vscode插件市场上那款csslint插件目前不支持配置文件,有...

    SQC 评论0 收藏0

发表评论

0条评论

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