From 933350c14873d2d69e3ba31f6a2e1f7b7c632b03 Mon Sep 17 00:00:00 2001 From: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> Date: Tue, 14 May 2019 05:01:32 -0700 Subject: [PATCH] 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 * fix: changed jsx to js Co-Authored-By: Oliver Eyton-Williams --- .../map-dispatch-to-props.english.md | 10 ++++- ...vider-to-connect-redux-to-react.english.md | 8 +++- .../create-a-complex-jsx-element.english.md | 18 ++++++++- ...te-a-component-with-composition.english.md | 12 +++++- .../react/create-a-react-component.english.md | 16 +++++++- .../create-a-stateful-component.english.md | 8 +++- ...-stateless-functional-component.english.md | 11 +++++- .../react/pass-an-array-as-props.english.md | 8 +++- ...-stateless-functional-component.english.md | 14 ++++++- .../set-state-with-this.setstate.english.md | 8 +++- ...ssion-for-conditional-rendering.english.md | 6 ++- .../combine-multiple-reducers.english.md | 9 ++++- .../redux/dispatch-an-action-event.english.md | 7 +++- ...l-a-condition-is-met-with-while.english.md | 10 ++++- ...create-reusable-css-with-mixins.english.md | 30 +++++++++++++-- ...f-css-styles-to-another-element.english.md | 20 +++++++++- .../sass/nest-css-with-sass.english.md | 33 ++++++++++++++++- ...to-smaller-chunks-with-partials.english.md | 8 +++- .../store-data-with-sass-variables.english.md | 13 ++++++- ...ach-to-map-over-items-in-a-list.english.md | 34 +++++++++++++++-- .../use-for-to-create-a-sass-loop.english.md | 26 ++++++++++++- ...lse-to-add-logic-to-your-styles.english.md | 37 +++++++++++++++++-- 22 files changed, 313 insertions(+), 33 deletions(-) diff --git a/curriculum/challenges/english/03-front-end-libraries/react-and-redux/map-dispatch-to-props.english.md b/curriculum/challenges/english/03-front-end-libraries/react-and-redux/map-dispatch-to-props.english.md index 71b0b71573..a4c8b6bc68 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react-and-redux/map-dispatch-to-props.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react-and-redux/map-dispatch-to-props.english.md @@ -9,7 +9,15 @@ isRequired: false
The mapDispatchToProps() 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 mapStateToProps() function you wrote in the last challenge. It returns an object that maps dispatch actions to property names, which become component props. However, instead of returning a piece of state, each property returns a function that calls dispatch with an action creator and any relevant action data. You have access to this dispatch because it's passed in to mapDispatchToProps() as a parameter when you define the function, just like you passed state to mapStateToProps(). Behind the scenes, React Redux is using Redux's store.dispatch() to conduct these dispatches with mapDispatchToProps(). This is similar to how it uses store.subscribe() for components that are mapped to state. For example, you have a loginUser() action creator that takes a username as an action payload. The object returned from mapDispatchToProps() for this action creator would look something like: -
{
  submitLoginUser: function(username) {
    dispatch(loginUser(username));
  }
}
+ +```jsx +{ + submitLoginUser: function(username) { + dispatch(loginUser(username)); + } +} +``` +
## Instructions diff --git a/curriculum/challenges/english/03-front-end-libraries/react-and-redux/use-provider-to-connect-redux-to-react.english.md b/curriculum/challenges/english/03-front-end-libraries/react-and-redux/use-provider-to-connect-redux-to-react.english.md index 8afecb47fe..bfe0e1557d 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react-and-redux/use-provider-to-connect-redux-to-react.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react-and-redux/use-provider-to-connect-redux-to-react.english.md @@ -9,7 +9,13 @@ isRequired: false
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 react-redux package to help accomplish these tasks. React Redux provides a small API with two key features: Provider and connect. Another challenge covers connect. The Provider is a wrapper component from React Redux that wraps your React app. This wrapper then allows you to access the Redux store and dispatch functions throughout your component tree. Provider takes two props, the Redux store and the child components of your app. Defining the Provider for an App component might look like this: -
<Provider store={store}>
  <App/>
</Provider>
+ +```jsx + + + +``` +
## Instructions diff --git a/curriculum/challenges/english/03-front-end-libraries/react/create-a-complex-jsx-element.english.md b/curriculum/challenges/english/03-front-end-libraries/react/create-a-complex-jsx-element.english.md index 2828fd35df..09180f79d3 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/create-a-complex-jsx-element.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/create-a-complex-jsx-element.english.md @@ -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: Valid JSX: -
<div>
  <p>Paragraph One</p>
  <p>Paragraph Two</p>
  <p>Paragraph Three</p>
</div>
+ +```jsx +
+

Paragraph One

+

Paragraph Two

+

Paragraph Three

+
+``` + Invalid JSX: -
<p>Paragraph One</p>
<p>Paragraph Two</p>
<p>Paragraph Three</p>
+ +```jsx +

Paragraph One

+

Paragraph Two

+

Paragraph Three

+``` + ## Instructions diff --git a/curriculum/challenges/english/03-front-end-libraries/react/create-a-component-with-composition.english.md b/curriculum/challenges/english/03-front-end-libraries/react/create-a-component-with-composition.english.md index 6f5515eea0..7872b8fa40 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/create-a-component-with-composition.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/create-a-component-with-composition.english.md @@ -9,7 +9,17 @@ isRequired: false
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 Navbar, Dashboard, and Footer. To compose these components together, you could create an App parent component which renders each of these three components as children. 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 render method you could write: -
return (
<App>
  <Navbar />
  <Dashboard />
  <Footer />
</App>
)
+ +```jsx +return ( + + + +
+ +) +``` + When React encounters a custom HTML tag that references another component (a component name wrapped in < /> 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 App component and the Navbar, Dashboard, and Footer.
diff --git a/curriculum/challenges/english/03-front-end-libraries/react/create-a-react-component.english.md b/curriculum/challenges/english/03-front-end-libraries/react/create-a-react-component.english.md index 64c6715d7a..c2c8180ec1 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/create-a-react-component.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/create-a-react-component.english.md @@ -8,7 +8,21 @@ isRequired: false ## Description
The other way to define a React component is with the ES6 class syntax. In the following example, Kitten extends React.Component: -
class Kitten extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <h1>Hi</h1>
    );
  }
}
+ +```jsx +class Kitten extends React.Component { + constructor(props) { + super(props); + } + + render() { + return ( +

Hi

+ ); + } +} +``` + This creates an ES6 class Kitten which extends the React.Component class. So the Kitten 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 Kitten class has a constructor defined within it that calls super(). It uses super() to call the constructor of the parent class, in this case React.Component. The constructor is a special method used during the initialization of objects that are created with the class keyword. It is best practice to call a component's constructor with super, and pass props 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 props.
diff --git a/curriculum/challenges/english/03-front-end-libraries/react/create-a-stateful-component.english.md b/curriculum/challenges/english/03-front-end-libraries/react/create-a-stateful-component.english.md index 5e01eac3ac..8eb086a53e 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/create-a-stateful-component.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/create-a-stateful-component.english.md @@ -9,7 +9,13 @@ isRequired: false
One of the most important topics in React is state. 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 state property on the component class in its constructor. This initializes the component with state when it is created. The state property must be set to a JavaScript object. Declaring it looks like this: -
this.state = {
  // describe your state here
} + +```jsx +this.state = { + // describe your state here +} +``` + You have access to the state 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 state object can be as complex or as simple as you need it to be. Note that you must create a class component by extending React.Component in order to create state like this.
diff --git a/curriculum/challenges/english/03-front-end-libraries/react/create-a-stateless-functional-component.english.md b/curriculum/challenges/english/03-front-end-libraries/react/create-a-stateless-functional-component.english.md index 4279f7faae..2879a0d2e2 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/create-a-stateless-functional-component.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/create-a-stateless-functional-component.english.md @@ -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 stateless functional component. 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 null. 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: -
// After being transpiled, the <div> will have a CSS class of 'customClass'
const DemoComponent = function() {
  return (
    <div className='customClass' />
  );
};
+ +```jsx +// After being transpiled, the
will have a CSS class of 'customClass' +const DemoComponent = function() { + return ( +
+ ); +}; +``` + 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. diff --git a/curriculum/challenges/english/03-front-end-libraries/react/pass-an-array-as-props.english.md b/curriculum/challenges/english/03-front-end-libraries/react/pass-an-array-as-props.english.md index f24fa1bbb3..5660db7dde 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/pass-an-array-as-props.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/pass-an-array-as-props.english.md @@ -8,7 +8,13 @@ isRequired: false ## Description
The last challenge demonstrated how to pass information from a parent component to a child component as props or properties. This challenge looks at how arrays can be passed as props. To pass an array to a JSX element, it must be treated as JavaScript and wrapped in curly braces. -
<ParentComponent>
  <ChildComponent colors={["green", "blue", "red"]} />
</ParentComponent>
+ +```jsx + + + +``` + The child component then has access to the array property colors. Array methods such as join() can be used when accessing the property. const ChildComponent = (props) => <p>{props.colors.join(', ')}</p> This will join all colors array items into a comma separated string and produce: diff --git a/curriculum/challenges/english/03-front-end-libraries/react/pass-props-to-a-stateless-functional-component.english.md b/curriculum/challenges/english/03-front-end-libraries/react/pass-props-to-a-stateless-functional-component.english.md index 2b4ec18341..520ae4f33f 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/pass-props-to-a-stateless-functional-component.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/pass-props-to-a-stateless-functional-component.english.md @@ -8,9 +8,19 @@ isRequired: false ## 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: props. In React, you can pass props, or properties, to child components. Say you have an App component which renders a child component called Welcome which is a stateless functional component. You can pass Welcome a user property by writing: -
<App>
  <Welcome user='Mark' />
</App>
+ +```jsx + + + +``` + You use custom HTML attributes created by you and supported by React to be passed to the component. In this case, the created property user is passed to the component Welcome. Since Welcome is a stateless functional component, it has access to this value like so: -
const Welcome = (props) => <h1>Hello, {props.user}!</h1>
+ +```jsx +const Welcome = (props) =>

Hello, {props.user}!

+``` + It is standard to call this value props 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.
diff --git a/curriculum/challenges/english/03-front-end-libraries/react/set-state-with-this.setstate.english.md b/curriculum/challenges/english/03-front-end-libraries/react/set-state-with-this.setstate.english.md index b80cd3accd..ad4cc093e7 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/set-state-with-this.setstate.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/set-state-with-this.setstate.english.md @@ -8,7 +8,13 @@ isRequired: false ## Description
The previous challenges covered component state and how to initialize state in the constructor. There is also a way to change the component's state. React provides a method for updating component state called setState. You call the setState method within your component class like so: this.setState(), 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 username in state and wanted to update it, it would look like this: -
this.setState({
  username: 'Lewis'
});
+ +```jsx +this.setState({ + username: 'Lewis' +}); +``` + React expects you to never modify state directly, instead always use this.setState() 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 setState method can be asynchronous. There is an alternative syntax for the setState method which provides a way around this problem. This is rarely needed but it's good to keep it in mind! Please consult the React documentation for further details.
diff --git a/curriculum/challenges/english/03-front-end-libraries/react/use-a-ternary-expression-for-conditional-rendering.english.md b/curriculum/challenges/english/03-front-end-libraries/react/use-a-ternary-expression-for-conditional-rendering.english.md index 447ef0aed1..ccacb1393e 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/use-a-ternary-expression-for-conditional-rendering.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/use-a-ternary-expression-for-conditional-rendering.english.md @@ -8,7 +8,11 @@ isRequired: false ## 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 ternary operator. The ternary operator is often utilized as a shortcut for if/else statements in JavaScript. They're not quite as robust as traditional if/else statements, but they are very popular among React developers. One reason for this is because of how JSX is compiled, if/else statements can't be inserted directly into JSX code. You might have noticed this a couple challenges ago — when an if/else statement was required, it was always outside the return 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: -
condition ? expressionIfTrue : expressionIfFalse
+ +```js +condition ? expressionIfTrue : expressionIfFalse +``` +
## Instructions diff --git a/curriculum/challenges/english/03-front-end-libraries/redux/combine-multiple-reducers.english.md b/curriculum/challenges/english/03-front-end-libraries/redux/combine-multiple-reducers.english.md index bce57794b2..0bcc50191b 100644 --- a/curriculum/challenges/english/03-front-end-libraries/redux/combine-multiple-reducers.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/redux/combine-multiple-reducers.english.md @@ -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 createStore() method. In order to let us combine multiple reducers together, Redux provides the combineReducers() 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 combineReducers() method like this: -
const rootReducer = Redux.combineReducers({
  auth: authenticationReducer,
  notes: notesReducer
});
+ +```js +const rootReducer = Redux.combineReducers({ + auth: authenticationReducer, + notes: notesReducer +}); +``` + Now, the key notes will contain all of the state associated with our notes and handled by our notesReducer. 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 auth and notes properties.
diff --git a/curriculum/challenges/english/03-front-end-libraries/redux/dispatch-an-action-event.english.md b/curriculum/challenges/english/03-front-end-libraries/redux/dispatch-an-action-event.english.md index fca66d9d03..41b3a62aaa 100644 --- a/curriculum/challenges/english/03-front-end-libraries/redux/dispatch-an-action-event.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/redux/dispatch-an-action-event.english.md @@ -9,7 +9,12 @@ isRequired: false
dispatch method is what you use to dispatch actions to the Redux store. Calling store.dispatch() 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 LOGIN: -
store.dispatch(actionCreator());
store.dispatch({ type: 'LOGIN' });
+ +```js +store.dispatch(actionCreator()); +store.dispatch({ type: 'LOGIN' }); +``` +
## Instructions diff --git a/curriculum/challenges/english/03-front-end-libraries/sass/apply-a-style-until-a-condition-is-met-with-while.english.md b/curriculum/challenges/english/03-front-end-libraries/sass/apply-a-style-until-a-condition-is-met-with-while.english.md index a91c5812c7..b11ebddf6a 100644 --- a/curriculum/challenges/english/03-front-end-libraries/sass/apply-a-style-until-a-condition-is-met-with-while.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/sass/apply-a-style-until-a-condition-is-met-with-while.english.md @@ -8,7 +8,15 @@ challengeType: 0
The @while directive is an option with similar functionality to the JavaScript while loop. It creates CSS rules until a condition is met. The @for challenge gave an example to create a simple grid system. This can also work with @while. -
$x: 1;
@while $x < 13 {
  .col-#{$x} { width: 100%/12 * $x;}
  $x: $x + 1;
}
+ +```scss +$x: 1; +@while $x < 13 { + .col-#{$x} { width: 100%/12 * $x;} + $x: $x + 1; +} +``` + First, define a variable $x and set it to 1. Next, use the @while directive to create the grid system while $x is less than 13. After setting the CSS rule for width, $x is incremented by 1 to avoid an infinite loop.
diff --git a/curriculum/challenges/english/03-front-end-libraries/sass/create-reusable-css-with-mixins.english.md b/curriculum/challenges/english/03-front-end-libraries/sass/create-reusable-css-with-mixins.english.md index d2741fee79..01faad55ff 100644 --- a/curriculum/challenges/english/03-front-end-libraries/sass/create-reusable-css-with-mixins.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/sass/create-reusable-css-with-mixins.english.md @@ -8,13 +8,37 @@ challengeType: 0
In Sass, a mixin 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": -
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;
}
+ +```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 box-shadow, or to change each value to test different effects. Mixins are like functions for CSS. Here is how to write one: -
@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;
}
+ +```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 @mixin followed by a custom name. The parameters (the $x, $y, $blur, and $c in the example above) are optional. Now any time a box-shadow rule is needed, only a single line calling the mixin replaces having to type all the vendor prefixes. A mixin is called with the @include directive: -
div {
  @include box-shadow(0px, 0px, 4px, #fff);
}
+ +```scss +div { + @include box-shadow(0px, 0px, 4px, #fff); +} +``` +
## Instructions diff --git a/curriculum/challenges/english/03-front-end-libraries/sass/extend-one-set-of-css-styles-to-another-element.english.md b/curriculum/challenges/english/03-front-end-libraries/sass/extend-one-set-of-css-styles-to-another-element.english.md index 598f41b70a..fb3729c4a2 100644 --- a/curriculum/challenges/english/03-front-end-libraries/sass/extend-one-set-of-css-styles-to-another-element.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/sass/extend-one-set-of-css-styles-to-another-element.english.md @@ -8,11 +8,27 @@ challengeType: 0
Sass has a feature called extend 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 .panel class. It has a background-color, height and border. -
.panel{
  background-color: red;
  height: 70px;
  border: 2px solid green;
}
+ +```scss +.panel{ + background-color: red; + height: 70px; + border: 2px solid green; +} +``` + Now you want another panel called .big-panel. It has the same base properties as .panel, but also needs a width and font-size. It's possible to copy and paste the initial CSS rules from .panel, but the code becomes repetitive as you add more types of panels. The extend directive is a simple way to reuse the rules written for one element, then add more for another: -
.big-panel{
  @extend .panel;
  width: 150px;
  font-size: 2em;
}
+ +```scss +.big-panel{ + @extend .panel; + width: 150px; + font-size: 2em; +} +``` + The .big-panel will have the same properties as .panel in addition to the new styles.
diff --git a/curriculum/challenges/english/03-front-end-libraries/sass/nest-css-with-sass.english.md b/curriculum/challenges/english/03-front-end-libraries/sass/nest-css-with-sass.english.md index 86aa1b5039..2c7aedab7c 100644 --- a/curriculum/challenges/english/03-front-end-libraries/sass/nest-css-with-sass.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/sass/nest-css-with-sass.english.md @@ -8,9 +8,38 @@ challengeType: 0
Sass allows nesting 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: -
nav {
  background-color: red;
}

nav ul {
  list-style: none;
}

nav ul li {
  display: inline-block;
}
+ +```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 nesting can help organize your code by placing child style rules within the respective parent elements: -
nav {
  background-color: red;

  ul {
    list-style: none;

    li {
      display: inline-block;
    }
  }
}
+ +```scss +nav { + background-color: red; + + ul { + list-style: none; + + li { + display: inline-block; + } + } +} + +``` +
## Instructions diff --git a/curriculum/challenges/english/03-front-end-libraries/sass/split-your-styles-into-smaller-chunks-with-partials.english.md b/curriculum/challenges/english/03-front-end-libraries/sass/split-your-styles-into-smaller-chunks-with-partials.english.md index 6cf99738c5..2e71081dc8 100644 --- a/curriculum/challenges/english/03-front-end-libraries/sass/split-your-styles-into-smaller-chunks-with-partials.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/sass/split-your-styles-into-smaller-chunks-with-partials.english.md @@ -9,7 +9,13 @@ challengeType: 0 Partials 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 partials start with the underscore (_) 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 .scss file extension. To bring the code in the partial into another Sass file, use the @import directive. For example, if all your mixins are saved in a partial named "_mixins.scss", and they are needed in the "main.scss" file, this is how to use them in the main file: -
// In the main.scss file

@import 'mixins'
+ +```scss +// In the main.scss file + +@import 'mixins' +``` + Note that the underscore and file extension are not needed in the import statement - Sass understands it is a partial. Once a partial is imported into a file, all variables, mixins, and other code are available to use. diff --git a/curriculum/challenges/english/03-front-end-libraries/sass/store-data-with-sass-variables.english.md b/curriculum/challenges/english/03-front-end-libraries/sass/store-data-with-sass-variables.english.md index 7932fe118a..86fed2586a 100644 --- a/curriculum/challenges/english/03-front-end-libraries/sass/store-data-with-sass-variables.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/sass/store-data-with-sass-variables.english.md @@ -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 let and const keywords. In Sass, variables start with a $ followed by the variable name. Here are a couple examples: -
$main-fonts: Arial, sans-serif;
$headings-color: green;

//To use variables:
h1 {
  font-family: $main-fonts;
  color: $headings-color;
}
+ +```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. diff --git a/curriculum/challenges/english/03-front-end-libraries/sass/use-each-to-map-over-items-in-a-list.english.md b/curriculum/challenges/english/03-front-end-libraries/sass/use-each-to-map-over-items-in-a-list.english.md index c0e3c08a77..732d2ffde1 100644 --- a/curriculum/challenges/english/03-front-end-libraries/sass/use-each-to-map-over-items-in-a-list.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/sass/use-each-to-map-over-items-in-a-list.english.md @@ -8,12 +8,40 @@ challengeType: 0
The last challenge showed how the @for directive uses a starting and ending value to loop a certain number of times. Sass also offers the @each 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. -
@each $color in blue, red, green {
  .#{$color}-text {color: $color;}
}
+ +```scss +@each $color in blue, red, green { + .#{$color}-text {color: $color;} +} +``` + A map has slightly different syntax. Here's an example: -
$colors: (color1: blue, color2: red, color3: green);

@each $key, $color in $colors {
  .#{$color}-text {color: $color;}
}
+ +```scss +$colors: (color1: blue, color2: red, color3: green); + +@each $key, $color in $colors { + .#{$color}-text {color: $color;} +} +``` + Note that the $key variable is needed to reference the keys in the map. Otherwise, the compiled CSS would have color1, color2... in it. Both of the above code examples are converted into the following CSS: -
.blue-text {
  color: blue;
}

.red-text {
  color: red;
}

.green-text {
  color: green;
}
+ +```scss +.blue-text { + color: blue; +} + +.red-text { + color: red; +} + +.green-text { + color: green; +} +``` +
## Instructions diff --git a/curriculum/challenges/english/03-front-end-libraries/sass/use-for-to-create-a-sass-loop.english.md b/curriculum/challenges/english/03-front-end-libraries/sass/use-for-to-create-a-sass-loop.english.md index 90032e9ec5..34a1d13bb8 100644 --- a/curriculum/challenges/english/03-front-end-libraries/sass/use-for-to-create-a-sass-loop.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/sass/use-for-to-create-a-sass-loop.english.md @@ -9,9 +9,31 @@ challengeType: 0 The @for directive adds styles in a loop, very similar to a for loop in JavaScript. @for is used in two ways: "start through end" or "start to end". The main difference is that the "start to end" excludes the end number as part of the count, and "start through end" includes the end number as part of the count. Here's a start through end example: -
@for $i from 1 through 12 {
  .col-#{$i} { width: 100%/12 * $i; }
}
+ +```scss +@for $i from 1 through 12 { + .col-#{$i} { width: 100%/12 * $i; } +} +``` + The #{$i} part is the syntax to combine a variable (i) with text to make a string. When the Sass file is converted to CSS, it looks like this: -
.col-1 {
  width: 8.33333%;
}

.col-2 {
  width: 16.66667%;
}

...

.col-12 {
  width: 100%;
}
+ +```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. diff --git a/curriculum/challenges/english/03-front-end-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.english.md b/curriculum/challenges/english/03-front-end-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.english.md index 211ee11954..b8f15d015f 100644 --- a/curriculum/challenges/english/03-front-end-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.english.md @@ -7,15 +7,46 @@ challengeType: 0 ## Description
The @if directive in Sass is useful to test for a specific case - it works just like the if statement in JavaScript. -
@mixin make-bold($bool) {
  @if $bool == true {
    font-weight: bold;
  }
}
+ +```scss +@mixin make-bold($bool) { + @if $bool == true { + font-weight: bold; + } +} +``` + And just like in JavaScript, @else if and @else test for more conditions: -
@mixin text-effect($val) {
  @if $val == danger {
    color: red;
  }
  @else if $val == alert {
    color: yellow;
  }
  @else if $val == success {
    color: green;
  }
  @else {
    color: black;
  }
}
+ +```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; + } +} +``` +
## Instructions
Create a mixin called border-stroke that takes a parameter $val. The mixin should check for the following conditions using @if, @else if, and @else: -
light - 1px solid black
medium - 3px solid black
heavy - 6px solid black
+ +```scss +light - 1px solid black +medium - 3px solid black +heavy - 6px solid black +``` + If $val is not light, medium, or heavy, the border should be set to none.