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
93
Other Decks in Programming
See All in Programming
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
590
AIともっと楽するE2Eテスト
myohei
6
2.6k
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
5.8k
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
480
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
900
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
190
Is Xcode slowly dying out in 2025?
uetyo
1
270
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
450
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
130
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
120
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
How GitHub (no longer) Works
holman
314
140k
Site-Speed That Sticks
csswizardry
10
690
The Language of Interfaces
destraynor
158
25k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
A designer walks into a library…
pauljervisheath
207
24k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Raft: Consensus for Rubyists
vanstee
140
7k
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