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: basic data structures

freecodecamp: basic data structures I note passed challenge code for help. Use an Array to Store a Collection of Data " let yourArray=[ 1 , true , "3" , 4 , 5 ]; // change this line "  Access an Array's Contents Using Bracket Notation " myArray[ 1 ]= "bb" ; " Add Items to an Array with push() and unshift() " arr.unshift( "I" , 2 , "three" ); arr.push( 7 , "VIII" , 9 ); "  Remove Items from an Array with pop() and shift() " let popped=arr.pop(); // change this line let shifted=arr.shift(); // change this line " Remove Items Using splice() " // change code below this line arr.splice( 2 , 2 ); // change code above this line " Add Items Using splice() " // change code below this line arr.splice( 0 , 2 , 'DarkSalmon' , 'BlanchedAlmond' ); // change code above this line " ...
Đăng nhận xét
Đọc thêm