day10

A我今天学习到了什么

配置webstorm的安装环境

安装后查看软件Rudy 2.4.1-1/start Command
输入sass -v

01.PNG

没有出来输入gem install sass

Y0SEMP@4TP47PL$CN%{WB7U.png

输入node -v

3V$@OH4IV%ZZ1UM@T9_~(L9.png

sass的语法

新建xxx.scss

在.scss的文件中写css的样式

变量

$bg:pink;
.header{background:$bg};
$place:top;
如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
.header{
  margin-#{$place}:20px;
}

计算功能

div {
  @include bx(30px,right);
  width: $dw / 2;
  height: 300px + 100px;
  background: $bj;
  margin-#{$tp}:30px * 2 ;}

嵌套

div {
  @include bx(30px,right);
  width: $dw / 2;
  height: 300px + 100px;
  background: $bj;
  margin-#{$tp}:30px * 2 ;
  li:first-child {
    color: red;
    margin-left: 40px;
  }
  li:last-child{
    color: aqua;
    a{text-decoration: none;
      text-align: center;
      margin-left: 80px;
    }
  }
  &:hover{cursor: pointer}
}

伪元数，伪类选择器
&:hover{cursor: pointer}

代码重用

继承

/SASS允许一个选择器，继承另一个选择器。比如，现有class1：
.class1 {
　　　　border: 1px solid #ddd;
　　}

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

Mixin

//是可以重用的代码块
　@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);
　　}

插入文件@import命令

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

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

@import "foo.css";

B我掌握了的

配置webstorm的安装环境

安装后查看软件Rudy 2.4.1-1/start Command
输入sass -v

01.PNG

没有出来输入gem install sass

Y0SEMP@4TP47PL$CN%{WB7U.png

输入node -v

3V$@OH4IV%ZZ1UM@T9_~(L9.png

sass的语法

新建xxx.scss

在.scss的文件中写css的样式

变量

$bg:pink;
.header{background:$bg};
$place:top;
如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
.header{
  margin-#{$place}:20px;
}

计算功能

div {
  @include bx(30px,right);
  width: $dw / 2;
  height: 300px + 100px;
  background: $bj;
  margin-#{$tp}:30px * 2 ;}

嵌套

div {
  @include bx(30px,right);
  width: $dw / 2;
  height: 300px + 100px;
  background: $bj;
  margin-#{$tp}:30px * 2 ;
  li:first-child {
    color: red;
    margin-left: 40px;
  }
  li:last-child{
    color: aqua;
    a{text-decoration: none;
      text-align: center;
      margin-left: 80px;
    }
  }
  &:hover{cursor: pointer}
}

伪元数，伪类选择器
&:hover{cursor: pointer}

代码重用

继承

/SASS允许一个选择器，继承另一个选择器。比如，现有class1：
.class1 {
　　　　border: 1px solid #ddd;
　　}

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

Mixin

//是可以重用的代码块
　@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);
　　}

插入文件@import命令

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

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

@import "foo.css";

C我没掌握的

没怎么去运用，不太会实现，要多练