fix(curriculum): Convert blockquote elements to triple backtick syntax for Front End Libraries (#35994)
* fix: converted blockquotes for react/redux * fix: converted blockquotes for sass * fix: changed jsx to js Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * fix: changed jsx to js Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
This commit is contained in:
Randell Dawson
Tom
@ -9,7 +9,15 @@ isRequired: false
|
||||
<section id='description'>
|
||||
The <code>mapDispatchToProps()</code> function is used to provide specific action creators to your React components so they can dispatch actions against the Redux store. It's similar in structure to the <code>mapStateToProps()</code> function you wrote in the last challenge. It returns an object that maps dispatch actions to property names, which become component <code>props</code>. However, instead of returning a piece of <code>state</code>, each property returns a function that calls <code>dispatch</code> with an action creator and any relevant action data. You have access to this <code>dispatch</code> because it's passed in to <code>mapDispatchToProps()</code> as a parameter when you define the function, just like you passed <code>state</code> to <code>mapStateToProps()</code>. Behind the scenes, React Redux is using Redux's <code>store.dispatch()</code> to conduct these dispatches with <code>mapDispatchToProps()</code>. This is similar to how it uses <code>store.subscribe()</code> for components that are mapped to <code>state</code>.
|
||||
For example, you have a <code>loginUser()</code> action creator that takes a <code>username</code> as an action payload. The object returned from <code>mapDispatchToProps()</code> for this action creator would look something like:
|
||||
<blockquote>{<br> submitLoginUser: function(username) {<br> dispatch(loginUser(username));<br> }<br>}</blockquote>
|
||||
|
||||
```jsx
|
||||
{
|
||||
submitLoginUser: function(username) {
|
||||
dispatch(loginUser(username));
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -9,7 +9,13 @@ isRequired: false
|
||||
<section id='description'>
|
||||
In the last challenge, you created a Redux store to handle the messages array and created an action for adding new messages. The next step is to provide React access to the Redux store and the actions it needs to dispatch updates. React Redux provides its <code>react-redux</code> package to help accomplish these tasks.
|
||||
React Redux provides a small API with two key features: <code>Provider</code> and <code>connect</code>. Another challenge covers <code>connect</code>. The <code>Provider</code> is a wrapper component from React Redux that wraps your React app. This wrapper then allows you to access the Redux <code>store</code> and <code>dispatch</code> functions throughout your component tree. <code>Provider</code> takes two props, the Redux store and the child components of your app. Defining the <code>Provider</code> for an App component might look like this:
|
||||
<blockquote><Provider store={store}><br> <App/><br></Provider></blockquote>
|
||||
|
||||
```jsx
|
||||
<Provider store={store}>
|
||||
<App/>
|
||||
</Provider>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -13,9 +13,23 @@ This one parent element would wrap all of the other levels of nested elements.
|
||||
For instance, several JSX elements written as siblings with no parent wrapper element will not transpile.
|
||||
Here's an example:
|
||||
<b>Valid JSX:</b>
|
||||
<blockquote><div><br> <p>Paragraph One</p><br> <p>Paragraph Two</p><br> <p>Paragraph Three</p><br></div></blockquote>
|
||||
|
||||
```jsx
|
||||
<div>
|
||||
<p>Paragraph One</p>
|
||||
<p>Paragraph Two</p>
|
||||
<p>Paragraph Three</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
<b>Invalid JSX:</b>
|
||||
<blockquote><p>Paragraph One</p><br><p>Paragraph Two</p><br><p>Paragraph Three</p><br></blockquote>
|
||||
|
||||
```jsx
|
||||
<p>Paragraph One</p>
|
||||
<p>Paragraph Two</p>
|
||||
<p>Paragraph Three</p>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -9,7 +9,17 @@ isRequired: false
|
||||
<section id='description'>
|
||||
Now we will look at how we can compose multiple React components together. Imagine you are building an App and have created three components, a <code>Navbar</code>, <code>Dashboard</code>, and <code>Footer</code>.
|
||||
To compose these components together, you could create an <code>App</code> <i>parent</i> component which renders each of these three components as <i>children</i>. To render a component as a child in a React component, you include the component name written as a custom HTML tag in the JSX. For example, in the <code>render</code> method you could write:
|
||||
<blockquote>return (<br> <App><br> <Navbar /><br> <Dashboard /><br> <Footer /><br> </App><br>)</blockquote>
|
||||
|
||||
```jsx
|
||||
return (
|
||||
<App>
|
||||
<Navbar />
|
||||
<Dashboard />
|
||||
<Footer />
|
||||
</App>
|
||||
)
|
||||
```
|
||||
|
||||
When React encounters a custom HTML tag that references another component (a component name wrapped in <code>< /></code> like in this example), it renders the markup for that component in the location of the tag. This should illustrate the parent/child relationship between the <code>App</code> component and the <code>Navbar</code>, <code>Dashboard</code>, and <code>Footer</code>.
|
||||
</section>
|
||||
|
||||
|
||||
@ -8,7 +8,21 @@ isRequired: false
|
||||
## Description
|
||||
<section id='description'>
|
||||
The other way to define a React component is with the ES6 <code>class</code> syntax. In the following example, <code>Kitten</code> extends <code>React.Component</code>:
|
||||
<blockquote>class Kitten extends React.Component {<br> constructor(props) {<br> super(props);<br> }<br><br> render() {<br> return (<br> <h1>Hi</h1><br> );<br> }<br>}</blockquote>
|
||||
|
||||
```jsx
|
||||
class Kitten extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<h1>Hi</h1>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
This creates an ES6 class <code>Kitten</code> which extends the <code>React.Component</code> class. So the <code>Kitten</code> class now has access to many useful React features, such as local state and lifecycle hooks. Don't worry if you aren't familiar with these terms yet, they will be covered in greater detail in later challenges.
|
||||
Also notice the <code>Kitten</code> class has a <code>constructor</code> defined within it that calls <code>super()</code>. It uses <code>super()</code> to call the constructor of the parent class, in this case <code>React.Component</code>. The constructor is a special method used during the initialization of objects that are created with the <code>class</code> keyword. It is best practice to call a component's <code>constructor</code> with <code>super</code>, and pass <code>props</code> to both. This makes sure the component is initialized properly. For now, know that it is standard for this code to be included. Soon you will see other uses for the constructor as well as <code>props</code>.
|
||||
</section>
|
||||
|
||||
@ -9,7 +9,13 @@ isRequired: false
|
||||
<section id='description'>
|
||||
One of the most important topics in React is <code>state</code>. State consists of any data your application needs to know about, that can change over time. You want your apps to respond to state changes and present an updated UI when necessary. React offers a nice solution for the state management of modern web applications.
|
||||
You create state in a React component by declaring a <code>state</code> property on the component class in its <code>constructor</code>. This initializes the component with <code>state</code> when it is created. The <code>state</code> property must be set to a JavaScript <code>object</code>. Declaring it looks like this:
|
||||
<blockquote>this.state = {<br> // describe your state here<br>}</code>
|
||||
|
||||
```jsx
|
||||
this.state = {
|
||||
// describe your state here
|
||||
}
|
||||
```
|
||||
|
||||
You have access to the <code>state</code> object throughout the life of your component. You can update it, render it in your UI, and pass it as props to child components. The <code>state</code> object can be as complex or as simple as you need it to be. Note that you must create a class component by extending <code>React.Component</code> in order to create <code>state</code> like this.
|
||||
</section>
|
||||
|
||||
|
||||
@ -10,7 +10,16 @@ isRequired: false
|
||||
Components are the core of React. Everything in React is a component and here you will learn how to create one.
|
||||
There are two ways to create a React component. The first way is to use a JavaScript function. Defining a component in this way creates a <em>stateless functional component</em>. The concept of state in an application will be covered in later challenges. For now, think of a stateless component as one that can receive data and render it, but does not manage or track changes to that data. (We'll cover the second way to create a React component in the next challenge.)
|
||||
To create a component with a function, you simply write a JavaScript function that returns either JSX or <code>null</code>. One important thing to note is that React requires your function name to begin with a capital letter. Here's an example of a stateless functional component that assigns an HTML class in JSX:
|
||||
<blockquote>// After being transpiled, the <div> will have a CSS class of 'customClass'<br>const DemoComponent = function() {<br> return (<br> <div className='customClass' /><br> );<br>};</blockquote>
|
||||
|
||||
```jsx
|
||||
// After being transpiled, the <div> will have a CSS class of 'customClass'
|
||||
const DemoComponent = function() {
|
||||
return (
|
||||
<div className='customClass' />
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
Because a JSX component represents HTML, you could put several components together to create a more complex HTML page. This is one of the key advantages of the component architecture React provides. It allows you to compose your UI from many separate, isolated components. This makes it easier to build and maintain complex user interfaces.
|
||||
</section>
|
||||
|
||||
|
||||
@ -8,7 +8,13 @@ isRequired: false
|
||||
## Description
|
||||
<section id='description'>
|
||||
The last challenge demonstrated how to pass information from a parent component to a child component as <code>props</code> or properties. This challenge looks at how arrays can be passed as <code>props</code>. To pass an array to a JSX element, it must be treated as JavaScript and wrapped in curly braces.
|
||||
<blockquote><ParentComponent><br> <ChildComponent colors={["green", "blue", "red"]} /><br></ParentComponent></blockquote>
|
||||
|
||||
```jsx
|
||||
<ParentComponent>
|
||||
<ChildComponent colors={["green", "blue", "red"]} />
|
||||
</ParentComponent>
|
||||
```
|
||||
|
||||
The child component then has access to the array property <code>colors</code>. Array methods such as <code>join()</code> can be used when accessing the property.
|
||||
<code>const ChildComponent = (props) => <p>{props.colors.join(', ')}</p></code>
|
||||
This will join all <code>colors</code> array items into a comma separated string and produce:
|
||||
|
||||
@ -8,9 +8,19 @@ isRequired: false
|
||||
## Description
|
||||
<section id='description'>
|
||||
The previous challenges covered a lot about creating and composing JSX elements, functional components, and ES6 style class components in React. With this foundation, it's time to look at another feature very common in React: <b>props</b>. In React, you can pass props, or properties, to child components. Say you have an <code>App</code> component which renders a child component called <code>Welcome</code> which is a stateless functional component. You can pass <code>Welcome</code> a <code>user</code> property by writing:
|
||||
<blockquote><App><br> <Welcome user='Mark' /><br></App></blockquote>
|
||||
|
||||
```jsx
|
||||
<App>
|
||||
<Welcome user='Mark' />
|
||||
</App>
|
||||
```
|
||||
|
||||
You use <strong>custom HTML attributes</strong> created by you and supported by React to be passed to the component. In this case, the created property <code>user</code> is passed to the component <code>Welcome</code>. Since <code>Welcome</code> is a stateless functional component, it has access to this value like so:
|
||||
<blockquote>const Welcome = (props) => <h1>Hello, {props.user}!</h1></blockquote>
|
||||
|
||||
```jsx
|
||||
const Welcome = (props) => <h1>Hello, {props.user}!</h1>
|
||||
```
|
||||
|
||||
It is standard to call this value <code>props</code> and when dealing with stateless functional components, you basically consider it as an argument to a function which returns JSX. You can access the value of the argument in the function body. With class components, you will see this is a little different.
|
||||
</section>
|
||||
|
||||
|
||||
@ -8,7 +8,13 @@ isRequired: false
|
||||
## Description
|
||||
<section id='description'>
|
||||
The previous challenges covered component <code>state</code> and how to initialize state in the <code>constructor</code>. There is also a way to change the component's <code>state</code>. React provides a method for updating component <code>state</code> called <code>setState</code>. You call the <code>setState</code> method within your component class like so: <code>this.setState()</code>, passing in an object with key-value pairs. The keys are your state properties and the values are the updated state data. For instance, if we were storing a <code>username</code> in state and wanted to update it, it would look like this:
|
||||
<blockquote>this.setState({<br> username: 'Lewis'<br>});</blockquote>
|
||||
|
||||
```jsx
|
||||
this.setState({
|
||||
username: 'Lewis'
|
||||
});
|
||||
```
|
||||
|
||||
React expects you to never modify <code>state</code> directly, instead always use <code>this.setState()</code> when state changes occur. Also, you should note that React may batch multiple state updates in order to improve performance. What this means is that state updates through the <code>setState</code> method can be asynchronous. There is an alternative syntax for the <code>setState</code> method which provides a way around this problem. This is rarely needed but it's good to keep it in mind! Please consult the <a target="_blank" href="https://facebook.github.io/react/docs/state-and-lifecycle.html">React documentation</a> for further details.
|
||||
</section>
|
||||
|
||||
|
||||
@ -8,7 +8,11 @@ isRequired: false
|
||||
## Description
|
||||
<section id='description'>
|
||||
Before moving on to dynamic rendering techniques, there's one last way to use built-in JavaScript conditionals to render what you want: the <em><strong>ternary operator</strong></em>. The ternary operator is often utilized as a shortcut for <code>if/else</code> statements in JavaScript. They're not quite as robust as traditional <code>if/else</code> statements, but they are very popular among React developers. One reason for this is because of how JSX is compiled, <code>if/else</code> statements can't be inserted directly into JSX code. You might have noticed this a couple challenges ago — when an <code>if/else</code> statement was required, it was always <em>outside</em> the <code>return</code> statement. Ternary expressions can be an excellent alternative if you want to implement conditional logic within your JSX. Recall that a ternary operator has three parts, but you can combine several ternary expressions together. Here's the basic syntax:
|
||||
<blockquote>condition ? expressionIfTrue : expressionIfFalse</blockquote>
|
||||
|
||||
```js
|
||||
condition ? expressionIfTrue : expressionIfFalse
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -10,7 +10,14 @@ isRequired: false
|
||||
When the state of your app begins to grow more complex, it may be tempting to divide state into multiple pieces. Instead, remember the first principle of Redux: all app state is held in a single state object in the store. Therefore, Redux provides reducer composition as a solution for a complex state model. You define multiple reducers to handle different pieces of your application's state, then compose these reducers together into one root reducer. The root reducer is then passed into the Redux <code>createStore()</code> method.
|
||||
In order to let us combine multiple reducers together, Redux provides the <code>combineReducers()</code> method. This method accepts an object as an argument in which you define properties which associate keys to specific reducer functions. The name you give to the keys will be used by Redux as the name for the associated piece of state.
|
||||
Typically, it is a good practice to create a reducer for each piece of application state when they are distinct or unique in some way. For example, in a note-taking app with user authentication, one reducer could handle authentication while another handles the text and notes that the user is submitting. For such an application, we might write the <code>combineReducers()</code> method like this:
|
||||
<blockquote>const rootReducer = Redux.combineReducers({<br> auth: authenticationReducer,<br> notes: notesReducer<br>});</blockquote>
|
||||
|
||||
```js
|
||||
const rootReducer = Redux.combineReducers({
|
||||
auth: authenticationReducer,
|
||||
notes: notesReducer
|
||||
});
|
||||
```
|
||||
|
||||
Now, the key <code>notes</code> will contain all of the state associated with our notes and handled by our <code>notesReducer</code>. This is how multiple reducers can be composed to manage more complex application state. In this example, the state held in the Redux store would then be a single object containing <code>auth</code> and <code>notes</code> properties.
|
||||
</section>
|
||||
|
||||
|
||||
@ -9,7 +9,12 @@ isRequired: false
|
||||
<section id='description'>
|
||||
<code>dispatch</code> method is what you use to dispatch actions to the Redux store. Calling <code>store.dispatch()</code> and passing the value returned from an action creator sends an action back to the store.
|
||||
Recall that action creators return an object with a type property that specifies the action that has occurred. Then the method dispatches an action object to the Redux store. Based on the previous challenge's example, the following lines are equivalent, and both dispatch the action of type <code>LOGIN</code>:
|
||||
<blockquote>store.dispatch(actionCreator());<br>store.dispatch({ type: 'LOGIN' });</blockquote>
|
||||
|
||||
```js
|
||||
store.dispatch(actionCreator());
|
||||
store.dispatch({ type: 'LOGIN' });
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -8,7 +8,15 @@ challengeType: 0
|
||||
<section id='description'>
|
||||
The <code>@while</code> directive is an option with similar functionality to the JavaScript <code>while</code> loop. It creates CSS rules until a condition is met.
|
||||
The <code>@for</code> challenge gave an example to create a simple grid system. This can also work with <code>@while</code>.
|
||||
<blockquote>$x: 1;<br>@while $x < 13 {<br> .col-#{$x} { width: 100%/12 * $x;}<br> $x: $x + 1;<br>}</blockquote>
|
||||
|
||||
```scss
|
||||
$x: 1;
|
||||
@while $x < 13 {
|
||||
.col-#{$x} { width: 100%/12 * $x;}
|
||||
$x: $x + 1;
|
||||
}
|
||||
```
|
||||
|
||||
First, define a variable <code>$x</code> and set it to 1. Next, use the <code>@while</code> directive to create the grid system <i>while</i> <code>$x</code> is less than 13.
|
||||
After setting the CSS rule for <code>width</code>, <code>$x</code> is incremented by 1 to avoid an infinite loop.
|
||||
</section>
|
||||
|
||||
@ -8,13 +8,37 @@ challengeType: 0
|
||||
<section id='description'>
|
||||
In Sass, a <code>mixin</code> is a group of CSS declarations that can be reused throughout the style sheet.
|
||||
Newer CSS features take time before they are fully adopted and ready to use in all browsers. As features are added to browsers, CSS rules using them may need vendor prefixes. Consider "box-shadow":
|
||||
<blockquote>div {<br> -webkit-box-shadow: 0px 0px 4px #fff;<br> -moz-box-shadow: 0px 0px 4px #fff;<br> -ms-box-shadow: 0px 0px 4px #fff;<br> box-shadow: 0px 0px 4px #fff;<br>}</blockquote>
|
||||
|
||||
```scss
|
||||
div {
|
||||
-webkit-box-shadow: 0px 0px 4px #fff;
|
||||
-moz-box-shadow: 0px 0px 4px #fff;
|
||||
-ms-box-shadow: 0px 0px 4px #fff;
|
||||
box-shadow: 0px 0px 4px #fff;
|
||||
}
|
||||
```
|
||||
|
||||
It's a lot of typing to re-write this rule for all the elements that have a <code>box-shadow</code>, or to change each value to test different effects.
|
||||
<code>Mixins</code> are like functions for CSS. Here is how to write one:
|
||||
<blockquote>@mixin box-shadow($x, $y, $blur, $c){ <br> -webkit-box-shadow: $x, $y, $blur, $c;<br> -moz-box-shadow: $x, $y, $blur, $c;<br> -ms-box-shadow: $x, $y, $blur, $c;<br> box-shadow: $x, $y, $blur, $c;<br>}</blockquote>
|
||||
|
||||
```scss
|
||||
@mixin box-shadow($x, $y, $blur, $c){
|
||||
-webkit-box-shadow: $x, $y, $blur, $c;
|
||||
-moz-box-shadow: $x, $y, $blur, $c;
|
||||
-ms-box-shadow: $x, $y, $blur, $c;
|
||||
box-shadow: $x, $y, $blur, $c;
|
||||
}
|
||||
```
|
||||
|
||||
The definition starts with <code>@mixin</code> followed by a custom name. The parameters (the <code>$x</code>, <code>$y</code>, <code>$blur</code>, and <code>$c</code> in the example above) are optional.
|
||||
Now any time a <code>box-shadow</code> rule is needed, only a single line calling the <code>mixin</code> replaces having to type all the vendor prefixes. A <code>mixin</code> is called with the <code>@include</code> directive:
|
||||
<blockquote>div {<br> @include box-shadow(0px, 0px, 4px, #fff);<br>}</blockquote>
|
||||
|
||||
```scss
|
||||
div {
|
||||
@include box-shadow(0px, 0px, 4px, #fff);
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -8,11 +8,27 @@ challengeType: 0
|
||||
<section id='description'>
|
||||
Sass has a feature called <code>extend</code> that makes it easy to borrow the CSS rules from one element and build upon them in another.
|
||||
For example, the below block of CSS rules style a <code>.panel</code> class. It has a <code>background-color</code>, <code>height</code> and <code>border</code>.
|
||||
<blockquote>.panel{<br> background-color: red;<br> height: 70px;<br> border: 2px solid green;<br>}</blockquote>
|
||||
|
||||
```scss
|
||||
.panel{
|
||||
background-color: red;
|
||||
height: 70px;
|
||||
border: 2px solid green;
|
||||
}
|
||||
```
|
||||
|
||||
Now you want another panel called <code>.big-panel</code>. It has the same base properties as <code>.panel</code>, but also needs a <code>width</code> and <code>font-size</code>.
|
||||
It's possible to copy and paste the initial CSS rules from <code>.panel</code>, but the code becomes repetitive as you add more types of panels.
|
||||
The <code>extend</code> directive is a simple way to reuse the rules written for one element, then add more for another:
|
||||
<blockquote>.big-panel{<br> @extend .panel;<br> width: 150px;<br> font-size: 2em;<br>}</blockquote>
|
||||
|
||||
```scss
|
||||
.big-panel{
|
||||
@extend .panel;
|
||||
width: 150px;
|
||||
font-size: 2em;
|
||||
}
|
||||
```
|
||||
|
||||
The <code>.big-panel</code> will have the same properties as <code>.panel</code> in addition to the new styles.
|
||||
</section>
|
||||
|
||||
|
||||
@ -8,9 +8,38 @@ challengeType: 0
|
||||
<section id='description'>
|
||||
Sass allows <code>nesting</code> of CSS rules, which is a useful way of organizing a style sheet.
|
||||
Normally, each element is targeted on a different line to style it, like so:
|
||||
<blockquote>nav {<br> background-color: red;<br>}<br><br>nav ul {<br> list-style: none;<br>}<br><br>nav ul li {<br> display: inline-block;<br>}</blockquote>
|
||||
|
||||
```scss
|
||||
nav {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
display: inline-block;
|
||||
}
|
||||
```
|
||||
|
||||
For a large project, the CSS file will have many lines and rules. This is where <code>nesting</code> can help organize your code by placing child style rules within the respective parent elements:
|
||||
<blockquote>nav {<br> background-color: red;<br><br> ul {<br> list-style: none;<br><br> li {<br> display: inline-block;<br> }<br> }<br>}<br></blockquote>
|
||||
|
||||
```scss
|
||||
nav {
|
||||
background-color: red;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -9,7 +9,13 @@ challengeType: 0
|
||||
<code>Partials</code> in Sass are separate files that hold segments of CSS code. These are imported and used in other Sass files. This is a great way to group similar code into a module to keep it organized.
|
||||
Names for <code>partials</code> start with the underscore (<code>_</code>) character, which tells Sass it is a small segment of CSS and not to convert it into a CSS file. Also, Sass files end with the <code>.scss</code> file extension. To bring the code in the <code>partial</code> into another Sass file, use the <code>@import</code> directive.
|
||||
For example, if all your <code>mixins</code> are saved in a <code>partial</code> named "_mixins.scss", and they are needed in the "main.scss" file, this is how to use them in the main file:
|
||||
<blockquote>// In the main.scss file<br><br>@import 'mixins'</blockquote>
|
||||
|
||||
```scss
|
||||
// In the main.scss file
|
||||
|
||||
@import 'mixins'
|
||||
```
|
||||
|
||||
Note that the underscore and file extension are not needed in the <code>import</code> statement - Sass understands it is a <code>partial</code>. Once a <code>partial</code> is imported into a file, all variables, <code>mixins</code>, and other code are available to use.
|
||||
</section>
|
||||
|
||||
|
||||
@ -9,7 +9,18 @@ challengeType: 0
|
||||
One feature of Sass that's different than CSS is it uses variables. They are declared and set to store data, similar to JavaScript.
|
||||
In JavaScript, variables are defined using the <code>let</code> and <code>const</code> keywords. In Sass, variables start with a <code>$</code> followed by the variable name.
|
||||
Here are a couple examples:
|
||||
<blockquote>$main-fonts: Arial, sans-serif;<br>$headings-color: green;<br><br>//To use variables:<br>h1 {<br> font-family: $main-fonts;<br> color: $headings-color;<br>}</blockquote>
|
||||
|
||||
```scss
|
||||
$main-fonts: Arial, sans-serif;
|
||||
$headings-color: green;
|
||||
|
||||
//To use variables:
|
||||
h1 {
|
||||
font-family: $main-fonts;
|
||||
color: $headings-color;
|
||||
}
|
||||
```
|
||||
|
||||
One example where variables are useful is when a number of elements need to be the same color. If that color is changed, the only place to edit the code is the variable value.
|
||||
</section>
|
||||
|
||||
|
||||
@ -8,12 +8,40 @@ challengeType: 0
|
||||
<section id='description'>
|
||||
The last challenge showed how the <code>@for</code> directive uses a starting and ending value to loop a certain number of times. Sass also offers the <code>@each</code> directive which loops over each item in a list or map.
|
||||
On each iteration, the variable gets assigned to the current value from the list or map.
|
||||
<blockquote>@each $color in blue, red, green {<br> .#{$color}-text {color: $color;}<br>}</blockquote>
|
||||
|
||||
```scss
|
||||
@each $color in blue, red, green {
|
||||
.#{$color}-text {color: $color;}
|
||||
}
|
||||
```
|
||||
|
||||
A map has slightly different syntax. Here's an example:
|
||||
<blockquote>$colors: (color1: blue, color2: red, color3: green);<br><br>@each $key, $color in $colors {<br> .#{$color}-text {color: $color;}<br>}</blockquote>
|
||||
|
||||
```scss
|
||||
$colors: (color1: blue, color2: red, color3: green);
|
||||
|
||||
@each $key, $color in $colors {
|
||||
.#{$color}-text {color: $color;}
|
||||
}
|
||||
```
|
||||
|
||||
Note that the <code>$key</code> variable is needed to reference the keys in the map. Otherwise, the compiled CSS would have <code>color1</code>, <code>color2</code>... in it.
|
||||
Both of the above code examples are converted into the following CSS:
|
||||
<blockquote>.blue-text {<br> color: blue;<br>}<br><br>.red-text {<br> color: red;<br>}<br><br>.green-text {<br> color: green;<br>}</blockquote>
|
||||
|
||||
```scss
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.green-text {
|
||||
color: green;
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -9,9 +9,31 @@ challengeType: 0
|
||||
The <code>@for</code> directive adds styles in a loop, very similar to a <code>for</code> loop in JavaScript.
|
||||
<code>@for</code> is used in two ways: "start through end" or "start to end". The main difference is that the "start <b>to</b> end" <em>excludes</em> the end number as part of the count, and "start <b>through</b> end" <em>includes</em> the end number as part of the count.
|
||||
Here's a start <b>through</b> end example:
|
||||
<blockquote>@for $i from 1 through 12 {<br> .col-#{$i} { width: 100%/12 * $i; }<br>}</blockquote>
|
||||
|
||||
```scss
|
||||
@for $i from 1 through 12 {
|
||||
.col-#{$i} { width: 100%/12 * $i; }
|
||||
}
|
||||
```
|
||||
|
||||
The <code>#{$i}</code> part is the syntax to combine a variable (<code>i</code>) with text to make a string. When the Sass file is converted to CSS, it looks like this:
|
||||
<blockquote>.col-1 {<br> width: 8.33333%;<br>}<br><br>.col-2 {<br> width: 16.66667%;<br>}<br><br>...<br><br>.col-12 {<br> width: 100%;<br>}</blockquote>
|
||||
|
||||
```scss
|
||||
.col-1 {
|
||||
width: 8.33333%;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
width: 16.66667%;
|
||||
}
|
||||
|
||||
...
|
||||
|
||||
.col-12 {
|
||||
width: 100%;
|
||||
}
|
||||
```
|
||||
|
||||
This is a powerful way to create a grid layout. Now you have twelve options for column widths available as CSS classes.
|
||||
</section>
|
||||
|
||||
|
||||
@ -7,15 +7,46 @@ challengeType: 0
|
||||
## Description
|
||||
<section id='description'>
|
||||
The <code>@if</code> directive in Sass is useful to test for a specific case - it works just like the <code>if</code> statement in JavaScript</code>.
|
||||
<blockquote>@mixin make-bold($bool) {<br> @if $bool == true {<br> font-weight: bold;<br> }<br>}</blockquote>
|
||||
|
||||
```scss
|
||||
@mixin make-bold($bool) {
|
||||
@if $bool == true {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
And just like in JavaScript, <code>@else if</code> and <code>@else</code> test for more conditions:
|
||||
<blockquote>@mixin text-effect($val) {<br> @if $val == danger {<br> color: red;<br> }<br> @else if $val == alert {<br> color: yellow;<br> }<br> @else if $val == success {<br> color: green;<br> }<br> @else {<br> color: black;<br> }<br>}</blockquote>
|
||||
|
||||
```scss
|
||||
@mixin text-effect($val) {
|
||||
@if $val == danger {
|
||||
color: red;
|
||||
}
|
||||
@else if $val == alert {
|
||||
color: yellow;
|
||||
}
|
||||
@else if $val == success {
|
||||
color: green;
|
||||
}
|
||||
@else {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Create a <code>mixin</code> called <code>border-stroke</code> that takes a parameter <code>$val</code>. The <code>mixin</code> should check for the following conditions using <code>@if</code>, <code>@else if</code>, and <code>@else</code>:
|
||||
<blockquote>light - 1px solid black<br>medium - 3px solid black<br>heavy - 6px solid black</blockquote>
|
||||
|
||||
```scss
|
||||
light - 1px solid black
|
||||
medium - 3px solid black
|
||||
heavy - 6px solid black
|
||||
```
|
||||
|
||||
If <code>$val</code> is not <code>light</code>, <code>medium</code>, or <code>heavy</code>, the border should be set to <code>none</code>.
|
||||
</section>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user