-
Notifications
You must be signed in to change notification settings - Fork 16
/
Copy pathless.language.txt
297 lines (258 loc) · 16.9 KB
/
less.language.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
┏━━━━━━━━━━┓
┃ LESS ┃
┗━━━━━━━━━━┛
ALTERNATIVES ==> #See PostCSS
VERSION ==> #Node binary (2.5.1)
DOC SYNTAX ==> # - SELECTOR: e.g. .myclass:hover
# - SELECTORS: SELECTOR,...
# - RULE: "PROP: VAL", e.g. color: red;
# - RULES: RULE...
# - arg means argument named $arg, but TYPE means argument of TYPE
# - FUNC()
# - #MIXIN(): MIXIN as opposed to FUNC()
# - ##MIXIN(): MIXIN with a { ... } block (CONTENT)
DIFFERENCE SASS/LESS ==> #Generally speaking: very similar. Less is more user-friendly, Sass has more power.
#Both (Sass === Less):
# - comments, nested rules, nested @rules, @import, &
# - @extend SELECTOR2 === SELECTOR:extend(SELECTOR2 all,...) { RULES }
# - %CLASS === SELECTOR()
# - $VAR: VAL === @VAR: VAL
# - @content === @VAR: { RULES }
# - @if|else === MIXIN when TEST
# - @mixin($VAR[: VAL][, $VAR2...]) === MIXIN(@VAR[: VAL][, @rest...])
# - @include MIXIN(VAL,...) === MIXIN(VAL;...)
# - @include MIXIN($KEY: VAL) === MIXIN(@VAR: VAL)
#Differences (Sass !== Less):
# - EXPR|$VAR use types and more operators !== EXPR|$VAR is macro and only + / * -
# - Blocks cannot access each other !== blocks can access each other
#Only Less:
# - PROP+: VAL
# - variable hoisting
# - MIXIN overloading
#Only Sass:
# - PROP { PROP2: VAL }
# - @at-root
# - @for|each|while (Less uses recursion)
# - user FUNC()
┌───────────┐
│ BASIC │
└───────────┘
lessc FILE... [FILE2] #Compiles Less to CSS to FILE2 (def: stdout)
#FILE can be - (stdin)
--compress #Also minifies
--cleancss="..." ##Better minification, with CleanCSS. "..." are args, i.e. "--VAR --VAR2"
##Node binary less-plugin-clean-css (1.5.0)
##As Node module, must use OBJ.plugins [ new LESS-PLUGIN-CLEAN-CSS(OBJ2) ]
--source-map[=FILE] #
--source-map-url[=URL] #
--source-map-less-inline #
--source-map-map-inline #
--source-map-rootpath=DIR #
--source-map-basepath=DIR #
--lint #Only does the linting
--silent|verbose #
--no-color #
--depends #Outputs dependencies as Makefile
--no-ie-compat #
--no-js #
LESS.render
("CSS"[, OBJ], FUNC(ERROR,STR)) #As a Node module.
link( #Usage in the browser.
rel="stylesheet/less" #Each <link> is compiled independently from the others.
type="text/css" #Pass options by:
href="URL" # - assigning var less = OBJ;
) # - <link|script> HTML attribute data-VAR="VAL" (VAR dasherized, VAL JSON'd)
#Less library must be after <link> and options OBJ:
# - env "development|production": if "production", CSS cached in localStorage, no debug
# console
# - [file]async BOOL (def: false): download async [when file://]
# - useFileCache BOOL (def: true)
# - errorReporting "hmtl|console|function" (def: "html")
# - logLevel 0-2 (def: 2, i.e. verbose)
# - functions.FUNC(...): allows using FUNC(...) in Less
# - relativeUrls BOOL, globalVars|modifyVars OBJ, rootpath DIR: see above
#Can also:
# - Watch mode: add #!watch to URL, or call less.watch(), after setting option OBJ.env
# "development". Can modify OBJ.poll NUM (def: 1000)
# - modify @VAR runtime with less.modifyVars({ "@VAR": "VAL" })
PLUGIN ==> #Extend Less:
# - command line: --plugin=PLUGIN[="OPT"]
# - Node|Browser: OBJ.plugins [ PLUGIN... ]
grunt-contrib-less #Grunt plugin (1.0.0)
# - TASK "less"
# - TARGET src, dest
# - options:
# - same as Node module
# - customFunctions.FUNC(...): to use FUNC(...) in Less
# - banner STR
GULP-LESS(OBJ) #Gulp plugin (3.0.3)
#Must use GULP-SOURCEMAPS for sourcemaps.
#For minification, must use GULP-MINIFY-CSS, or OBJ.plugins
ONLINE ==> #less2css.org
┌────────────┐
│ SYNTAX │
└────────────┘
// COMMENT #Not kept
/* COMMENT */ #Kept
SELECTORS { # SELECTORS { RULES }
RULES # SELECTORS SELECTORS2 { RULES2 }
SELECTORS2 { RULES2 } #If a SELECTOR2 contains &, & is replaced with SELECTORS and uses instead:
} # SELECTORS { RULES }
# SELECTORS2 { RULES2 }
[@media MEDIAQUERY... {
RULES1]
SELECTORS {
RULES2
@media MEDIAQUERY2... {
RULES3
} # [@media MEDIAQUERY... { RULES1 }]
} # [@media MEDIAQUERY...] { SELECTORS { RULES2 } }
} # [@media MEDIAQUERY...] MEDIAQUERY2... { SELECTORS { RULES3 } }
@OTHER #e.g. @keyframe, @font-face, etc.
#Are put out of their parent SELECTOR (but not parent MEDIAQUERY), without any change.
SELECTOR3 { RULES2 } #Adds SELECTOR4 { RULES2 } (inheritance), where SELECTOR4 is every SELECTOR3 matching any
SELECTOR:extend(SLCTOR2 [all],...)#SELECTOR2, replacing the matching part, where "matching" means:
{ RULES } # - no "all": exact (including same letters)
# - "all": partial
#Limitations:
# - SELECTOR3 cannot be a @{VAR}
# - if SELECTOR is inside a @media, can only match SELECTOR3 in same @media rule (excluding
# children ones)
#Instead of multiple SELECTOR:extend(),... { RULES }, can use &:extend() inside RULES
#Prefer :extend() over simple MIXIN
@import [(WORD[, ...])] "FILE" #FILE is considered (unless forcing with WORD less|css):
# - CSS if FILE.css: leaves as is.
# - otherwise Less, i.e. imported. If no extension, adds .less.
#WORD:
# - reference: use FILE, but not in final output
# - inline: really leaves as is, with no CSS parsing (when contains CSS hack)
# - once(def)|multiple: can output FILE several times
# - optional: otherwise error when FILE not found
#FILE:
# - Search paths is --include-path=DIR;... (command-line) or OBJ.paths DIR_ARR (Node)
# - if FILE is insecure HTTPS, must use --insecure (command-line)
URL # - can prepend DIR/ with --rootpath=DIR (command-line)
# - can prepend DIR/ to URLs of FILE imported by @import "DIR/FILE" with --relative-urls
# - can add query variable with --url-args="VAR=VAL"
EXPR #In any VAL, can contain NUM|COLOR|ANGLE|LENP|TIME + - * /
#Process calc(...) unless --strict-math=on, in which case must enclose EXPR as (EXPR)
#Tries to guess|fix units calculation, unless using --strict-units=on
PROP+: VAL
PROP+: VAL2
PROP+_: VAL #Same as (respectively) PROP: VAL, VAL2 or PROP: VAL VAL2
PROP+_: VAL2 #The first declaration is usually the result of a MIXIN, which then prepends VAL.
SCOPE ==> #@VAR:
# - Variable hoisting.
# - Declaring twice overwrites previous declaration.
# - When in a MIXIN: current block has priority, then closest children blocks, then parents.
#MIXIN:
# - Can declare twice same MIXIN: each will be expanded when MIXIN is used.
# - caller/callee can access each other @VAR and MIXIN2, which can act as pseudo return values.
#@VAR containing { RULES }:
# - caller/callee can access each other MIXIN, but only callee can access caller @VAR
@VAR: VAL; #Variable definition.
#Can make a global declaration at start|end of Less file with --global|modify-var="VAR=VAL"
@VAR #Variable use.
@{VAR} #Is macro, so can be used anywhere, including:
# - SELECTOR|VAR (use @{VAR} then)
# - @VAR declaration itself: @@VAR
# - { RULES }:
# - must be used as @VAR(), which will be merged in current RULES2
# - can be MIXIN ARG, i.e. calling MIXIN(@VAR) or MIXIN({ RULES })
MIXIN[(ARG;...)][, ...] #Mixin definition, i.e. elaborated macro.
[when TEST] { RULES } #MIXIN name:
# - cannot contain spaces
# - SELECTOR { MIXIN } ==> SELECTOR MIXIN
# - must then call it as SELECTORMIXIN(), SELECTOR MIXIN() or SELECTOR > MIXIN()
# - other use #ID to namespace mixins
# - can be a SELECTOR, which is useful if no (), so included in final output
# - with (): not included in final output
#ARG:
# - @VAR[: VAL], where VAL is default value
# - if VAL contains ",", must keep trailing ;
# - variadic:
# - last ARG can be (literaly) [@rest]...
# - RULES can use @arguments, which evaluates to VAL[ ...]
# - MIXIN can be overloaded, in which case ARG can be VAL (used for overloading).
#TEST is [not] (BOOL) [,|and ...]:
# - use MIXIN only if BOOL true:
# - can use < > <= >= =
# - can use ARG @VAR
# - can be another way to overload, in which case BOOL can be default(), i.e. if
# nothing else matches, or not (default()), i.e. if anything else also matches.
# - if no (), calls MIXIN() at the root right after:
# - allows conditional CSS: SELECTOR when TEST { ... } or & when TEST { ... }
# (& meaning "always" when at the root)
#MIXIN can call itself (must use when TEST to avoid infinite loop):
# - recursion allows looping (e.g. by passing a decrementing @VAR)
MIXIN[(ARG;...)] [!important]; #Mixin use:
# - replaced by MIXIN RULES
# - can add !important to every RULE
#ARG: like for declaration (named parameter), or without "@VAR:" (positional parameter)
#(can be mixed).
FUNC(ARG,...) #Replaced by return value. Cannot define new ones (can only use standard ones)
┌───────────────┐
│ FUNCTIONS │
└───────────────┘
e("LESS")
~"LESS" #Includes as is
escape(STR) #encoreURI()
%(STR[, ARG...]) #printf()-like. STR can contain %s (removes STR quotes) or %d (keep them).
#Does encoreURIComponent() except ()'~!, so must use ASCII value, e.g. %21
replace(STR, "REGEXP", STR2
[, "FLAGS"])->STR3 #
isnumber|string|color|keyword|url|
pixel|em|percentage|ruleset(VAL) #"number" includes with units
->BOOL #"string" must have quotes
get-unit(LENP|TIME|ANGLE) #Returns px|... or nothing if no unit
isunit(VAL, px|...|'%')->BOOL #
unit(NUM, LENP|TIME|ANGLE) #Adds unit
unit(LENP|TIME|ANGLE)->NUM #Removes unit
convert(LENP, "m|cm|mm|in|pt|pc")
convert(TIME, "ms|s")
convert(ANGLE,"rad|deg|grad|turn")#Changes unit
percentage(NUM)->PERC #
length(LIST)->NUM #LIST is VAL, ...
extract(LIST, NUM)->VAL #
color("COLOR")->COLOR #
image-size(URL)->NUMpx NUMpx #
image-width|height(URL)->NUMpx #
data-uri
(["MIME[;base64|charset=CHARST]",]
URL) #Returns as data URI
svg-gradient(GRADIENT) #Returns a GRADIENT but as SVG data URI, i.e. url("data:image/svg+xml,...")
#GRADIENT ANGLE can also be "ellipse [at center]"
MATH ==> #All keep units
min|max(NUM...) #
ceil|floor(NUM) #
round(NUM[, NUM2]) #
sqrt(NUM) #
abs(NUM) #
pow(NUM, NUM2) #
mod(NUM, NUM2) #
[a]sin|cos|tan(NUM) #
pi() #
rgb[a](3|4 NUM|PERC)->COLOR #NUM 0-255
hsl[a](NUM, 2|3 NUM2|PERC)->COLOR #NUM 0-360, NUM2 0-1
hsv[a](NUM, 2|3 NUM2|PERC)->COLOR #NUM 0-360, NUM2 0-1
[hsv]hue(COLOR)->NUM #
[hsv]saturation(COLOR)->PERC #
lightness(COLOR)->PERC #
hsvvalue(COLOR)->PERC #
red|green|blue(COLOR)->NUM #
alpha(COLOR)->NUM #
luminance(COLOR)->PERC #
[de]saturate|lighten|darken|
fadein|fadeout(COLOR, PERC[,BOOL])
->COLOR #If BOOL true, PERC is relatif, not absolute.
greyscale(COLOR)->COLOR #Same as desaturate(COLOR, 100%)
#Prefer @VAR: luma(COLOR); rgb(VAR, VAR, VAR)
fade(COLOR, PERC)->COLOR #Sets transparency
spin(COLOR, PERC)->COLOR #Relatively change hue
mix(COLOR, COLOR2[, PERC]) #
contrast(COLOR[, COLOR2[, COLOR3
[, PERC]]])->COLOR2|3 #According to COLOR luminance compared to PERC (def: 43%)
multiply|screen|overlay|softlight|
hardlight|difference|exclusion|
average|negation(COLOR, COLOR2)
->COLOR3 #