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
Cache Me If You Can
ryunen344
2
730
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
Testing Trophyは叫ばない
toms74209200
0
870
print("Hello, World")
eddie
2
530
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
120
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
220
AIでLINEスタンプを作ってみた
eycjur
1
230
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
440
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
170
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
300
Improving my own Ruby thereafter
sisshiki1969
1
160
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
iurysza
0
140
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
GraphQLとの向き合い方2022年版
quramy
49
14k
Thoughts on Productivity
jonyablonski
70
4.8k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Why Our Code Smells
bkeepers
PRO
339
57k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Become a Pro
speakerdeck
PRO
29
5.5k
Designing for humans not robots
tammielis
253
25k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
520
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
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