day10

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";

C今天没有掌握的

没有

你可能感兴趣的:(day10)