less---处理器:koala_2.0.4_portable

属于css预处理语言,可以让你的css语言更有逻辑性!

编译css的!

准备工作:
    1.项目:
        js
        css
        img
        less
    2.less:
        a1.less

3.把项目拖到编译软件里
        点击绿色按钮:在css文件夹里会编译出一个a1.css

4.开始写页面

1.新建index.html
        2.在index.HTML里面引入编译出来的a1.css
        3.在index.HTML里面写标签,在a1.less里面写样式!

4.在a1.less里面写less方法的样式
---------------------------------------------------

less方法:

1.样式值变量!

变量:名字

例子:
@w:300px;
@b:3px;
@back:#000;
@da:dashed;

div{width:@w; height:100px; border:@b @da @back;}
p{width:@w;height:200px; background:@back;border:@b solid red;}

2.运算!

例子:
@w:300px;
@b:3px;
@back:#000;
@da:dashed;

.box1{width:@w+300px; height:100px-50px; border:@b @da @back;}
p{width:@w;height:200px+@w; background:@back;border:@b solid red;}
.box2{width:@w/3; height:100px*5; border:@b @da @back;}

3.嵌套:
    最好嵌套4层!
html:
<div class="box">
    <div class="t-box">
        <ul>
            <li>
                <div class="box1">
                    <p>
                        <a href></a>
                    </p>
                </div>
            </li>
        </ul>
    </div>
</div>

less:
.box{
    width:100px;
    t-box{
        width:100px;
        ul{
            height:100px;
            li{
                width:100px;

}
        }
    }
}

.box ul li{
    .box1{
        width:300px;
        p{
            width:200px;
            a{
                font-szie:100px;
            }
        }
    }
}

4.伪类:

css:
a{color:red}
a:hover{color:blue};

less:
a{
    color:red;
    &:hover{
        color:green;
    }
}

----------------------------
css:
.clearfix:after{display:block; content:'';clear:both}
.clearfix{zoom:1};

less:
.clearfix{
    zoom:1;
    &:after{
        display:block;
        content:'';
        clear:both;
    }
}

====================================================
5.定义一个选择器

例子:
.text{----定义一个class选择器
    line-height:100px;
    text-align:center;
}

div{
    width:100px;
    height:100px;
    border:2px solid red;
    .text;---调用上面的选择器
}
p{
    width:100px;
    height:100px;
    border:2px solid blue;
    .text;---调用上面的选择器
}
---------------------------------------------
6.定义选择器加传参:
例子:
.text(@num){
    line-height:@num;
    text-align:center;
}

div{
    width:100px;
    height:100px;
    border:2px solid red;
    .text(100px);
}
p{
    width:100px;
    height:200px;
    border:2px solid blue;
    .text(200px);
}

------------------------------------------
7.有默认值的传参!

.text(@num:100px){
    line-height:@num;
    text-align:center;
}

.box1{
    width:100px;
    height:100px;
    border:2px solid red;
    .text();
}
.box2{
    width:100px;
    height:100px;
    border:2px solid red;
    .text();
}
.box3{
    width:100px;
    height:100px;
    border:2px solid red;
    .text();
}
.box4{
    width:100px;
    height:400px;
    border:2px solid red;
    .text(400px);
}
p{
    width:100px;
    height:200px;
    border:2px solid blue;
    .text(200px);
}

8.多个传参

前端学习(七)less(笔记)的更多相关文章

  1. web前端学习之旅笔记01--HTML

    web前端学习之旅笔记01--HTML HTML最容易上手,但也易忘,实际开发中有时需要查阅官方文档,小伙伴们别忘了哟! HTML 教程 (w3school.com.cn) HTML是网页的骨架负责页 ...

  2. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  3. 前端学习:学习笔记(HTML部分)

    前端学习:学习笔记(HTML部分) HTML学习总结(图解) HTML简介 1.HTML是什么? 超文本标记语言 超文本:文字/图片/音频/视频.... 标记/标签 2.HTML的用途? 是用来编写静 ...

  4. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  5. 【前端】Web前端学习笔记【2】

    [2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...

  6. 前端学习 第七弹: Javascript实现图片的延迟加载

    前端学习 第七弹: Javascript实现图片的延迟加载 为了实现图片进入视野范围才开始加载首先: <img    src="" x-src="/acsascas ...

  7. 【前端】Web前端学习笔记【1】

    ... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...

  8. Web前端学习笔记(001)

    ....编号    ........类别    ............条目  ................明细....................时间 一.Web前端学习笔记         ...

  9. web前端学习笔记

    web前端学习笔记(CSS盒子的定位) 相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准 ...

随机推荐

  1. Java compiler level does not match the version of the installed Java project facet错误

    出现问题情景:从其他地方导入一个项目的时候报错:Java compiler level does not match the version of the installed Java project ...

  2. 利用Kubernetes(K8S)部署JAVA项目

    一.jar包和war包区别 首先简单介绍一下jar包和war包区别,当时就没分清,导致部署总是傻傻分不清楚. jar包:jar包就是java的类进行编译生成的class文件就行打包的压缩包.里面是一些 ...

  3. Chocolatey Window系统下的软件管理工具

    前言: 使用linux都喜欢使用yum ;apt-get来安装包,非常方便,那么windows也可以使用这样的方式. Chocolatey软件是Windows下的软件安装工具: 使用方法类似linux ...

  4. ivew-admin 点击预览图片

    1. ivew-admin table { title: '产品图片', key: 'avatar1', align: 'center', render: (h, params) => { re ...

  5. Foobar 2000增加APE播放支持的方法

    这里说明一下APE,它是一种常用的无损音乐的存储格式,通常会有将原始音乐光盘数字化后存储的APE文件搭配一个CUE文件使用.这个APE存储了音乐的原始数据,而CUE文件则是一个索引文件,用来标记音乐光 ...

  6. Android 编译笔记20191205

    gradle下载很慢 解决问题的方法如下: 使用文件管理器 打开用户主目录 windows平台: c:\Users\用户名\.gradle macos平台: /Users/用户名/.gradle li ...

  7. BZOJ5205 [CodePlus 2018 3 月赛]白金元首与莫斯科

    传送门 emm在雅礼集训的时候听到的一道题 上来就觉得是插头dp 最后果然是轮廓线状压233 我们简化一下题意. 有一个n*m的网格,每个格子是空地或障碍物,询问把每一个空地看成障碍物的情况下,用1* ...

  8. RFCN理解,不完整待补全

    RFCN的核心是通过修改roi pooling的位置,来增加共享参数的层,减少运算时间: roi pooling位置的影响如下: 越靠近 Input - 对应 ROI-Wise 检测子网越深,准确度也 ...

  9. List Comprehension ()(二)

    在list comprehension中加入if条件判断: >>> lines = [line.rstrip() for line in open('script2.py') if ...

  10. Ubuntu如何安装谷歌Chrome浏览器

    这里提供一个Ubuntu安装谷歌浏览器的简单方法. 1. 下载谷歌浏览器安装包 wget https://dl.google.com/linux/direct/google-chrome-stable ...