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
アセットのコンパイルについて
ojun9
0
130
はじめてのMaterial3 Expressive
ym223
2
900
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
570
AWS発のAIエディタKiroを使ってみた
iriikeita
1
190
The Past, Present, and Future of Enterprise Java with ASF in the Middle
ivargrimstad
0
180
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
610
Namespace and Its Future
tagomoris
6
710
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
24
12k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
420
Swift Updates - Learn Languages 2025
koher
2
510
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
480
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
3k
Building an army of robots
kneath
306
46k
GraphQLとの向き合い方2022年版
quramy
49
14k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
GitHub's CSS Performance
jonrohan
1032
460k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
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