markdown 在VSCode上安装Sass

Posted 2021-05-05

## Step.1
Install node.js , node-sass

## Step.2
Install extension
Open extension tab, search this list packages.
- [blade runner](https://marketplace.visualstudio.com/items?itemName=yukidoi.blade-runner)
- Sass

then,create tasks.json in your project
```
# current directory is your project
$ mkdir .vscode
$ vim .vscode/tasks.json
```

```
{
    "version": "0.1.0",
    "command": "sass",
    "isShellCommand": true,
    "args": ["--watch", "."],
    "showOutput": "always"
}
```

## Step.3
Compiled for the first time.  
__Command(Control) + Shift + B__

## Basic
```scss
#main{
    #hoge{
        color: red;
    }
    ul{
	    li{
		    a{
			    color: red;
		    }
			&:first-child{
		    	a{
			    	color: blue;
		    	}
	    	}
	    }
    }
}
```

```css
#main #hoge {
  color: red;
}

#main ul li a {
  color: red;
}

#main ul li:first-child a {
  color: blue;
}

```

## Variable
```sass
$basicColor: red;
#main{
    #hoge{
        color: $basicColor;
    }
    #foo{
        border: solid 1px $basicColor;
    }
}
```

```css
#main #hoge {
  color: red;
}

#main #foo {
  border: solid 1px red;
}

```


## Operator
- Plus (+)
- minus (-)
- times (*)
- divided (/)
- division remainders (%)

```scss
$baseMargin: 200;
#main{
    #hoge{
        margin: $baseMargin + 200 + 'px';
        margin: $baseMargin - 200 + 'px';
        margin: $baseMargin * 200 + 'px';
        margin: $baseMargin / 200 + 'px';
        margin: $baseMargin % 200 + 'px';
    }
}
```

```css
#main #hoge {
  margin: "400px";
  margin: "0px";
  margin: "40000px";
  margin: "1px";
  margin: "0px";
}
```

## Import
It can another file.
```scss
@import "common.scss";
@import "top.scss";
```

## Extend
```scss
$baseColor: blue;
.btn{
    border: 2px solid $baseColor;
    border-radius: 3px;
    background-color: $baseColor;
}
.btn-submit{
    @extend .btn;
    font-size: 1.5em;
    font-weight: 600;
}
```

Add .btn-submit to .btn
```css
.btn, .btn-submit {
  border: 2px solid blue;
  border-radius: 3px;
  background-color: blue;
}

.btn-submit {
  font-size: 1.5em;
  font-weight: 600;
}
```

## Mixin
Use variable
```scss
@mixin box($color,$width,$height){
	border: 1px dotted $color;
	width: $width;
	height: $height;
}
#main{
	@include box('blue', 300px , 600px);
}
```

```css
#main {
  border: 1px dotted "blue";
  width: 300px;
  height: 600px;
}
```

Not use variable
```scss
@mixin opacity{
	-webkit-opacity: 0.7;
	-moz-opacity: 0.7;
	-ms-filter: alpha(opacity=70);
	opacity: 0.7;
	filter: alpha(opacity=70);
}
#main a{
	width: 200px;
	@include opacity;
}
```

```css
#main a {
  width: 200px;
  -webkit-opacity: 0.7;
  -moz-opacity: 0.7;
  -ms-filter: alpha(opacity=70);
  opacity: 0.7;
  filter: alpha(opacity=70);
}
```