Sass – functions

interactive sass shall

in comand line:

funkcje w css

 

funkcje w Sass:

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)

#sass

Agnieszka Trefler

Agnieszka Trefler (Ruda) - freelancer, web developer, specjalistka od WordPressa z Wrocławia. Z pasją budowania stron, blogowania i fotografowania. Twórca Inspiracji fotograficznych.