Sass – functions

interactive sass shall

in comand line:

• sass -i or sass --interactive + enter
• #333 + #777 -> #aaa
• #090807 – #030201 -> #060606
• #123456 * 2 -> #2468ac
• #222 * #040404 -> #888
• #888 / #080402 – #112244

funkcje w css

• color: rbg(10, 15, 20);
• background-color: hsl(60, 50%, 100%);
• linear-gradient: (to right, $firstGray, $firstGray 50%, $secondGray 50%, $secondGray 75%, $thirdGray 75%, $thirdGray 87.5%, $fourthGray 87.5%, $fourthGray)
• calc

 

funkcje w Sass:

• funkcje operacji na kolorach
• transparentize($color, $amount) // od 0 do 1 -> 1 – całkowicie przeźroczysty
  border-bottom: 1px solid transparentize(#000, 1)
• opacify($color, $amount) // od 0 do 1 -> 1 – całkowicie widoczny
  border-bottom: 1px solid opacify(#000, 0.5)
• transition: border-bottom 1s
  transition-timing-function: ease-in-out
• unquote($font)

Własne funkcje w Sass

przeliczanie px na em

sass:

@function em($pixels, $context: 10px)
  @return ($pixels / $context) * 1em

h1
  font-size: em(40px)

css:

h1 {
  font-size: 4em;
}

 

własny wymiar kolumn

sass:

@function col-width($columns: 12, $page-width: 100%, $gap: 1%)
  @return ($page-width - $gap*($columns - 1)) / $columns

$col: col-width($columns: 8)

#content
  float: left
  width: 6*$col

#sidebar
  float: right
  width: 2*$col

css:

#content {
  float:left;
  width:69.75%
}
#sidebar {
  float:right;
  width:23.25%
}

 

usunięcie jednostki

sass:

@function strip-unit($value)
  @return $value / ($value*0 + 1)