-
Notifications
You must be signed in to change notification settings - Fork 16
/
Copy pathcompass.sass.txt
262 lines (223 loc) · 17.2 KB
/
compass.sass.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
┏━━━━━━━━━━━━━┓
┃ COMPASS ┃
┗━━━━━━━━━━━━━┛
ALTERNATIVES ==> #See PostCSS
VERSION ==> #Ruby gem (1.0.3)
SASS ==> #Command line that fire SASS and adds functions, variables and mixins
#Can also interoperate directly with SASS:
# - compass imports: creates -I flags to use directly from SASS, together with
# -r compass, or directly using sass --compass
# - compass interactive: symlink to sass --interactive
# - compass --syntax sass|scss (def: scss)
# - compass --output-style nested|expanded|compact|compressed
# - compass --no-line-comments (def if production)
# - compass compile|watch --sourcemap
# - compass --sass-options OBJ (only in config.rb)
#And CSS:
# - compass validate: verify CSS
EXTENSIONS ==> #Ruby modules.
# - compass -R MODULE: Can also do require in config.rb
# - compass extension: symlink to "gem"
# - compass install: symlink to "gem install"
# - compass unpack: copy to extension folder
# - compass can use -e "development|production" to set shell ENVVAR "environment"
# (def: "development"), which can be used by some modules
# - compass --app|project_type "rails|stand_alone" (def: "stand_alone")
$compass-extensions OBJ #Current extensions as { EXTENSION: VERSION_STR } (def: { compass: VERSION_STR })
FRAMEWORKS ==> #Ruby modules with specific dir structure:
# - compass create|init --using FRAMEWORK
# - compass --load[-all] DIR: load frameworks
# - compass frameworks: list available ones
#Available FRAMEWORK:
# - compass/extension
# - compass/project
# - compass/ellipsis
config.rb #Ruby files created by compass create|init.
#Can set same variables as command line options (and _ instead of -)
#Can print variables with compass config --property VAR
DIRECTORIES ==> #
--sass-dir
--css-dir #Where to compile from|to (def: "sass", "stylesheets")
--images-dir
--javascripts-dir
--fonts-dir #For URLs in CSS
--generated-images-dir #For images generated by SASS
-I DIR #for @import
--app-dir|project-path DIR #Only needed if "rails"
--*-path #Def: project-path + *-dir
--http-path PATH #Same when deployed (def: "/")
--http-*-path PATH #Def: http-path + *-dir
--relative-assets #Make generated URLs relative to app-dir, not absolute to http-path
stylesheet|[generated-]image|font-url #Returns URL (or URL_STR is BOOL true), where PATH is relative to --*-dir, and returned
(PATH[, BOOL[, BOOL2]]) #URL is not.
#If BOOL2 true (def), use cache busting, e.g. timestamp query variable.
compass ACTION #ACTION:
# - compile [DIR]:
# - need to @import "compass";
# --time: add time spent
# --disable-warnings, --quiet
# - watch [DIR]:
# - same with watching
# - create|init [DIR]:
# - creates default SASS/CSS files:
# - ie.[s]css: empty, meant to collect IE-specific [S]CSS
# - print.[s]css: empty, meant to collect print mediaquery-specific [S]CSS
# - screen.[s]css: main [S]CSS file, with only @import "compass/reset"
# - create is on empty DIR, init on non-empty DIR
# - config: create only config.rb
# - clean [DIR]:
# - removes files generated by create|init, and .sass-cache/
#MIXIN() #To indicate MIXIN as opposed to FUNC()
##MIXIN() #To indicate MIXIN with a { ... } block (CONTENT)
GULP-COMPASS(OBJ) #OBJ:
# - style STR: like sass --style
# - comments BOOL (def: false)
# - relative BOOL (def: true): like --relative-assets
# - css|sass|javascript|font|project DIR
# - http_path|generated_images_path URL
# - logging BOOL (def: true)
# - import_path DIR[_ARR]: like sass -I
# - require MODULE[_ARR]
# - load_all BOOL: like compass --load-all
# - sourcemap BOOL (def: false)
# - environment "production|development"
#Version 2.0.3
┌───────────────────────┐
│ VENDOR EXTENSIONS │
└───────────────────────┘
VENDOR EXTENSIONS ==> #Compass MIXIN (see CSS) loop over properties to add browser prefixes.
#Autoprefixer is better, although it only add vendor prefix, not browser hacks.
RESET ==> #Import reset.css, which sets specific values for varying browser default CSS values.
#Automatically done.
┌───────────┐
│ COLOR │
└───────────┘
adjust|scale-lightness|saturation
(color, amount) #See SASS similar functions
shade|tint(color, amount) #Like scale-lightness() with positive|negative AMOUNT
brightness(color) #Returns brightness as PERC
contrast-color #Returns DARK|LIGHT (def: $contrasted-dark|light-default, i.e. black|white) according
(color[, dark[, light[, thresold]]]) #to COLOR brightness compared to THRESOLD (def: 0.5)
#contrasted(...) #Returns background-color: COLOR, color: contrast-color(...)
##Require COMPASS-BLEND-MODES extension. First COLOR is foreground, other background.
##Mimic Photoshop blend modes. Also HSV functions.
blend-normal|multiply|lighten|darken|
darkercolor|lightercolor|lineardodge|
linearburn|difference|screen|exclusion|
overlay|softlight|hardlight|colordodge|
colorburn|linearlight|vividlight|
pinlight|hardmix|colorblend|dissolve|
divide|hue|luminosity|saturation|
substract(COLOR, COLOR2) ##
color-to-hsv(COLOR) ##Returns [ h, s, v ]
hsv-to-color(h,s,v) ##Returns COLOR
hsv-to-hsl(h,s,v) ##Returns [ h, ss, ll ]
hsl-to-hsv(h,ss,ll) ##Returns [ h, s, v ]
color-stops(color[ lenp]...) #Returns COLOR LENP ... by calculating LENPs in-between (def: 0% to 100%), to use
#with linear|radial-gradient
┌──────────┐
│ LIST │
└──────────┘
#no-bullet() #Removes bullet on <li>
#no-bullets() #Removes bullet on <ul> or <ol>
#pretty-bullets(bullet-icon
[, width|height|line-height|padding]) #Create image bullets on <ul> or <ol>
#horizontal-list([padding|direction]) #Make <ul> <ol> look like inline text, with space separation of padding (def: 4px),
#in direction (def: left).
#inline-block-list([padding]) #Similar but really inline block
#inline-list() #Similar but really inline
#delimited-list([separator]) #Same with separator (def: ", ")
┌────────────┐
│ LAYOUT │
└────────────┘
#ellipsis([BOOL]) #Truncates with "..." if needed. Wrap if true (def: false).
#For Firefox support must set $use-mozilla-ellipsis-binding to true, and use
#extension compass/ellipsis
#force-wrap #Similar to white-space: pre-line, but cross-browser
#hide-text() #Make text disappear but keep containers same (by using text-indent)
#replace-text[-with-dimensions] #Make text disappear and sets background-image. x|y are background-position.
(img[,x|y][,inline]) #Change element width|height to image's if "-with-dimensions".
#Use data URI if inline true (def: false)
#establish-baseline() #Used for vertical rhythm, i.e. maintaing same spaces between each baseline, even
#with paragraph gaps and different font sizes. Useful e.g. with multiple columns so
#their lines align with each other.
#See online doc.
stretch([offset-top|right|bottom|left]) #Stretch to parent with optional margins.
#Use position: absolute + top|right|bottom|left: NUM
stretch-x([offset-top|bottom]) #
stretch-y([offset-right|left]) #
sticky-footer(footer-height #Creates a sticky footer:
[, root|footer|root-footer-selector]) # - html, body: height: 100%
# - root (def: "#root") (body direct child): height 100% + margin-bottom NUM
# - root-footer (def: "#root_footer")
# (must be inside root, is an empty space): height NUM
# - footer (def: "#footer") (must be outside root, body direct child, actual footer):
# height NUM, position: relative
#baseline-grid-background #Creates background that repeats a line under the text (for layout testing).
([baseline][, color]) #The interval is baseline (def: $grid-background-baseline-height (def: 1.5em)) and
#color (def: $grid-background-baseline-color (def: #00000088))
#Hidden if $show-[baseline-]grid-backgrounds false
#column-grid-background(...) #Creates background that repeats a column (for layout testing).
#Params:
# - total NUM: number of columns from start (does not change size)
# Def: $grid-background-total-columns (def: 24)
# - column|gutter LENP: width. Def: $grid-backgrounds-column|gutter-width
# (def: 30px|10px)
# - force-fluid BOOL: if true, calculate column|gutter according to total
# Def: $grid-background-force-fluid (def: false)
# - offset LENP: start offset
# Def: $grid-background-offset (def: 0px)
# - column|gutter-color COLOR. Def: $grid-backgrounds-column|gutter-color
# (def: rgba(100,100,225,0.25)|transparent)
#Hidden if $show-[column-]grid-backgrounds false
#grid-background(...) #Combines baseline-grid-background() and column-grid-background()
┌───────────────┐
│ SELECTORS │
└───────────────┘
nest|append(SELECTORS...) #Same as SASS selector-nest|append(...) but returns as STR
elements-of-type(STR) #Returns TAG_STR_ARR to use as selector:
# - "block": all div, p, h1, article, dd, form, etc.
# - "inline": all a, abbr, b, br, canvas, audio, img, input, label, etc.
# - "html5[-block|inline]": only for HTML5 ones
# - "text-input": input, textarea
# - "inline-block": img
# - "table": table
# - "list-item": li
# - "table-row|header|footer-group": tbody|thead|tfoot
# - "table-row": tr
# - "table-cell": td, th
headings([[NUM,] NUM2]) #Returns SELECTORS h1, ..., h6 (or from NUM to NUM2)
opposite-position(position) #e.g. top left -> bottom right
┌─────────────────┐
│ ENVIRONMENT │
└─────────────────┘
compass-env() #Returns ENVVAR environment ("production|development")
current-date|time([format]) #Returns current time according to FORMAT, i.e. Ruby strftime().
#Def: date is time is YYYY-MM-DD, time hh:mm:ss[TZ]
current-source|output-file([BOOL]) #Returns current SCSS|CSS file, with relative path if false (def) or absolute.
┌────────────┐
│ IMAGES │
└────────────┘
@import ".../DIR/*.png";
@include all-DIR-sprites; #Creates a sprite sheet and classes .DIR-FILE which applies images as CSS background.
#DIR-sprite(FILE) #Uses current SELECTOR instead of .DIR-FILE
DIR-sprite-height|width(FILE) #Returns NUM
inline-image(PATH[, mime-type]) #Returns as data URI. PATH is relative to images-dir
inline-font-files(...) #Like font-files(...) but returns as data URI
image-width|height(PATH) #Returns LENP. PATH is relative to images-dir
┌───────────┐
│ MATHS │
└───────────┘
e() #
logarithm(NUM[,base]) #
pow(NUM, NUM2) #
sqrt(NUM) #
pi() #
[a]sin|cos|tan(ANGLE) #
┌───────────┐
│ LINKS │
└───────────┘
#hover-link() #text-decoration: none|underline when hovered or not
#unstyled-link() #Make a link appear like normal text (no special cursor, color, text-decoration)
#link-colors
(normal|hover|active|visited|focus) #color: COLOR when :hover|active|visiter|focus (or normal)