Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Less_css_介绍.pdf
Search
sokamal
July 14, 2013
Programming
1
67
Less_css_介绍.pdf
sokamal
July 14, 2013
Tweet
Share
More Decks by sokamal
See All by sokamal
RETINA时代的前端优化
ikamal
2
180
亚马逊的快速菜单
ikamal
1
110
jQuery最佳实践
ikamal
1
94
Other Decks in Programming
See All in Programming
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
7.3k
Goで作る、開発・CI環境
sin392
0
260
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
9
3.8k
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
270
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
660
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
2
21k
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
440
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
500
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
170
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
360
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
260
生成AI時代のコンポーネントライブラリの作り方
touyou
1
290
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Code Review Best Practice
trishagee
69
19k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Speed Design
sergeychernyshev
32
1k
Balancing Empowerment & Direction
lara
1
450
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
RailsConf 2023
tenderlove
30
1.1k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Code Reviewing Like a Champion
maltzj
524
40k
Visualization
eitanlees
146
16k
What's in a price? How to price your products and services
michaelherold
246
12k
Transcript
LESS CSS 介绍 ECD kamalyu
Index • 语法介绍 • 1.4.0 Beta 新特性 • 优缺点 •
怎样使用 • 其它
语法介绍-变量 LESS 编译后
语法介绍-混合 LESS 编译后
语法介绍-混合(带参数) LESS 编译后
语法介绍-混合(带参数) LESS 编译后 稍后阅读:@arguments 变量;高级参数用法与 @rest 变量;
语法介绍-继承 LESS 编译后 稍后阅读:& 的高级用法;@extend 继承用法(Beta);
语法介绍-运算 LESS 编译后
语法介绍-函数 LESS 提供了多种函数 用于控制颜色变化、处理字符串、算术运算等等。 稍后阅读:LESS内置函数;
语法介绍-作用域 LESS 编译后 与其它编程语言类似 先从本地模块中查找变量或者混合模块, 没找到的话就去父级作用域中查找,直到找到为止。
语法介绍-注释 LESS 编译后 /* CSS风格的注释解析后会保留 */ //双斜线的注释会自动过滤
语法介绍-禁止编译 LESS 编译后 需要输出不标准的CSS语法的时候 在字符串前加上一个 ~, 用“”把避免直接编译的值包裹起来, 用反斜杠 \ 转意引号
语法介绍-Importing 可以通过以下两种方式导入 LESS 文件 也可以导入CSS文件 @import-once 只导入一次,LESS 1.4.0 以上默认执行 @import-once
语法介绍-1.4.0 Beta import 解析后
LESS 优缺点 1. 变量,多处使用的内容取一个有意义的名字,不止是方便修改 2. 浏览器前缀不再是问题 3. 嵌套写法 LESS 的优点
LESS 的缺点 1. 重复定义,文件快速膨胀【1.4.0 会引入 @extend .mixins; 可以部分解决这个问题】 2. 维护,需要修改LESS文件,而不是编译后的CSS文件【组内统一思想】 3. 高耦合,谨慎修改基类【良好的编码习惯,模块化代码】 4. 嵌套,容易写出非常长的嵌套规则【良好的编码习惯】 5. 调试,默认编译后的CSS是压缩过的【配置IDE不压缩】
怎样使LESS 如果用的是 Intellij IDE : 1. 下载这个插件 LESS CSS Compiler;
2. File -> Settings -> Plugins -> Install plugin from disk; 3. FIle -> Settings -> LESS Profiles, 配置 LESS 文件路径和输出的 CSS 文件路径, 这 里可以选择是否压缩CSS文件。 其他编辑器请 Google 之。
延伸阅读 官网: http://www.lesscss.org 官网中文克隆: http://www.lesscss.net LESS on Github:https://github.com/less 使用后的思考: the
problem with css pre processors my thoughts on less
Thanks ECD kamalyu