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
Deep Dive into ~/.claude/projects
hiragram
14
2.6k
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
250
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
110
XP, Testing and ninja testing
m_seki
3
250
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
10
5.3k
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
880
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
10k
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
260
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
490
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
450
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Fireside Chat
paigeccino
37
3.5k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
Thoughts on Productivity
jonyablonski
69
4.7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
Speed Design
sergeychernyshev
32
1k
KATA
mclloyd
30
14k
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