为了账号安全,请及时绑定邮箱和手机立即绑定

Less即学即用学习总结

标签:
Sass/Less
1、Sublime Text3安装less

使用DreamWeaver可以直接创建less文件进行编辑,考虑到软件的启动速度和简洁性,此处用sublime进行less文件的文本编辑。为了使得less文件有语法高亮的美观效果,并能够顺利编译成CSS文件,首先需要从sublime上安装less和less2css包。

使用快捷键ctrl-shift-p,打开package control,选中install package,分别搜索less和less2css,按回车安装这两个包。

2、less文件与编译

所有less文件的后缀名是*.less,创建此文件后,用sublime打开,在首行进行声明:@charset "utf-8";这样整个less文件就构造好了。

然而less文件并不能直接参与到HTML文档中进行样式操作的,需要通过编译成CSS,然后由link标签引入样式表到HTML文档中去,这里主要下载koala客户端,将less文件夹添加到客户端里,点击编译,出现“success”即为编译成功。
图片描述

3、变量、注释和运算

在less文件中,当一个值需要反复使用时,可以通过@符号定义变量。已经被赋值的变量以及其他的常量(如像素、颜色等)都可以参与运算。在less中和大多数编程语言一样,可以使用“//”作为注释,注释的内容不会被编译到CSS文件中去。如以下less代码:

@charset "utf-8";

/*CSS的注释编译时会保留*/
@box_width:300px; //定义并初始化变量
.box{
    width: @box_width + 100; //使用变量,并进行运算
    height: @box_width - 2*50; //注意变量和数字之间要留空格,否则编译不通过
    background: yellow;
}

编译后的CSS代码如下:

@charset "utf-8";
/*CSS的注释编译时会保留*/
.box {
  width: 400px;
  height: 200px;
  background: yellow;
}
4、混合与嵌套

如下less代码,box3的样式里面引用了box的所有样式,并且额外的还设置了左外边距为100px。混合就是把一个样式的选择器作为值写在另一个样式里。

.box3{ //引用box的全部样式并且使得左边距为100px
    .box;
    margin-left: 100px;
}

编译后的CSS代码如下:

.box3 {
  width: 400px;
  height: 200px;
  background: yellow;
  margin-left: 100px;
}

除了这种最简单的混合外,less还支持带参数的混合以及有默认参数值的混合。如下面的例子所示:

//带参数的混合
.border_width1(@b_width){
    border: solid blue @b_width;
}

.test_mix1{
    .border_width1(5px);
}

//参数有默认值的混合
.border_radius(@radius:5px){
    border-radius: @radius;
    -webkit-border-radius:@radius;
    -moz-border-radius:@radius;
}

.test_radius{
    .border_radius();  //此处即为默认值,若要修改默认值也可在此处进行修改
    width: 100px;
    height: 20px;
    background: pink;
}

编译后的CSS文件如下:

.test_mix1 {
  border: solid #0000ff 5px;
}
.test_radius {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  width: 100px;
  height: 20px;
  background: pink;
}

有的时候,需要一次性将所有的参数全部传进去,此时使用@arguments可以更加方便。

//@arguments代表传进所有的参数
.border_arg(@c:red,@w:3px,@x:solid){
    border:@arguments; 
}

.test_arg{
    .border_arg(40px);  //查看CSS文件的变化,默认值传进来了,线粗改为40px
}

css文档编译后如下:

.test_arg {
  border: 40px 3px solid;
}

在HTML文档中,标签之间经常会有嵌套的情况存在,在less中也可以进行嵌套。有下列HTML标签:

<ul class="list">
        <li><a href="#">这是一个测试文字</a><span>2014-10-10</span></li>
        <li><a href="#">这是一个测试文字</a><span>2014-10-10</span></li>
        <li><a href="#">这是一个测试文字</a><span>2014-10-10</span></li>
        <li><a href="#">这是一个测试文字</a><span>2014-10-10</span></li>
        <li><a href="#">这是一个测试文字</a><span>2014-10-10</span></li>
        <li><a href="#">这是一个测试文字</a><span>2014-10-10</span></li>
    </ul>

使用less为其添加样式,可以使用嵌套。

//嵌套
.list{
    width: 600px;
    margin: 30px auto;
    padding: 0;
    list-style: none;
    li{  //嵌套在list下的li
        height: 30px;
        line-height: 30px;
        background: pink;
        margin-bottom: 3px;
        padding: 0 10px;
    }
    a{  //也可以嵌套在li里面,但是嵌套层次太多影响CSS的效率
        float: left;
        //&代表上一层选择器
        &:hover{
            color: red;
        }
    }
    span{
        float: right;
    }
}

编译后的CSS如下所示:

.list {
  width: 600px;
  margin: 30px auto;
  padding: 0;
  list-style: none;
}
.list li {
  height: 30px;
  line-height: 30px;
  background: pink;
  margin-bottom: 3px;
  padding: 0 10px;
}
.list a {
  float: left;
}
.list a:hover {
  color: red;
}
.list span {
  float: right;
}

两者相比较而言,less的确省去了很多的代码量。

5、匹配模式

在开发前端页面的过程中,经常会有样式相近重复率高的情况出现。比如编写一个三角箭头小图标,颜色、大小、箭头朝向在不同的地方各不相同。如果一个一个地去写样式就非常麻烦。less中的匹配模式,就可以统一模板,在需要的时候,根据情况调用即可。

//匹配模式:三角形小图标的例子
.triangle(top,@width:5px,@color:white){  //匹配三角形朝上的情况
    border-color:transparent transparent @color transparent;
    border-width: @width;
}

.triangle(bottom,@width:5px,@color:white){  //匹配三角形朝下的情况
    border-color:@color transparent transparent transparent;
    border-width: @width;
}

.triangle(left,@width:5px,@color:white){  //匹配三角形朝左的情况
    border-color:transparent @color transparent transparent;
    border-width: @width;
}

.triangle(right,@width:5px,@color:white){  //匹配三角形朝右的情况
    border-color:transparent transparent transparent @color;
    border-width: @width;
}

.triangle(@_,@width:5px,@color:white){  //无论什么情况都要执行的代码,第一个参数是固定的格式
    width: 0;
    height: 0;
    overflow: hidden;
    border-style:solid;
}

.sanjiao{
    .triangle(left,10px,black);  
}

上面的less中通过3个参数,将颜色、线条和朝向都构造成了相应的匹配模式,最后调用了黑色、线条为10px、朝左的箭头。css样式表中如下:

.sanjiao {
  border-color: transparent #000000 transparent transparent;
  border-width: 10px;
  width: 0;
  height: 0;
  overflow: hidden;
  border-style: solid;
}
6、避免编译

有些情况下,我们不需要less中的某些内容被自动编译,而是保留下来原样放到CSS中,此时可以使用~‘ ’

//避免编译
.test_avoid{
    width: ~'(300px-100px)';
}

css中的代码如下:

.test_avoid {
  width: (300px-100px);
}

上述就是less中的基本内容,总之less可以极大的减少css代码的编写量,易学易用,可以像编程一样对HTML中标签进行样式设计。

注:文章根据本站相关课程的学习笔记整理而来,有错误或其他任何问题敬请指正,欢迎共同学习交流!

点击查看更多内容
16人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
软件工程师
手记
粉丝
36
获赞与收藏
349

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消