less的学习与实践

最新推荐文章于 2021-06-10 22:15:31 发布

mqy1023

最新推荐文章于 2021-06-10 22:15:31 发布

阅读量1.8k

点赞数 1

分类专栏： Html&Css&Sass&Less 文章标签： less

本文链接：https://blog.csdn.net/mqy1023/article/details/51456344

版权

Html&Css&Sass&Less 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

《一》、Koala工具

1、下载地址：http://koala-app.com/index-zh.html
2、设置输出输出路径

《二》、语法详解

一、变量
1、使用@声明和使用变量
编译后
2、变量嵌套

@fnord: "I am fnord.";
@var: 'fnord';
content: @@var;
//解析后，content: "I am fnord.";

3、@arguments变量(传入的所有变量)

.border_style(@w:5px, @c:red, @ss:solid) {//设置参数默认值
   border: @arguments;
}
//调用
.border_style(40px);//==》border 40px red solid;

二、注释

/*编译后保留到css的注释*/
//编译后不保留在css的注释

三、混合
实质是调用 / 继承。混合可以带参数，并可以设置参数的默认值

//learn.less文件
@box_width : 200px;//定义变量
.box {
   //.border_style;/.border_style();不传参时使用默认值
   .border_style(20px);//相当于调用border_style样式
   width: @box_width;
   height: @box_width;
   background-color: yellow;
}
.border_style(@border_width:5px) {//设置参数默认值
   border: solid @border_width green;//实际用到css中的border样式
}

//编译后的learn.css
.box {
   border: solid 20px #008000;
   width: 200px;
   height: 200px;
   background-color: yellow;
}

四、匹配（相当于 if 判断）
1、匹配三角形
a、先来复习下css画出三角形样式

.triangle {
   width: 0;
   height: 0;
   border-width: 20px;
   /*上右下左*/
   border-color:  transparent red transparent transparent;
   border-style: solid;
}

b、用less匹配模式实现三角形上下左右角的工具块

//1、朝上三角样式
.triangle-less(top, @w:50px, @c:#ccc) {
    border-color:  transparent transparent @c transparent;
}
.triangle-less(bottom, @w:50px, @c:#ccc) {
    border-color:  @c transparent transparent transparent;
}
.triangle-less(left, @w:50px, @c:#ccc) {
    border-color:  transparent @c transparent transparent;
}
.triangle-less(right, @w:50px, @c:#ccc) {
    border-color:  transparent transparent transparent @c;
}
//@_ 匹配所有(上右下左)
.triangle-less(@_, @w:50px, @c:#ccc) {//传参保存一致，所以@w:50px和@c:#ccc也必须写上
    width: 0;
    height: 0;
    border-width: @w;
    border-style: solid;
}
//外部triangle样式调用.triangle-less
.triangle {
    .triangle-less(left, 100px, green);
}

2、匹配position工具块

//匹配模式— —定位
.pos-less(r) {
    position: relative;
}
.pos-less(a) {
    position: absolute;
}
.pos-less(f) {
    position: fixed;
}
.pos {
    width: @pos_width;
    height: @pos_width;
    .pos-less(a);//.pos-less(r); / .pos-less(f);
}

五、运算

@box_width : 200px;//定义变量
.box {
  width: (@box_width - 100) * 4;
  height: @box_width;
}

六、嵌套规则

/*css中*/
.list{}
.list li{}
.list a{}

//less的嵌套
.list{
    width: 600px;
    li {
        background-color: pink;
    }
    a { //&代表此层
        color: red;
        &:hover { //相当于.list a:hover { }
            color: yellow;
      }
    }
}

八、Guards

@media: mobile;
.mixin (@a) when (@media = mobile) { ... }
.mixin (@a) when (@media = desktop) { ... }

.max (@a, @b) when (@a > @b) { width: @a }
.max (@a, @b) when (@a < @b) { width: @b }

//几个检查基本类型的函数：iscolor,isnumber,isstring,iskeyword,isurl
//检查一个值（数字）使用了哪个单位：ispixel，ispercentage，isem
.mixin (@a, @b: 0) when (isnumber(@b)) { ... }
.mixin (@a, @b: black) when (iscolor(@b)) { ... }

九、其他
1、~’ xxxxx ’ ;避免编译。
如：width: ~’calc(200px - 120px)’; ==CSS=> width: calc(200px - 120px);
2、字符串插值
3、导入（Import）
在LESS中，你既可以导入CSS文件，也可以导入LESS文件。但只有导入的LESS文件才会被处理（编译），导入的CSS文件会保持原样。如果你希望导入一个CSS文件，保留.css后缀即可：@import "lib.css";

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");

《三》、简单项目实践

1、index.html

<article>
    <div class="module">
        <div class="module-top">
            <div class="module-top-left">
                <span class="bus-num">418</span>
                <p class="bus-time">首班车 5:40 末班车 23:00</p>
            </div>
            <div class="module-top-right">
                <p class="p-first">龙岗&emsp; — — &emsp;南山</p>
                <p>GangDing&emsp;&emsp;&emsp;AoTi</p>
                <p class="p-last">华强北</p>
            </div>
        </div>
        <div class="module-center">
            <span>龙岗中路</span>
            <span class="three">华强北</span>
            <span class="three">华强北</span>
            <span>深圳大学</span>
            <span class="three">北京路</span>
            <span>深圳大学</span>
            <span>深圳大学</span>
            <span>南山中路</span>
            <span>南山中路</span>
        </div>
        <div class="module-bottom">
            <p>单一票价&emsp;&emsp;无人售票&emsp;&emsp;主动投币&emsp;&emsp;不设找零</p>
            <span class="span-first"></span> <span class="span-last"></span>
        </div>
    </div>
</article>

2、bus.less

@article_width: 700px;
@article_height: 350px;
@main_bg_color: #C0C0C0; //公交牌主背景颜色
@bg_color: green;
@font_size: 14px; //默认字体大小
@font_family: "microsoft yahei"; //默认字体颜色
//函数等strat
//水平居中
.auto_center(@margin_tb:0) {
  margin: @margin_tb auto;
}

//字体设置
.font_style(@fc: #FFF, @fs: @font_size, @ff: @font_family) {
  color: @fc;
  font-size: @fs;
  font-family: @ff;
}

//浮动设置
.float_up(@fu:left) {
  float: @fu;
}

//display设置
.display_set(@d:inline-block) {
  display: @d;
}

.boredr_css(@w:1px, @c:red, @s:solid) {
  border: @arguments;
}

.padding_set(@t:20px; @r:0px; @b:0px; @l:0px) {
  padding: @arguments;
}

//1、朝右三角样式
.triangle-less(top, @w:10px, @c:red) {
  border-color: transparent transparent transparent @c;
}

//@_ 匹配所有(上右下左)
.triangle-less(@_, @w:10px, @c:red) { //传参保存一致，所以@w:50px和@c:#ccc也必须写上
  width: 0;
  height: 0;
  border-width: @w;
  border-style: solid;
}

//函数等end
///

.auto_center(@margin_tb:0px) {
  margin: @margin_tb auto;
}

article {
  width: @article_width;
  height: @article_height;
  .auto_center(50px);
  background-color: @main_bg_color;
}

.module-top-left {
  .float_up();
  width: @article_width/2;
  height: @article_width/5;
  .padding_set();
  .bus-num {
    .display_set();
    .padding_set(10px, 50px, 10px, 50px);
    background-color: red;
    .font_style(#FFF, @font_size*3);
  }
  .bus-time {
    text-indent: 1em;
    .font_style(#000);
  }
}

.module-top-right {
  text-align: center;
  height: @article_width/5;
  .padding_set();
  p {
    .font_style(@bg_color);
  }
  .p-first {
    .font_style(@bg_color, @font_size+4px);
  }
  .p-last {
    .font_style(red, @font_size+4px);
  }
}

.module-center {
  text-align: center;
  background-color: @bg_color;
  padding: 8px;
  span {
    .font_style(#FFF, @font_size);
    width: 1em;
    line-height: 1.5em;
    .display_set();
  }
  .three {
    line-height: 2.3em;
  }
}

.module-bottom {
  text-align: center;
  font-size: 0;
  p {
    .font_style(#000, @font_size);
  }
  span {
    .display_set();
  }
  .span-first {
    width: @article_width*2/3;
    height: 5px;
    background-color: red;
    margin-bottom: 8px;
  }
  .span-last {
    .triangle-less(top);
  }
}

代码下载：http://download.csdn.net/detail/mqy1023/9525486

参考：
1、《less即学即用》：http://www.imooc.com/learn/102
2、http://www.1024i.com/demo/less/document.html

mqy1023

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
less的学习与实践

《一》、Koala工具 1、下载地址：http://koala-app.com/index-zh.html 2、设置输出输出路径《二》、语法详解一、变量 1、使用@声明和使用变量编译后 2、变量嵌套@fnord: "I am fnord.";@var: 'fnord';content: @@var;//解析后，content: "I
复制链接

扫一扫