`

LESS学习笔记

    博客分类:
  • css
 
阅读更多
LESS CSS是什么?
    一种动态样式语言,属于CSS预处理语言的一种。
LESS 原理
    LESS 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器(如koala),编译生成对应的 CSS 文件。在现有 CSS 语法的基础上,为 CSS 加入程序式语言的特性。

1.自定义变量,变量可以在全局样式中使用,变量使得样式修改起来更加简单。
@变量名:值

@border-color : #b5bcc7; 
.div{border : 1px solid @border-color;}

.div{border: 1px solid #b5bcc7;}

    适用于定义主题,我们可以将背景颜色、字体颜色、边框属性等常规样式进行统一定义,这样不同的主题只需要定义不同的变量文件就可以了。当然该特性也同样适用于 CSS RESET(重置样式表)

2.Mixins(混入),指在一个 CLASS 中引入另外一个已经定义的 CLASS,就像在当前 CLASS 中增加一个属性一样。
Parametric Mixins(混入参数)
// 定义一个样式选择器:不带默认值
.border_01(@border_width){
	border:solid yellow @border_width;
}
//在另外的样式选择器中使用一定要传参数
.test_mix01{
	.border_01(10px);//.test_mix01{solid yellow 10px;}
}
// 定义另一个样式选择器:带默认值
.border_02(@border_width:10px){
	border:solid green @border_width;
}
//在另外的样式选择器中使用其他值要传参数,使用默认值不需要传参数
.test_mix02{
	.border_02;//使用默认值.test_mix02{border:solid yellow 10px;}
	.border_02(20px);//使用其他值.test_mix02{border:solid yellow 20px;}
}


3.变量:@arguments Mixins 中一个很特别的参数,当 Mixins 引用这个参数时,该参数表示所有的变量,很多情况下这个参数可以省去很多代码。
.border_arg(@w:30px,@c:red,@blur:1px){
     border:@arguments;
} 
.test_arguments{
     .border_arg();
}

.test_arguments{30px #ff0000 1px;}

4.嵌套
     写法是 HTML 中的 DOM 结构相对应的,这样使我们的样式表书写更加简洁和更好的可读性。同时,嵌套规则使得对伪元素的操作更为方便。&代表他上一级选择器对应的伪类
    实例:考虑减少嵌套的层级,使得选择器匹配的时候提高效率。
<ul class="list">
	<li><a href="#">测试文字</a><span>2015-3-26</span></li>
	<li><a href="#">测试文字</a><span>2015-3-26</span></li>
	<li><a href="#">测试文字</a><span>2015-3-26</span></li>
</ul>

.list{
	width:600px;
	margin:30px auto;
	padding:0;
	list-style:none;

	li{
		height:30px;
		line-height:30px;
		background-color:pink;
		margin-bottom:5px;
	}
	a{
		float:left;
		&:hover{
			color:red;
		}
	}
	span{
		float:right;
	}
}

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

5.注释:
  /*会被编译的注释*/
   //不会被编译的注释

学习教程指引:→→
http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/
http://www.imooc.com/comment/102
分享到:
评论

相关推荐

    Less学习笔记

    **Less学习笔记** 在Web开发领域,Less是一种流行的CSS预处理器,它扩展了CSS语言,引入了许多编程特性,如变量、嵌套规则、运算符、函数等,使得CSS的编写更加简洁、模块化和可维护。这篇笔记将深入探讨Less的基本...

    前端学习笔记-less

    在前端开发领域,LESS(层叠样式表,Low-level Style Sheets)是一种预处理器,它扩展了CSS语言,增加了变量、嵌套规则、运算符...在阅读"前端学习笔记——less"时,应重点理解并实践这些概念,以充分利用LESS的优势。

    Linux学习笔记(强悍总结值得一看)_linux_linux学习笔记_

    这份"Linux学习笔记(强悍总结值得一看)"是Linux初学者的宝贵资源,也适合有经验的用户作为参考手册。以下是对笔记内容的详细概述: 1. **Linux常用命令**: Linux命令行是其强大的工具,掌握常用命令是Linux学习...

    css经典学习笔记.zip

    《CSS经典学习笔记》 CSS(Cascading Style Sheets)是网页设计中不可或缺的一部分,它负责定义网页内容的样式和布局。本学习笔记将深入探讨CSS的核心概念、选择器、盒模型、布局方式以及响应式设计等多个方面,...

    学习笔记.md

    ### JavaWeb 学习笔记知识点总结 #### Spring Boot 和 Spring MVC 的区别 1. **Spring MVC**: - **定位**:Spring MVC 是 Spring 框架中的一个重要组成部分,主要用于构建 Web 应用程序。 - **作用**:提供了一...

    超详细的linux学习笔记

    这份"超详细的Linux学习笔记"涵盖了Linux运维管理的多个重要方面,包括DNS(Domain Name System)、Samba、Apache、Sendmail以及常用的Linux命令。让我们逐一探讨这些知识点。 首先,DNS是互联网上的名称解析服务,...

    Debian linux学习笔记

    ### Debian Linux 学习笔记 #### 一、基本命令与目录结构 Debian Linux 是一个广泛使用的 Linux 发行版,其稳定性和安全性受到广大用户的认可。对于初学者来说,掌握 Debian Linux 的基本命令和目录结构至关重要。...

    HP-unix学习笔记

    本"HP-UNIX学习笔记"涵盖了系统维护过程中的基础知识,是初学者入门和经验丰富的系统管理员快速查阅的理想资源。 一、HP-UX操作系统概述 HP-UX是由惠普公司开发的、符合POSIX标准的Unix变体,它提供了高性能、稳定...

    C++学习笔记.docx

    C++学习笔记 本文档提供了C++语言的基础知识,包括输入输出、变量、数据类型、运算符、内存管理、指针、流程控制语句等。 输入输出 C++语言提供了多种输入输出方式,包括使用cin和cout对象。cin对象用于从标准...

    前端vue ,css ,js ,学习笔记,全部总结

    这份"前端vue ,css ,js ,学习笔记,全部总结"涵盖了这三个重要组成部分的精华内容,旨在为开发者提供一个全面的学习资源。 Vue.js是当前非常流行的前端框架,由尤雨溪创建,以其轻量级、易上手和高度可扩展性而...

    前端Bootstrap+Es6+vue学习笔记

    前端Bootstrap+Es6+vue学习笔记 Bootstrap 框架是一种基于 HTML/CSS/JS 的开源框架,由 Twitter 公司的两名技术工程师研发。其主要特点包括: 1. 跨设备跨浏览器:Bootstrap 支持多种设备和浏览器,可以在不同的...

    Linux学习笔记

    ### Linux学习笔记 #### 常用命令及命令选项注释 **1. `ls`:显示文件** - `-a`:查看所有文件,包括隐藏文件。 - `-l`:查看详细信息。 - `-h`:人性化显示。 - `-d`:查看目录属性。 示例: ```bash ls -d ...

    vue学习笔记1

    在“vue学习笔记1”中,我们主要探讨了在Vue环境中设置登录页面的过程,包括背景色设置、登录框样式、全局样式配置以及Less loader的安装和使用。 首先,Vue CLI是Vue项目的基础脚手架,它提供了一种快速初始化项目...

    linux学习笔记--很经典

    本篇“Linux学习笔记”详细介绍了Linux的基本目录结构及其各自的功能,这对于初学者理解Linux系统的核心概念非常重要。 #### 二、Linux目录结构解析 1. **/(根目录)** - 根目录是Linux文件系统的起点,所有的...

    Linux学习笔记总结

    "Linux学习笔记总结" Linux学习笔记总结是Linux学习的详细笔记,涵盖了Linux文件系统、文件操作、目录操作、文件内容显示命令、目录内容显示命令等多方面的知识点。 一、Linux文件系统 Linux文件系统中有两种路径...

    java学习笔记-Scokect.pdf

    Java学习笔记-Scoket.pdf Java学习笔记-Scoket.pdf是关于Java编程语言中Socket编程的学习笔记,涵盖了Socket编程的基础知识、Java中Socket的使用、Socket通信的原理及应用等方面的内容。 Socket编程的基础知识 在...

Global site tag (gtag.js) - Google Analytics