css_sass_basic

Posted on Edited on In ,

SASS

CSS precompiler

convert sass scss less to css

1
2
3
4
5
6
7
8
9
10
11
12
13
$npm install -g less
$lessc xx.less > xx.css

$npm install -g sass
$sass xx.scss xx.css
$sass xx.sass xx.css

watch mode for s single scss
$sass --watch xx.scss:xx.css

watch mode for a dir

$sass --watch a/scss:b/css

sass syntax

There are keywords and special characters in scss
each keyword use @keyword like

  • @mixin: define mixin
  • @use: import module
  • @extend: inheritance
  • @inlcude: call mixin
  • @function: define a function
  • @if/@else/@for/@while/@each/@return control

special character

  • % placeholder
  • & access ancestors selector
  • $ variable
  • # link string and variable if varialbe not used as the value of another property

    variable

    variable can be color, number, text.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* global variable definition, var must start with $ as prefix */
$mainColor: #963;
$siteWidth: 1024px;
$borderStyle: dotted;

body {
  /* local vairable */
  $mainColor: #100;
  /* use variable, local var wins */
  color: $mainColor;
  width: $siteWidth;
}

head {
  /* use global one */
  color: $mainColor;
}

mixins

mixin is used to replace several properites, not one for variable, use @include to contain the mixin

1
2
3
4
5
6
7
8
9
10
11
12
@mixin error($bW: 2px) {
  border: $bW;
  color: red;
}

.login-error {
  //@include error() is ok also;
  @include error;
}
.logout-error {
  @include error(10px);
}

selector nesting

nested selector is child of parent, when converted to css, a space is added between parent and child but for pesudo class and pesudo element they must no space, hence in these two case, we should use & to refer its parent directly.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
section {
  margin: 10px;
}
nav {
  height: 25px;
}

section {
  margin: 10px;
  nav {
    height: 25px;
  }
}

//converted to css
section {
  margin: 10px;
}
//a space between section and nav selector
section nav {
  height: 25px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
section {
  margin: 10px;
  nav {
    height: 25px;
    a {
      color: #0982c1;
      /* & 引用父选择器  section nav a
       with   &: section nav a:hover
       without&: section nav a :hover   -->not working for hover due to extra space.
       */
      &:hover {
        text-decoration: underline;
      }
    }
  }
}

Inheritance

extend to inherits all properties from its parent

1
2
3
4
5
6
7
8
9
10
%block_base {
  margin: 10px 5px;
  padding: 2px;
}

p {
  //extend base class
  @extend %block_base
  border: 1px solid #eee;
}

Operations

must add space before and after operation

1
2
$bW: 2px;
$double_bW: $bW * 2;

color function

built-in color functions

1
2
3
4
5
6
7
8
lighten($color, 10%); /* 返回的颜色在$color基础上变亮10% */
darken($color, 10%); /* 返回的颜色在$color基础上变暗10% */
saturate($color, 10%); /* 返回的颜色在$color基础上饱和度增加10% */
desaturate($color, 10%); /* 返回的颜色在$color基础上饱和度减少10% */
grayscale($color); /* 返回$color的灰度色*/
complement($color); /* 返回$color的补色 */
invert($color); /* 返回$color的反相色 */
mix($color1, $color2, 50%); /* $color1 和 $color2 的 50% 混合色*/

Except color functions, scss also has other built-in functions for number, string, list, map etc, refer to built-in function.

import

Import another scss file at compile time, at last(after generate css) you only see one csss

1
2
3
4
//old way
@import 'base'
// find base.scss at current folder
@use 'base';

if/else

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
p {
  @if 1 + 1 == 2 {
    border: 1px solid;
  }
  @if 5 < 3 {
    border: 2px dotted;
  }
  @if null {
    border: 3px double;
  }
}

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
//note: number and string use same operator "==" and no () for condition;

loop

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* include 3, 1, 2, 3 */
/* @for..from..through to iterate a range of number */
@for $i from 1 through 2 {
.item-#{$i} { width: 2em * $i; }
}
//converted to css as you can see #{$i} used to link string and variable!!!
.item-1 {
	width: 2em;
}

.item-2 {
	width: 4em;
}

//@each ...in bot work for list and map
@each $var in <list>{}

@each $animal in puma, sea-slug, egret, salamander {
    .#{$animal}-icon {
        background-image: url('/images/#{$animal}.png');
    }
}

$i: 6;
@while $i > 0 {
    .item-#{$i} { width: 2em * $i; }
    $i: $i - 2;
}

list/map built-in

list items can be seperated by space, comma
list functions

  • length($list)
  • join($list1,$list2,[$separator]) return a new list, the orignal unchanged
  • append($list,$value,[$separator]), return a new list, the orignal unchanged
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//define a list with different separators(can only be comma or space!!!)
$linkColor: #08c #333; //第一个值为默认值，第二个鼠标滑过值
$linkColor: #08c,#333; //第一个值为默认值，第二个鼠标滑过值
a {
  color: nth($linkColor, 1);
  &:hover {
    color: nth($linkColor, 2);
  }
  //append a new element and assign to itself, no quote for green
  $linkColor: append($linkColor, green);
  button {
    color: nth($linkColor, 3);
  }
}

map functions

  • map-get($map, $key)
  • map-keys($map)
  • map-values($map)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    //define a map
    $headings: (
      h1: 2em,
      h2: 1.5em,
      h3: 1.2em
    );
    @each $header, $size in $headings {
      #{$header} {
        font-size: $size;
      }
    }
    button {
        font-size: map-get($headings, h1);
    }

placeholder

1
2
3
4
%base {
    // if %base is not used, this part will be not converted to css file!!
    color: red;
}

function

1
2
3
4
5
6
7
8
@function size() {
  @return 12px;
}

.body {
  //() is a must to call a function
  font-size: size();
}

ref