generated from r4ds/bookclub-template
-
Notifications
You must be signed in to change notification settings - Fork 11
/
07_tidy-your-css-with-sass.Rmd
213 lines (146 loc) · 5.37 KB
/
07_tidy-your-css-with-sass.Rmd
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
# Tidy your CSS with Sass
**Learning objectives:**
- How Sass might help write CSS
- How `{sass}` offers R users access to Sass
```{r knitr_options, include=FALSE, echo=FALSE, warning=FALSE, message=FALSE}
knitr::opts_chunk$set(
eval = FALSE,
echo = TRUE,
warning = FALSE,
message = FALSE,
out.width = '100%'
)
```
## Sass
### What?
- CSS is a style-sheet language
- Sass is a CSS pre-processor--that is, another style-sheet language that writes CSS
### Why?
Writing CSS ...
- **Can be tedious and/or repetitive.** Multiple rules might share the same properties. Multiple classes could share common rules. CSS might require. Sass has tools to keep code DRY.
- **Cannot compute.** Sometimes simple math operations makes writing CSS better.
> providing access to variables, mathematical operators, functions and loops, thereby reducing the code complexity and extending the possibilitie
Read [Sass's product overview](https://sass-lang.com/guide) for more details.
### How?
- **Variables.** Avoid repetition of repeated properties. Define once. Refer often.
- **Partial and modules.** Split monolithic CSS stylesheets into composable modules.
- **Mixins and functions.** Write CSS by copy-paste or computation.
- **Inheritance.** Like in OOP, child classes inherit from, and extend, parent classes.
- **Flow control.** Rather than manually craft a class for each state, compose a class that is state-dependent.
- **Nesting code.** Conveniently structured like HTML's hierarchy but translates to standard CSS.
## {sass}
Provides access to Sass from R to:
- Write Sass code
- Create CSS from SASS
## Variables
- Avoid repetition
- Set the value of a variable
- Refer to the variable rather than to a particular property
- Set a default that others can override
In CSS
```{css}
// if there is a shared property,
// it needs to be written in each rule
p {
color: red;
}
a {
color: red;
}
```
In Sass:
```{css}
// store shared property in a variable
// refer to that variable in each rule that uses that property
$my_color: red;
p {
color: $my_color;
}
a {
color: $my_color;
}
```
To set a default in Sass, write `!default` so that other developers can override the value while adopting your module:
```{css}
// now developers can provide their value
$my_color: ! red default;
p {
color: $my_color;
}
a {
color: $my_color;
}
```
See more on how to provide one's own value in Sass documentation [here](https://sass-lang.com/documentation/variables#default-values).
## Partials and modules
### Why
- Make CSS composable rather than monolithic
- Capture one set of rules in one file (e.g., fonts, helpers, etc.)
- Compose a main Sass file that imports partials/modules as needed
### How
- Create a files that start with `_`. Sass will recognize them as partials.
- Import them with the `@import` directive. (Update: Sass says to [use `@use` instead](https://sass-lang.com/documentation/at-rules/import), since `@import` may be deprecated.)
See evocative example [in the book](https://unleash-shiny.rinterface.com/beautify-sass.html#partials-and-modules).
## Mixins and functions
### Mixins
- Acts as template of reusable properties
- Returns CSS
- Starts definition with `@mixin`
- Use with `@include` directive
See [example from the book](https://unleash-shiny.rinterface.com/beautify-sass.html#mixins).
### Functions
- Perform calculations--with mathematical operations, which is not possible in CSS
- Returns values to be used used in CSS rules
- Define with `@function` directive
- Use with function name (and, if applicable, arguments) inside CSS rule
See [example from the book](https://unleash-shiny.rinterface.com/beautify-sass.html#functions).
## Extend/inheritance
- Create classes that extend/inherit from a base class
- Define base class with `%parent-class`
- Create child classes that inherit from parent with `@extend` directive and reference to `%parent-class`
See [example from the book](https://unleash-shiny.rinterface.com/beautify-sass.html#extendinheritance).
## Flow control
### if/else
- Logical switch
- Define switch with `@if` and `@else` directives
- Resolves to CSS
See [example from the book](https://unleash-shiny.rinterface.com/beautify-sass.html#if-and-else), which builds on inheritance example in the prior section.
### Loops
- Same structure as JavaScript loop
- Substitute values through string interpolation `#{...}`
## Nesting code
To target a nested element ...
### ... with CSS
```{css}
div {
background-color: black;
}
div p {
color: white;
}
```
### ... with Sass
```{scss}
div {
background-color: black;
p {
color: white;
}
}
```
## Meeting Videos
### Cohort 1
`r knitr::include_url("https://www.youtube.com/embed/Rf_Qn6MOXAI")`
<details>
<summary> Meeting chat log </summary>
```
00:08:00 Lucio Cornejo: could you repeat the comment about variables?
00:15:40 Lucio Cornejo: https://developer.mozilla.org/en-US/docs/Web/CSS/calc
00:29:38 Lucio Cornejo: A comparison between Sass variables and CSS "variables" (custom properties): https://css-tricks.com/difference-between-types-of-css-variables/
00:51:35 Lucio Cornejo: +, - , * and / are supported by calc() in CSS
00:59:51 Lucio Cornejo: Since two weeks ago, Google Chrome supports CSS nesting: https://www.youtube.com/watch?v=KGMe4OyXYEc
01:01:46 Lucio Cornejo: IE always gets bullied :(
01:09:24 Lucio Cornejo: i felt the same thing for the css chapter
01:09:34 Lucio Cornejo: thank you
```
</details>