Chuyển đến nội dung chính

freecodecamp: Sass "Syntactically Awesome StyleSheets"

freecodecamp: Sass "Syntactically Awesome StyleSheets"

from back-end to front-end

Store Data with Sass Variables

"<style type='text/sass'>
$text-color: red;
.header{
text-align: center;
}
.blog-post, h2 {
color: $text-color;
}
</style>"

Nest CSS with Sass

" .blog-post {
h1 {
text-align: center;
color: blue;
}
p {
font-size: 20px;
}
}"

Create Reusable CSS with Mixins

"<style type='text/sass'>
@mixin border-radius($radius){
-webkit-border-radius:$radius;
-moz-border-radius:$radius;
-ms-border-radius:$radius;
border-radius: $radius;
}
#awesome {
@include border-radius(15px);
width: 150px;
height: 150px;
background-color: green;
}
</style>"

Use @if and @else to Add Logic To Your Styles

"<style type='text/sass'>
@mixin border-stroke($val){
@if $val==light{ border:1px solid black;}
@else if $val==medium{border:3px solid black;}
@else if $val==heavy{border:6px solid black;}
@else{border:none;}
}
#box {
width: 150px;
height: 150px;
background-color: red;
@include border-stroke(medium);
}
</style>"

Use @for to Create a Sass Loop

"<style type='text/sass'>
@for $j from 1 through 6{
.text-#{$j}{
font-size: 10px*$j;
}
}
</style>"

Use @each to Map Over Items in a List

"<style type='text/sass'>
@each $color in blue,black,red{
.#{$color}-bg{background-color:$color;}
}
div {
height: 200px;
width: 200px;
}
</style>"

Apply a Style Until a Condition is Met with @while

"<style type='text/sass'>
$x: 1;
@while $x < 11 {
.text-#{$x} { font-size: 5px * $x;}
$x: $x + 1;
}
</style>"

Split Your Styles into Smaller Chunks with Partials

"@import 'variables'"

Extend One Set of CSS Styles to Another Element

"<style type='text/sass'>
h3{
text-align: center;
}
.info{
width: 200px;
border: 1px solid black;
margin: 0 auto;
}
.info-important{
@extend .info;
background-color: magenta;
}
</style>"


Nhãn:

Nhận xét

Đăng nhận xét

Bài đăng phổ biến từ blog này

freecodecamp: React

freecodecamp: React step by step to practice Create a Simple JSX Element " const JSX = <h1>Hello JSX!</h1>; " Create a Complex JSX Element " const JSX=<div> <h1></h1> <p></p> <ul> <li></li> <li></li> <li></li> </ul> </div>; " Add Comments in JSX " const JSX = ( /* here in first time */ <div> <h1>This is a block of JSX</h1> <p>Here 's a subtitle</p> </div> ); " Render HTML Elements to the DOM " const JSX = ( <div id= 'challenge-node' > <h1>Hello World</h1> <p>Lets render this to the DOM</p> </div> ); // change code below this line ReactDOM.render(JSX,document.getElementById( 'challenge-node' )); " Define an HTML Class in JSX " cons...
Đăng nhận xét
Đọc thêm

freecodecamp: javascript debugging

freecodecamp: javascript debugging I note that passed code to help coder find the solution Use the JavaScript Console to Check the Value of a Variable "console.log(a);" Understanding the Differences between the freeCodeCamp and Browser Console " console.log(outputTwo); console.clear(); console.log(outputOne); " Use typeof to Check the Type of a Variable " console.log( typeof (seven)); console.log( typeof (three)); " Catch Misspelled Variable and Function Names "" //copy &past variable Catch Unclosed Parentheses, Brackets, Braces and Quotes " let myArray = [ 1 , 2 , 3 ]; let arraySum = myArray.reduce((previous, current) => previous + current); " Catch Mixed Usage of Single and Double Quotes " let innerHtml = "<p>Click here to <a href=\"#Home\">return home</a></p>" ; " Catch Use of Assignment Operator Instead of Equality Ope...
Đăng nhận xét
Đọc thêm

freecodecamp: regular expression

freecodecamp: regular expression How to pass these challenge? I note that snippet code. Help people to help myself. Regular Expressions - Reuse Patterns Using Capture Groups " let reRegex = /^(\d+)\s\1\s\1$/; // Change this line " Use Capture Groups to Search and Replace " let fixRegex = /good/; // Change this line let replaceText = "okey-dokey" ; // Change this line " Remove Whitespace from Start and End " let wsRegex = /\s{2,}/g; // Change this line let result = hello.replace(wsRegex, '' ); // Change this line "
Đăng nhận xét
Đọc thêm