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. 十、设计模式之代理(Proxy)模式

    什么是代理模式 代理模式是对象的结构模式,为其他对象提供一种对象以控制对这个对象的访问. 代理模式的结构图如下:(源自大话设计模式)   Subject:定义了RealSubject和Proxy的公共 ...

  2. Tomcat 配置错误界面

    Tomcat发生错误时跳转到错误页面 注意 :5.0下操作需要删除掉注释语句,不然报错,原因未知 一.修改 tomcat 的配置文件 修改 tomcat 的配置文件,当页面发生错误时跳转到指定的页面, ...

  3. 简易的Master-Worker框架

    Master-Worker模式是一种使用多线程进行数据处理的结构,多个worker进程协作处理用户请求,master进程负责维护worker进程,并整合最终处理结果 主要参与者 Worker:用于实际 ...

  4. tensorflow报错

    libcublas.so.9.0: cannot open shared object file: No such file or directory 输入命令: sudo ldconfig/usr/ ...

  5. JAXB中的@XmlRootElement注解详解

    @Retention(value=RUNTIME) @Target(value=TYPE) public @interface XmlRootElement @Inherited @Retention ...

  6. java中的成员变量、类变量,成员方法、类方法 属性和方法区别

    成员变量:包括实例变量和类变量,用static修饰的是类变量,不用static修饰的是实例变量,所有类的成员变量可以通过this来引用. 类变量:静态域,静态字段,或叫静态变量,它属于该类所有实例共有 ...

  7. Code First 延迟装入特性

    使用ORM框架,基本上都会添加“延迟装入”的特性支持,当使用Entity Framwork 的objectContext与DbContext操作数据时,默认都使用“延迟装入”,也就是当我们在应用程序里 ...

  8. TIM4定时器功能设置

    一.初始化过程 /*********************************************************************** 利用TIM4定时器作为计时,每个0.1 ...

  9. JS基础入门篇(三十六)—面向对象( 三 )

    1.class class es6 中 为 关键字用来声明 一个 类 1.只能通过new调用 2.不存在变量提升 3.多个方法之间直接书写,不需要,隔开 4.类的方法是直接定义在类的原型上的 5.定义 ...

  10. struts2 paramsPrepareParamsStack拦截器简化代码(源码分析)

    目录 一.在讲 paramsPrepareParamsStack 之前,先看一个增删改查的例子. 1. Dao.java准备数据和提供增删改查 2. Employee.java 为model 3. E ...