css预处理器less的分析
来源:互联网 发布:htpc 用什么软件 编辑:程序博客网 时间:2024/06/05 06:31
一.了解下less
一种 动态 样式 语言.
LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承,运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js或者Rhino在服务端运行。
二.使用
(一).使用方法 html中引用
(二)less语法:.less文件中编辑
1.变量
变量允许我们单独定义一系列通用的样式,然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。
也可以这样:background-color:@color;
2.混合
a.类
在 LESS 中我们可以定义一些通用的属性集为一个class,然后在另一个class中去调用这些属性. 下面有这样一个class:
b.带参数混合
混合可以将一个定义好的class A轻松的引入到另一个class B中,从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用,就像使用函数一样。
你也可以定义不带参数属性集合,如果你想隐藏这个属性集合,不让它暴露到CSS中去,但是你还想在其他的属性集合中引用,你会发现这个方法非常的好用:
3.@arguments 变量
@arguments包含了所有传递进来的参数. 如果你不想单独处理每一个参数的话就可以像这样写:
4.模式匹配和导引表达式
5.嵌套规则
LESS 可以让我们以嵌套的方式编写层叠样式. 让我们先看下下面这段 CSS:
注意 &
符号
如果你想写串联选择器,而不是写后代选择器,就可以用到&了. 这点对伪类尤其有用如 :hover 和 :focus.
6.运算
任何数字、颜色或者变量都可以参与运算. 来看一组例子:7.Color 函数
LESS 提供了一系列的颜色运算函数. 颜色会先被转化成 HSL 色彩空间, 然后在通道级别操作:8.Math 函数
LESS提供了一组方便的数学函数,你可以使用它们处理一些数字类型的值:9.命名空间
有时候,你可能为了更好组织CSS或者单纯是为了更好的封装,将一些变量或者混合模块打包起来, 你可以像下面这样在#bundle中定义一些属性集之后可以重复使用:10.作用域
LESS 中的作用域跟其他编程语言非常类似,首先会从本地查找变量或者混合模块,如果没找到的话会去父级作用域中查找,直到找到为止.11.注释:“//”或是“/**/”
12.Importing
13.避免编译
有时候我们需要输出一些不正确的CSS语法或者使用一些 LESS不认识的专有语法.
要输出这样的值我们可以在字符串前加上一个 ~, 例如:
三.优缺点
优点:用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。通俗的说,CSS预处理器用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,以供项目使用。CSS预处理器为CSS增加一些编程的特性,无需考虑浏览器的兼容性问题,例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性,可以让你的CSS更加简洁、适应性更强、可读性更佳,更易于代码的维护等诸多好处。
- css预处理器less的分析
- css预处理器--less
- CSS预处理器-Less
- CSS预处理器 Less & Sass
- 有关CSS预处理器的比较选择(Sass&Less&Stylus)
- CSS 的预处理程序--------------------Sass、LESS、Stylus
- css预处理器(less学习笔记)
- CSS预处理器SASS | LESS等简介
- CSS预处理器语言:Sass、LESS、Stylus
- sass less stylus css预处理器
- CSS预处理-LESS
- CSS预处理语言--Less
- CSS预处理语言 less (一) 初识less
- 详说css与预处理器(以及less、sass、stylus的区别)
- 三个 CSS 预处理器(框架):Sass、LESS 和 Stylus
- 编程语言NodeJSのLess CSS预处理器
- 三个 CSS 预处理器(框架):Sass、LESS 和 Stylus
- 十分钟入门CSS预处理器——Less
- linux的解压和压缩指令
- 冒泡排序
- 纯干货8 吴恩达新书《Machine_Learning_Yearning》_version_5.01分享
- 12C的PDB使用RMAN的4种完全恢复场景
- JAVA开发之 39-JAVA数组知识点(二)
- css预处理器less的分析
- vuejsLearn--- -- 怎么查看、修改、追加数据---->data对象
- 异形ROI的建立与使用
- C#中out和ref之间的区别
- Python-OpenCV 处理图像(一):基本操作 cv2
- UDEV实验文档
- 怎么让页面变灰实现代码
- Java面向对象_3
- 国企面试常见问题