Author: zero2full
SASS Section 8 – If and Loops
Conditional statement: @if…@else if …@else such as: @if a==b {body {color: red;}} @else if a < b {body {color: green;}} @else {body {color: blue;}} Loops @for $i from 1 through 6 { statements } @each $var1, $var2 in $mapVariable {statements, and $var1 represent property in map, $var2 represent value} @while #index < 6 {statement }
SASS Section 8 – Math Operators and Functions
round(num): return the most close to integer floor(num): return the integer removing the float number ceil(num): return the integer + 1 removing the float number percentage(num) abs(num) min(number list) max(number list) random(): return 0 ~ 1, but not include 1
SASS Section 7 – Maps
map structure: $mapName : (‘key’: ‘value’, ‘key1’: ‘value1’, nestedMap: (‘subMapKey’: ‘subMapValue’, ‘subMapKey1’: ‘subMapValue1’, …), …) map function: map-keys(mapVariable), return map’s key map-values(mapVariable), return map’s value map-has-key(mapVariable, valueWant), return a boolean map-get(mapVariable, mapKeyName), return the key’s value map-merge(mapVariable1, mapVariable2) return a merged map map-remove(mapVariable, mapKeyName1, mapKeyName2, …) return map without the removed value inspect() to check
SASS Section 6 – List function
length(listVariable); nth(listVariable, numOfInterested); set-nth(listVariable, numOfInterested, valueChangedTo); list-separator(listVariable); join(listVariable || or values, listVariable || or values, separator(optional)); append(listVariable, value, separator(optional)); index(listVariable, valueOfWant); zip(valueList, valueList, …);
SASS Section 5 – import
import command in sass just likes import in JavaScript to use it: @import ‘path of the file you want to import’;
SASS Section 4 – @mixin
@mixin just likes function in programming language. declare: @minxin funName( arg1, arg2, …) { properties defination} to use mixin: @include funName(arg1, arg2, …);
SASS Section 3 – Inheritance
selector inheritance: you can define selector properties directly in its parent selector. property inheritance: declare place holder start with ‘%’: such as %shared (place holder means this will be replaced by other context) %shared {background: green} using %shared:.content { @extend %shared }. then will generate: .content { background: green} .content can also has its own
SASS Section 2 – Variables
declare variable: start with ‘$’ Different kinds of variable declaration: normal: $width : 600px; $float: 1.5; $int: 20; Strings: $string : ‘../images/hello.jpg’; $stringTwo : “../images/hello.jpg”; $stringThree : no-repeat; //without quotation marker $stringSelector : element; //can treat as selector to use as tag selector: #{$stringSelector} to use as ID selector: ##{$stringSelector} to use as class selector:
SASS Section 1 – Commands
References: https://www.udemy.com/course/sass-workflow/learn/lecture/2255710#overview https://www.sassmeister.com/ install SASS: sudo gem install sass check SASS version: sass -v convert file type between .scss and .sass: sass-convert example.scss exsample.sass sass-convert example.sass exsample.scss convert .sass to .css file: sass example.scss:example.css to synchronous update .css files from .scss file, using watch command sass –watch example.scss:example.css (so when you change .scss file content,
Angular Material – #4 – Tool Bar
import matToolbarModule <mat-toolbar class = “navbar”>… </mat-toolbar> // this is flexbox