A我今天學了什么

webstrom下Sass安裝

1.[安裝ruby](https://rubyinstaller.org/downloads/)

2.cmd打開命令行輸入
gem source -a http://rubygems.org
gem source -a http://rubygems.org
gem install sass

3.在命令行輸入
sass -v
//看sass是否安裝成功

4.回到webStrom

webstorm-File-settings-Tools-FileWatchers

5.點擊加號

6.program選中ruby下的bin\scss.bat文件,然后點擊OK

2.sass的語法

2.1變量
$bg:pink;
.header{background:$bg};
$place:top;
如果變量需要鑲嵌在字符串之中，就必須需要寫在#{}之中。
.header{
  margin-#{$place}:20px;
}

2.2計算功能

body {
　　　　margin: (14px/2);
　　　　top: 50px + 100px;
　　　　right: $var * 10%;
　　}

2.3嵌套

div h{
  color:red;
}
可以改寫為
　div {
　　　　hi{
　　　　　　color:red;
　　　　}
　　}

2.4代碼重用

2.4.1繼承
//SASS允許一個選擇器，繼承另一個選擇器。比如，現有class1：
.class1 {
　　　　border: 1px solid #ddd;
　　}

.class2 {
　　　　@extend .class1;
　　　　font-size:120%;
　　}

2.4.2Mixin
//是可以重用的代碼塊
　@mixin left {
　　　　float: left;
　　　　margin-left: 10px;
　　}

div {
　　　　@include left;
　　}

//mixin的強大之處，在于可以指定參數和缺省值。　
@mixin left($value: 10px) {
　　　　float: left;
　　　　margin-right: $value;
}
div {
　　　　@include left(20px);
　　}

//可以傳遞多個參數　
@mixin wh($w:100px,$h:100px) {
　　　　width:$w;
        height:$h;
}
div {
　　　　@include wh(200px,200px);
　　}

2.5插入文件

@import命令，用來插入外部文件。

　@import "path/filename.scss";
如果插入的是.css文件，則等同于css的import命令。

@import "foo.css";

B今天已經掌握的

webstrom下Sass安裝

1.[安裝ruby](https://rubyinstaller.org/downloads/)

2.cmd打開命令行輸入
gem source -a http://rubygems.org
gem source -a http://rubygems.org
gem install sass

3.在命令行輸入
sass -v
//看sass是否安裝成功

4.回到webStrom

webstorm-File-settings-Tools-FileWatchers

5.點擊加號

6.program選中ruby下的bin\scss.bat文件,然后點擊OK

2.sass的語法

2.1變量
$bg:pink;
.header{background:$bg};
$place:top;
如果變量需要鑲嵌在字符串之中，就必須需要寫在#{}之中。
.header{
  margin-#{$place}:20px;
}

2.2計算功能

body {
　　　　margin: (14px/2);
　　　　top: 50px + 100px;
　　　　right: $var * 10%;
　　}

2.3嵌套

div h{
  color:red;
}
可以改寫為
　div {
　　　　hi{
　　　　　　color:red;
　　　　}
　　}

2.4代碼重用

2.4.1繼承
//SASS允許一個選擇器，繼承另一個選擇器。比如，現有class1：
.class1 {
　　　　border: 1px solid #ddd;
　　}

.class2 {
　　　　@extend .class1;
　　　　font-size:120%;
　　}

2.4.2Mixin
//是可以重用的代碼塊
　@mixin left {
　　　　float: left;
　　　　margin-left: 10px;
　　}

div {
　　　　@include left;
　　}

//mixin的強大之處，在于可以指定參數和缺省值。　
@mixin left($value: 10px) {
　　　　float: left;
　　　　margin-right: $value;
}
div {
　　　　@include left(20px);
　　}

//可以傳遞多個參數　
@mixin wh($w:100px,$h:100px) {
　　　　width:$w;
        height:$h;
}
div {
　　　　@include wh(200px,200px);
　　}

2.5插入文件

@import命令，用來插入外部文件。

　@import "path/filename.scss";
如果插入的是.css文件，則等同于css的import命令。

@import "foo.css";

沒有